Saturday, 17 November 2012

Taking snapshots using jquery


As per many requests am going to post "taking snapshots using jquery"
.we all are very habituate to taking photos and uploading pics in fb or google+.if we analyze what happening in behind it ..it was simple and interesting just 4 files going to give u that camera main javascript file was webcam.js  to give sound 
shutter.mp3

thats all lets start...!




HIERARCHY:




i already told that 4 items clearly it was in pic..












                   DOWNLOAD            LIVE DEMO


CODING:
code for test.html
<head>

 <title>JPEGCam Test Page by siddhu</title>

</head>
<body>
 <table><tr><td valign=top>
 <h1>JPEGCam Test Page</h1>
 <h3>Demonstrates a very simple, one-click capture & upload implementation</h3>
 
 <!-- First, include the JPEGCam JavaScript Library -->
 <script type="text/javascript" src="webcam.js"></script>
 
 <!-- Configure a few settings -->
 <script language="JavaScript">
  webcam.set_api_url( 'test.php' );
  webcam.set_quality( 100 ); // JPEG quality (1 - 100)
  webcam.set_shutter_sound( true ); // play shutter click sound
 </script>
 
 <!-- Next, 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()">
    
  <input type=button value="Take Snapshot" onClick="take_snapshot()">
 </form>
 
 <!-- Code to handle the server response (see test.php) -->
 <script language="JavaScript">
  webcam.set_hook( 'onComplete', 'my_completion_handler' );
  
  function take_snapshot() {
   // take snapshot and upload to server
   document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
   webcam.snap();
  }
  
  function my_completion_handler(msg) 
  {
   // extract URL out of PHP output
   if (msg.match(/(http\:\/\/\S+)/)) {
    var image_url = RegExp.$1;
    // show JPEG image in page
    document.getElementById('upload_results').innerHTML = 
     '<h1>Upload Successful!</h1>' + 
     '<h3>JPEG URL: ' + image_url + '</h3>' + 
     '<img src="' + image_url + '">';
    
    // reset camera for another shot
    webcam.reset();
   }
   else alert("PHP Error: " + msg);
  }
 </script>
 
 </td><td width=50> </td><td valign=top>
  <div id="upload_results" style="background-color:#eee;"></div>
 </td></tr></table>
 <h2>By Siddhu vydyabhushanana </h2>
</body>
</html>

test.php

<?php



$filename = date('YmdHis') . '.jpg';
$result = file_put_contents( $filename, file_get_contents('php://input') );
if (!$result) {
 print "ERROR: Failed to write data to $filename, check permissions\n";
 exit();
}

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $filename;
print "$url\n";

?>

enjoy it...!

2 comments: