set version 0.0.20

2022-12-01 18:34:46 +01:00
parent 1ffe3df7d4
commit 454f195108
32 changed files with 3658 additions and 0 deletions
--- a/doc/webcamjs/demos/combo.html
+++ b/doc/webcamjs/demos/combo.html
@@ -0,0 +1,119 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>WebcamJS Test Page</title>
+	<style type="text/css">
+		body { font-family: Helvetica, sans-serif; }
+		h1, h2, h3 { margin-top:0; margin-bottom:0; }
+		form { margin-top: 15px; }
+		form input { margin-right: 15px; }
+		#results { display:inline-block; margin:20px; padding:20px; border:1px solid; background:#ccc; }
+	</style>
+</head>
+<body>
+	
+	<h1>WebcamJS Test Page</h1>
+	<h3>Demonstrates all features at once</h3>
+	<div style="margin-top:5px; margin-bottom:20px;">Captures large 480x480 cropped image while displaying live 240x240 preview, flipped horizontally (mirrored), and allows preview before save.</div>
+	
+	<div id="my_photo_booth">
+		<div id="my_camera"></div>
+		
+		<!-- First, include the Webcam.js JavaScript Library -->
+		<script type="text/javascript" src="../webcam.js"></script>
+		
+		<!-- Configure a few settings and attach camera -->
+		<script language="JavaScript">
+			Webcam.set({
+				// live preview size
+				width: 320,
+				height: 240,
+				
+				// device capture size
+				dest_width: 640,
+				dest_height: 480,
+				
+				// final cropped size
+				crop_width: 480,
+				crop_height: 480,
+				
+				// format and quality
+				image_format: 'jpeg',
+				jpeg_quality: 90,
+				
+				// flip horizontal (mirror mode)
+				flip_horiz: true
+			});
+			Webcam.attach( '#my_camera' );
+		</script>
+		
+		<!-- A button for taking snaps -->
+		<form>
+			<div id="pre_take_buttons">
+				<!-- This button is shown before the user takes a snapshot -->
+				<input type=button value="Take Snapshot" onClick="preview_snapshot()">
+			</div>
+			<div id="post_take_buttons" style="display:none">
+				<!-- These buttons are shown after a snapshot is taken -->
+				<input type=button value="&lt; Take Another" onClick="cancel_preview()">
+				<input type=button value="Save Photo &gt;" onClick="save_photo()" style="font-weight:bold;">
+			</div>
+		</form>
+	</div>
+	
+	<div id="results" style="display:none">
+		<!-- Your captured image will appear here... -->
+	</div>
+	
+	<!-- Code to handle taking the snapshot and displaying it locally -->
+	<script language="JavaScript">
+		// preload shutter audio clip
+		var shutter = new Audio();
+		shutter.autoplay = false;
+		shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
+		
+		function preview_snapshot() {
+			// play sound effect
+			try { shutter.currentTime = 0; } catch(e) {;} // fails in IE
+			shutter.play();
+			
+			// freeze camera so user can preview current frame
+			Webcam.freeze();
+			
+			// swap button sets
+			document.getElementById('pre_take_buttons').style.display = 'none';
+			document.getElementById('post_take_buttons').style.display = '';
+		}
+		
+		function cancel_preview() {
+			// cancel preview freeze and return to live camera view
+			Webcam.unfreeze();
+			
+			// swap buttons back to first set
+			document.getElementById('pre_take_buttons').style.display = '';
+			document.getElementById('post_take_buttons').style.display = 'none';
+		}
+		
+		function save_photo() {
+			// actually snap photo (from preview freeze) and display it
+			Webcam.snap( function(data_uri) {
+				// display results in page
+				document.getElementById('results').innerHTML = 
+					'<h2>Here is your large, cropped image:</h2>' + 
+					'<img src="'+data_uri+'"/><br/></br>' + 
+					'<a href="'+data_uri+'" target="_blank">Open image in new window...</a>';
+				
+				// shut down camera, stop capturing
+				Webcam.reset();
+				
+				// show results, hide photo booth
+				document.getElementById('results').style.display = '';
+				document.getElementById('my_photo_booth').style.display = 'none';
+			} );
+		}
+	</script>
+	
+</body>
+</html>