enabled webcam upload\!

6 files changed, 295 insertions, 2 deletions

diff --git a/static/js/pichat.js b/static/js/pichat.js
index 48b11ae..de01f53 100755
--- a/static/js/pichat.js
+++ b/static/js/pichat.js
@@ -213,11 +213,14 @@ function initChat() {
 
     scrollToEnd()
     scrollWatcher()
+    
+    // see /static/webcam/webcam.js
+    webcam.init()
+    
 
     setTimeout(refresh, 1000);
 }
 
-
 function initProfile() {
     $('.logged-dump .content').each(function() {
         var t = $(this);
@@ -307,4 +310,18 @@ function scrollToEnd(){
 function scrollWatcher(){
   scrollIfPossible()
   setTimeout(scrollWatcher, 500)
+}
+
+// well fuck webkit for not supporting {text-decoration: blink}
+
+function blinkStart(){
+  blinkTimer = setInterval(function(){
+    $(".blink").removeClass("blink").addClass("blink-turning-off")
+    $(".blink-off").removeClass("blink-off").addClass("blink")
+    $(".blink-turning-off").removeClass("blink-turning-off").addClass("blink-off")
+  },500);
+}
+
+function blinkStop(){
+  clearInterval(blinkTimer);
 }
\ No newline at end of file
diff --git a/static/pichat.css b/static/pichat.css
index 9ccb725..1e4a4f3 100755
--- a/static/pichat.css
+++ b/static/pichat.css
@@ -146,7 +146,7 @@ top:15px;
 	color:#fff;
 	text-shadow:1px 1px 3px rgba(0,0,0,1);
 }
-#webcam{
+#webcam-button-upload{
 		border-top-right-radius:10px;
 	-webkit-border-top-right-radius:5px;
 	-moz-border-radius-topright:5px;
@@ -173,6 +173,51 @@ background-image:url(/static/cambutton.png);
 
 	text-shadow:1px 1px 3px rgba(0,0,0,1);
 }
+#webcam-button-snap{
+		border-top-right-radius:10px;
+	-webkit-border-top-right-radius:5px;
+	-moz-border-radius-topright:5px;
+	border-bottom-right-radius:5px;
+	-webkit-border-bottom-right-radius:5px;
+	-moz-border-radius-bottomright:5px;
+	border-radius:5px;
+	position:absolute;
+	display:inline-block;
+	width:120px;
+height:35px;
+background-position:center;
+right:0;
+top:15px;
+padding-bottom:1;
+	text-align:center;
+	z-index:100;
+	cursor:pointer;
+background-color:yellow;
+	font-size:16px;
+	color:#fff;
+background-image:url(/static/bg-btn-red.png);
+
+	text-shadow:1px 1px 3px rgba(0,0,0,1);
+}
+#webcam-button-snap.blink{
+  color:#4f4;
+}
+
+
+#webcam-button-close { /* 16 x 14 */
+  position: fixed;
+  bottom: 300px; /* 240 + 68 - (16 / 2) */
+  right: 313px; /* 320 - (14 / 2) */
+  z-index: 5001;
+  cursor: pointer;
+}
+
+#webcam-preview {
+  position:fixed;
+  bottom: 68px;
+  right:0;
+  z-index:5000
+}
 #upload {
 		border-top-right-radius:10px;
 	-webkit-border-top-right-radius:5px;
diff --git a/static/webcam/close.gif b/static/webcam/close.gif
new file mode 100644
index 0000000..679ca2a
--- /dev/null
+++ b/static/webcam/close.gif
diff --git a/static/webcam/shutter.mp3 b/static/webcam/shutter.mp3
new file mode 100644
index 0000000..16df2b3
--- /dev/null
+++ b/static/webcam/shutter.mp3
diff --git a/static/webcam/webcam.js b/static/webcam/webcam.js
new file mode 100644
index 0000000..9829fd7
--- /dev/null
+++ b/static/webcam/webcam.js
@@ -0,0 +1,231 @@
+/* JPEGCam v1.0.8 */
+/* Webcam library for capturing JPEG images and submitting to a server */
+/* Copyright (c) 2008 - 2009 Joseph Huckaby <jhuckaby@goldcartridge.com> */
+/* Licensed under the GNU Lesser Public License */
+/* http://www.gnu.org/licenses/lgpl.html */
+
+/* Usage:
+	<script language="JavaScript">
+		document.write( webcam.get_html(320, 240) );
+		webcam.set_api_url( 'test.php' );
+		webcam.set_hook( 'onComplete', 'my_callback_function' );
+		function my_callback_function(response) {
+			alert("Success! PHP returned: " + response);
+		}
+	</script>
+	<a href="javascript:void(webcam.snap())">Take Snapshot</a>
+*/
+
+// Everything is under a 'webcam' Namespace
+window.webcam = {
+	version: '1.0.8',
+	
+	// globals
+	ie: !!navigator.userAgent.match(/MSIE/),
+	protocol: location.protocol.match(/https/i) ? 'https' : 'http',
+	callback: null, // user callback for completed uploads
+	swf_url: 'webcam.swf', // URI to webcam.swf movie (defaults to cwd)
+	shutter_url: 'shutter.mp3', // URI to shutter.mp3 sound
+	api_url: '', // URL to upload script
+	loaded: false, // true when webcam movie finishes loading
+	quality: 90, // JPEG quality (1 - 100)
+	shutter_sound: true, // shutter sound effect on/off
+	hooks: {
+		onLoad: null,
+		onComplete: null,
+		onError: null
+	}, // callback hook functions
+	
+	init: function(){
+    webcam.set_api_url( '/upload' );
+    webcam.set_swf_url('/static/webcam/webcam.swf')
+    webcam.set_quality( 90 );
+    webcam.set_shutter_sound(false);
+    webcam.set_hook('onComplete', webcam.uploadCompleted );
+    $("#webcam-button-upload").click(webcam.show);
+    $("#webcam-button-snap").click(webcam.takePicture)
+	},
+	
+	uploadCompleted: function(){
+	  $("#webcam-button-snap").attr("value", "Send Pic")
+	  webcam.reset();
+	},
+	
+	takePicture: function(){
+    webcam.set_form_data({"room": Room})
+    $("#webcam-button-snap").attr("value", "Sending...")
+    webcam.snap()	  
+	},
+	
+	show: function() {
+	  var closeHtml = '<img src="/static/webcam/close.gif" onclick="webcam.hide()" id="webcam-button-close" />'
+    var camHtml = '<div id="webcam-preview">' + webcam.get_html(320, 240) + closeHtml + "</div>" 
+    $("body").append(camHtml)
+    $("#webcam-button-upload").addClass("invisible")
+    $("#webcam-button-snap").removeClass("invisible")
+    blinkStart()
+	},
+	
+	hide: function() {
+    $("#webcam-button-snap").addClass("invisible")
+    $("#webcam-button-upload").removeClass("invisible")
+    blinkStop()
+	  $("#webcam-preview").remove()
+	},
+	
+	set_hook: function(name, callback) {
+		// set callback hook
+		// supported hooks: onLoad, onComplete, onError
+		if (typeof(this.hooks[name]) == 'undefined')
+			return alert("Hook type not supported: " + name);
+		
+		this.hooks[name] = callback;
+	},
+	
+	fire_hook: function(name, value) {
+		// fire hook callback, passing optional value to it
+		if (this.hooks[name]) {
+			if (typeof(this.hooks[name]) == 'function') {
+				// callback is function reference, call directly
+				this.hooks[name](value);
+			}
+			else if (typeof(this.hooks[name]) == 'array') {
+				// callback is PHP-style object instance method
+				this.hooks[name][0][this.hooks[name][1]](value);
+			}
+			else if (window[this.hooks[name]]) {
+				// callback is global function name
+				window[ this.hooks[name] ](value);
+			}
+			return true;
+		}
+		return false; // no hook defined
+	},
+	
+	set_api_url: function(url) {
+		// set location of upload API script
+		this.api_url = url;
+	},
+	
+	set_swf_url: function(url) {
+		// set location of SWF movie (defaults to webcam.swf in cwd)
+		this.swf_url = url;
+	},
+	
+	get_html: function(width, height, server_width, server_height) {
+		// Return HTML for embedding webcam capture movie
+		// Specify pixel width and height (640x480, 320x240, etc.)
+		// Server width and height are optional, and default to movie width/height
+		if (!server_width) server_width = width;
+		if (!server_height) server_height = height;
+		
+		var html = '';
+		var flashvars = 'shutter_enabled=' + (this.shutter_sound ? 1 : 0) + 
+			'&shutter_url=' + escape(this.shutter_url) + 
+			'&width=' + width + 
+			'&height=' + height + 
+			'&server_width=' + server_width + 
+			'&server_height=' + server_height;
+		
+		if (this.ie) {
+			html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="webcam_movie" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+this.swf_url+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/></object>';
+		}
+		else {
+			html += '<embed id="webcam_movie" src="'+this.swf_url+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="webcam_movie" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" />';
+		}
+		
+		this.loaded = false;
+		return html;
+	},
+	
+	get_movie: function() {
+		// get reference to movie object/embed in DOM
+		if (!this.loaded) return alert("ERROR: Movie is not loaded yet");
+		var movie = document.getElementById('webcam_movie');
+		if (!movie) alert("ERROR: Cannot locate movie 'webcam_movie' in DOM");
+		return movie;
+	},
+	
+	snap: function(url, callback) {
+		// take snapshot and send to server
+		// specify fully-qualified URL to server API script
+		// and callback function (string or function object)
+		if (callback) this.set_hook('onComplete', callback);
+		if (url) this.set_api_url(url);
+		
+		this.get_movie()._snap( this.api_url, this.quality, this.shutter_sound ? 1 : 0 );
+	},
+	
+	set_form_data: function(form_data) {
+	  this.get_movie()._set_form_data(form_data);
+	},
+	
+	freeze: function() {
+		// freeze webcam image (capture but do not upload)
+		this.get_movie()._snap('', this.quality, this.shutter_sound ? 1 : 0 );
+	},
+	
+	upload: function(url, callback) {
+		// upload image to server after taking snapshot
+		// specify fully-qualified URL to server API script
+		// and callback function (string or function object)
+		if (callback) this.set_hook('onComplete', callback);
+		if (url) this.set_api_url(url);
+		
+		this.get_movie()._upload( this.api_url );
+	},
+	
+	reset: function() {
+		// reset movie after taking snapshot
+		this.get_movie()._reset();
+	},
+	
+	configure: function(panel) {
+		// open flash configuration panel -- specify tab name:
+		// "camera", "privacy", "default", "localStorage", "microphone", "settingsManager"
+		if (!panel) panel = "camera";
+		this.get_movie()._configure(panel);
+	},
+	
+	set_quality: function(new_quality) {
+		// set the JPEG quality (1 - 100)
+		// default is 90
+		this.quality = new_quality;
+	},
+	
+	set_shutter_sound: function(enabled, url) {
+		// enable or disable the shutter sound effect
+		// defaults to enabled
+		this.shutter_sound = enabled;
+		this.shutter_url = url ? url : 'shutter.mp3';
+	},
+	
+	flash_notify: function(type, msg) {
+		// receive notification from flash about event
+		switch (type) {
+			case 'flashLoadComplete':
+				// movie loaded successfully
+				this.loaded = true;
+				this.fire_hook('onLoad');
+				break;
+
+			case 'error':
+				// HTTP POST error most likely
+				if (!this.fire_hook('onError', msg)) {
+					alert("JPEGCam Flash Error: " + msg);
+				}
+				break;
+
+			case 'success':
+				// upload complete, execute user callback function
+				// and pass raw API script results to function
+				this.fire_hook('onComplete', msg.toString());
+				break;
+
+			default:
+				// catch-all, just in case
+				alert("jpegcam flash_notify: " + type + ": " + msg);
+				break;
+		}
+	}
+};
diff --git a/static/webcam/webcam.swf b/static/webcam/webcam.swf
new file mode 100644
index 0000000..9285dc9
--- /dev/null
+++ b/static/webcam/webcam.swf