%PDF- <> %âãÏÓ endobj 2 0 obj <> endobj 3 0 obj <>/ExtGState<>/ProcSet[/PDF/Text/ImageB/ImageC/ImageI] >>/Annots[ 28 0 R 29 0 R] /MediaBox[ 0 0 595.5 842.25] /Contents 4 0 R/Group<>/Tabs/S>> endobj ºaâÚÎΞ-ÌE1ÍØÄ÷{òò2ÿ ÛÖ^ÔÀá TÎ{¦?§®¥kuµùÕ5sLOšuY>endobj 2 0 obj<>endobj 2 0 obj<>endobj 2 0 obj<>endobj 2 0 obj<> endobj 2 0 obj<>endobj 2 0 obj<>es 3 0 R>> endobj 2 0 obj<> ox[ 0.000000 0.000000 609.600000 935.600000]/Fi endobj 3 0 obj<> endobj 7 1 obj<>/ProcSet[/PDF/Text/ImageB/ImageC/ImageI]>>/Subtype/Form>> stream
<!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, 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 }); 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 shutter.currentTime = 0; 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>