File: /storage/v6964/avoxlive/public_html/optimum/webcamjs/demos/combo.html
<!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.min.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="< Take Another" onClick="cancel_preview()">
<input type=button value="Save Photo >" 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>