Capture Image From Webcam With WebcamJS

Many websites have user profile with the option of uploading profile picture along with the integration of webcam. So users can take a snap from webcam and then use it as a profile picture. Integrating a webcam on a website is not easy but there are many free and commercial APIs are available which can make your work easy.

WebcamJS script for integrating webcam with Application

There are many scripts which allow users to integrate webcam in websites. WebcamJS is also a similar kind of webcam integration script. It was initially called as jpegcam and rely on flash to save file on server. Now, it has been improved to become WebCamJS. It uses HTML5 and flash is only used when HTML5 is not supported in browser.

WebcamJS lets you capture images from webcam and then delivers you as JPEG or PNG Data URIs. You can then save it to your server, display in browser or render it in canvas. It works on all browsers but older browsers require flash.

It lets you customize various things including cropping and flipping the image.

Use of the script is easy. You just need to include the JS file and then use the code given below.

<script src="webcam.js"></script>

    <div id="my_camera" style="width:320px; height:240px;"></div>
    <div id="my_result"></div>

    <script language="JavaScript">
        Webcam.attach( '#my_camera' );

        function take_snapshot() {
            Webcam.snap( function(data_uri) {
                document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
            } );
        }
    </script>

    <a href="javascript:void(take_snapshot())">Take Snapshot</a>

There are also various other options which you can read in the github page of the script.

Download: https://github.com/jhuckaby/webcamjs

Licence: MIT License