Commits

Thejesh GN  committed e6ad387

added webcam

  • Participants
  • Parent commits 965fba0

Comments (0)

Files changed (8)

File gui/sub/sub_thanks.html

 	<li>GPG encryption :<a href="http://www.hanewin.net/encrypt/" target="_top">www.hanewin.net</a></li>
 	<li><a href="http://code.google.com/p/crypto-js" target="_top">CryptoJs</a> is a growing collection of standard and secure cryptographic algorithms implemented in JavaScript using best practices and patterns.</li>
 	<li><a href="http://oscargodson.github.com/EpicEditor/" target="_top">EpicEditor</a>  is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.</li>
+	<li><a href="http://github.com/mroth/cameraform">mroth/cameraform</a> for webcam</li>
 </ul>
 

File gui/sub/sub_webcam.html

+<style type="text/css">
+		body {
+	  		margin-top: 1.0em;
+	  		background-color: #fff;
+			font-family: "Helvetica,Arial,FreeSans"; 
+	  		color: #666;
+	    }
+	    #container {
+	      margin: 0 auto;
+	      width: 700px;
+	    }
+			h1 { font-size: 3.8em; color: #75c3f9; margin-bottom: 3px; }
+			h1 .small { font-size: 0.4em; }
+			h1 a { text-decoration: none }
+			h2 { font-size: 1.5em; color: #75c3f9; }
+	    h3 { text-align: center; color: #75c3f9; }
+	    a { color: #75c3f9; }
+	    .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
+	    .download { float: right; }
+			pre { background: #000; color: #fff; padding: 15px;}
+	    hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
+	    .footer { text-align:center; padding-top:30px; font-style: italic; }
+	</style>
+	<!-- First, include the JavaScript Library -->
+	<script type="text/javascript" src="<?= $this->get('BASE'); ?>/gui/webcam/webcam.js"></script>
+	
+	<!-- Configure a few settings -->
+	<script language="JavaScript">
+		webcam.set_quality( 90 ); // JPEG quality (1 - 100)
+		webcam.set_shutter_sound( true ); // play shutter click sound
+	</script>
+
+	<table><tr><td valign=top>
+		
+	<!-- Write the movie to the page at 320x240 -->
+	<script language="JavaScript">
+		document.write( webcam.get_html(500, 375) );
+	</script>
+	
+	<!-- Some buttons for controlling things -->
+	<br/><form>
+		<input type=button value="Configure..." onClick="webcam.configure()">
+		&nbsp;&nbsp;
+		<input id="capture_button" type=button value="Capture" onClick="do_capture()">
+		&nbsp;&nbsp;
+		<input id="dump_button" type=button value="Insert" onClick="do_dump()" disabled="true">
+		&nbsp;&nbsp;
+		<input type=button value="Reset" onClick="do_reset()">
+	</form>
+	
+	<!-- Code to handle the server response (see test.php) -->
+	<script language="JavaScript">
+		webcam.set_hook( 'onComplete', 'my_completion_handler' );
+		
+		function do_capture() {
+			webcam.freeze();
+			document.getElementById('capture_button').disabled = true;
+			document.getElementById('dump_button').disabled = false;
+		}
+		
+		function do_dump() {
+			webcam.dump();
+		}
+		
+		function do_reset() {
+			webcam.reset();
+			document.getElementById('capture_button').disabled = false;
+			document.getElementById('dump_button').disabled = true;
+		}
+		
+		function my_completion_handler(base64) {
+			var p = document.getElementById('preview');
+			p.src = 'data:image/jpeg;base64,' + base64;
+			document.getElementById('img_data').value = base64;
+			document.getElementById('submit_button').disabled = false;
+			do_reset();
+		}
+	</script>
+	
+	</td><td width=50>&nbsp;</td><td valign=top>
+		<div id="upload_results" style="background-color:#eee;">
+			<small>form preview image:</small><br/>
+			<img id="preview" src="#"><br/>
+			<small>base64 encoded string as form value:</small><br/>
+			<textarea style="width:500px;" id='img_data' name='img_data'></textarea>
+			<br/><br/><input type='submit' id='submit_button' value='submit form' onClick="alert('I could be submitting your data via a form right now!');" disabled='true'>
+		</div>
+	</td></tr></table>
+	
+

File gui/webcam/shutter.mp3

Binary file added.

File gui/webcam/test.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>CameraForm Test Page</title>
+	
+	<style type="text/css">
+		body {
+	  		margin-top: 1.0em;
+	  		background-color: #fff;
+			font-family: "Helvetica,Arial,FreeSans"; 
+	  		color: #666;
+	    }
+	    #container {
+	      margin: 0 auto;
+	      width: 700px;
+	    }
+			h1 { font-size: 3.8em; color: #75c3f9; margin-bottom: 3px; }
+			h1 .small { font-size: 0.4em; }
+			h1 a { text-decoration: none }
+			h2 { font-size: 1.5em; color: #75c3f9; }
+	    h3 { text-align: center; color: #75c3f9; }
+	    a { color: #75c3f9; }
+	    .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
+	    .download { float: right; }
+			pre { background: #000; color: #fff; padding: 15px;}
+	    hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
+	    .footer { text-align:center; padding-top:30px; font-style: italic; }
+	</style>
+</head>
+<body>
+  <a href="http://github.com/mroth/cameraform"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+
+  <div id="container">
+	<div class="download">
+      <a href="http://github.com/mroth/cameraform/zipball/master">
+        <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
+      <a href="http://github.com/mroth/cameraform/tarball/master">
+        <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
+    </div>
+
+	<h1>cameraform demo</h1>
+	
+	<div class="description">
+	<strong>Demonstrates a webcam implementation: capture an image, then insert it into a form.  This all happens on the client side, no server involved.</strong><br/>
+	For comparison sake of what this is replacing, take a look at: <a href="http://bowser.macminicolo.net/~jhuckaby/jpegcam/test2.html">jpegcam test</a>
+	</div>
+	
+	<!-- First, include the JavaScript Library -->
+	<script type="text/javascript" src="webcam.js"></script>
+	
+	<!-- Configure a few settings -->
+	<script language="JavaScript">
+		webcam.set_quality( 90 ); // JPEG quality (1 - 100)
+		webcam.set_shutter_sound( true ); // play shutter click sound
+	</script>
+
+	<table><tr><td valign=top>
+		
+	<!-- Write the movie to the page at 320x240 -->
+	<script language="JavaScript">
+		document.write( webcam.get_html(320, 240) );
+	</script>
+	
+	<!-- Some buttons for controlling things -->
+	<br/><form>
+		<input type=button value="Configure..." onClick="webcam.configure()">
+		&nbsp;&nbsp;
+		<input id="capture_button" type=button value="Capture" onClick="do_capture()">
+		&nbsp;&nbsp;
+		<input id="dump_button" type=button value="Insert" onClick="do_dump()" disabled="true">
+		&nbsp;&nbsp;
+		<input type=button value="Reset" onClick="do_reset()">
+	</form>
+	
+	<!-- Code to handle the server response (see test.php) -->
+	<script language="JavaScript">
+		webcam.set_hook( 'onComplete', 'my_completion_handler' );
+		
+		function do_capture() {
+			webcam.freeze();
+			document.getElementById('capture_button').disabled = true;
+			document.getElementById('dump_button').disabled = false;
+		}
+		
+		function do_dump() {
+			webcam.dump();
+		}
+		
+		function do_reset() {
+			webcam.reset();
+			document.getElementById('capture_button').disabled = false;
+			document.getElementById('dump_button').disabled = true;
+		}
+		
+		function my_completion_handler(base64) {
+			var p = document.getElementById('preview');
+			p.src = 'data:image/jpeg;base64,' + base64;
+			document.getElementById('img_data').value = base64;
+			document.getElementById('submit_button').disabled = false;
+			do_reset();
+		}
+	</script>
+	
+	</td><td width=50>&nbsp;</td><td valign=top>
+		<div id="upload_results" style="background-color:#eee;">
+			<small>form preview image:</small><br/>
+			<img id="preview" src="#"><br/>
+			<small>base64 encoded string as form value:</small><br/>
+			<textarea style="width:320px;" id='img_data' name='img_data'></textarea>
+			<br/><br/><input type='submit' id='submit_button' value='submit form' onClick="alert('I could be submitting your data via a form right now!');" disabled='true'>
+		</div>
+	</td></tr></table>
+	
+	<div class="footer">
+      get the source code on GitHub : <a href="http://github.com/mroth/cameraform">mroth/cameraform</a>
+    </div>
+
+	</div>
+</body>
+</html>

File gui/webcam/webcam.js

+/* CameraForm - http://github.com/mroth/cameraform/ */
+
+/* CameraForm is based largely on JPEGCam v1.0.8 */
+/* Copyright (c) 2008 - 2009 Joseph Huckaby <jhuckaby@goldcartridge.com> */
+/* Licensed under the GNU Lesser Public License */
+/* http://www.gnu.org/licenses/lgpl.html */
+
+
+// Everything is under a 'webcam' Namespace
+window.webcam = {
+	version: '1.1.0',
+	
+	// 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
+	
+	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 );
+	},
+	
+	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 );
+	},
+	
+	dump: function(callback) {
+		// return image as base64 encoded jpeg
+		// callback function (string or function object)
+		if (callback) this.set_hook('onComplete', callback);
+		
+		this.get_movie()._dump();
+	},
+	
+	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;
+		}
+	}
+};

File gui/webcam/webcam.swf

Binary file added.

File inc/main.php

 		echo $this->render('basic/main.html');
 	}			
 
+
+	function webcam() {
+		$this->set('title','WebCamera');
+		$this->set('notes','Demonstrates a webcam implementation: capture an image, then insert it into a form.  This all happens on the client side, no server involved.');
+		$this->set('LANGUAGE','en-US');
+		$this->set('sub','sub_webcam.html');
+		$out=$this->render('basic/layout.html');
+		$this->set('sub_out_put',$out);
+		$this->set('LANGUAGE','en-US');
+		echo $this->render('basic/main.html');
+	}
+
 }
 ?>
 $app->route('GET /','Main->home');
 $app->route('GET /thanks','Main->thanks');
 $app->route('GET /markdown','Main->markdown');
+$app->route('GET /webcam','Main->webcam');
 $app->route('GET /gpg','Main->gpg');
 $app->route('GET /hash','Hash->genericHash');
+
 $app->run();
 ?>