Source

tools / gui / webcam / index.html

Full commit
	
	<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="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: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>