October 21, 2014 2:22 pm

How to Take Picture with WebCam in JavaScript+Flash & upload in PHP

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.

How to Take Picture with WebCam in JavaScript+Flash & upload in PHP

[wpdm_file id=116]DEMO

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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

13 responses to “How to Take Picture with WebCam in JavaScript+Flash & upload in PHP”

  1. Jack says:

    Nice One!!!!!!

  2. vaibhav says:

    this script is not working in chrome

  3. Dhananjay says:

    Nice job Bux, Thanks

  4. sradha says:

    Image is not saving to folder.plz help me.

  5. Javier vidani says:

    Hi it’s great script
    You can help me o tell me how I can’t add mor $var to post it to the upload file .
    I need to post/get more var. from index to upload to save it in the server

  6. shripad muley says:

    hello sir,
    after clicking on SNAP IT, its giving an error.
    ERROR:movie is not loaded yet

  7. Bruno Chichava says:

    Congrats for this very usefull tutorial, i tested and is working great, can you please help me integrating this with a cakephp 3 application? Now the application is not showing the live cam, thanks in advance.

  8. Aiyyappan Sri says:

    Hi Bux, it’s a great. Please provide us the source code, we could enhance it. Thanks. Waiting for your help.

  9. Gerard says:

    helllo. im getting an error ‘webcam is not defined’ despite following every codes mentioned above. thank you

Leave a Reply

Your email address will not be published. Required fields are marked *