I have received many requests from my readers to write a tutorial on how to capture image using webcam. So today I am writing a tutorial on how you can capture image with your webpage and upload it to server, basically its a JavaScript plugin with Flash and used PHP to store image on server and its very easy to integrate and manage I hope you like this tutorial.

Basically I have used a JavaScript library called jpegcam this library is Flash + JavaScript library display cam movie in your webpage and capture snapshots and submit to server using in JPEG format in PHP.

Flash movie first activates and allows the user to make adjustments before submitting. All controls for displaying the Flash device configuration panel and taking snapshots is handled from Javascript.

Code index.htm

<script type="text/javascript" src="webcam.js"></script> <!--JavaScript library-->
    <script>
        webcam.set_api_url( 'upload.php' ); // send captured picture to this file
        webcam.set_quality( 90 ); // JPEG quality (1 - 100)
        webcam.set_shutter_sound( true ); // play shutter click sound
        
        webcam.set_hook( 'onComplete', 'my_completion_handler' );
        
        function take_snapshot() {
            // take snapshot and upload to server
            document.getElementById('upload_results').innerHTML = 'Snapshot<br>'+
            '<img src="uploading.gif">';
            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 = 
                    'Snapshot<br>' + 
                    '<a href="'+image_url+'" target"_blank"><img src="' + image_url + '"></a>';
                
                // reset camera for another shot
                webcam.reset();
            }
            else alert("PHP Error: " + msg);
        }
    </script>

This JavaScript used to control cam action like capture image and send it to upload.php file on server, Play a click sound on capture and display captured image on the same page.

upload.php

<?php

$filename = date('YmdHis') . '.jpg';
$result = file_put_contents( 'images/'.$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']) . '/images/' . $filename;
print "$url\n";

?>

This PHP code accept input and save it in images directory and return image url to show that image on page.

That’s all for today’s tutorial I hope you guyz like this tutorial please test demo befor downloading demo of the tutorial. Please feel free to comment below your reviews and issues you face in its implementation.