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>test.php
<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>
<?phpenjoy it...!
$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";
?>
Great Article
ReplyDeleteJavaScript Training in Chennai | JavaScript Course | Javascript Online Course | Angularjs Training in Chennai | Backbone.JS Training in Chennai | Bootstrap Training in Chennai | Node.js Training in Chennai
Great Article
Online Java Training | Java Training in Chennai | Java Training Institutes in Chennai | Java EE course | Java Course in Chennai | J2EE Training in Chennai | java j2ee training institutes in chennai | Java 360
This is a great inspiring article. I am pretty much pleased with your good work. You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post.local marketing seo
ReplyDelete