Capture Picture from your webcam using webcam.js

If you are from the Indian subcontinent, then I am sure in one more instances, your face has been captured by a webcam (with your consent of-course). Be it for your Aadhar card, PAN card or Driving license, they have captured and saved a picture of you using a webcam. There might be other instances and here in this post I am sharing few simple examples on how to capture pictures from your webcam using webcam.js.

The WebCam.js is a JavaScript library that provides easy to use functions to capture pictures from your webcam. It’s a browser based API, which means, you can integrate the library with a webpage. So, if you are web developer it will easy for you to use it in your web application.

The library uses HTML5 getUserMedia API, which gives access to the user’s webcam.

How to use WebCam.js in your Web page?

There are two ways you can integrate or include the WebCam.js library in your web page.

1) Download the library from GitHub

If you have downloaded the library from the GitHub site, then you can simply add the library in your web page inside the <head> tag. For example,

<head>
    <script type="text/javascript" src="webcamjs-master/webcam.min.js"></script>
</head>

Assuming, you have saved the webcamjs-master folder in the root directory.

2) Add CDN to the web page.

If you are using the new updated version of WebCam.js CDN, then simply add the CDN inside the <head> tag of your app.

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js"></script>
</head>

Now lets a see a simple example.

The Markup and the Script to Configure WebCam.js
<html>
<head>
    <title>Capture picture from your webcam</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js"></script>
</head>

<body>
    <div id="camera" style="height:auto;width:auto; text-align:left;"></div>

    <!--FOR THE SNAPSHOT-->
    <input type="button" value="Take a Snap" id="btPic" onclick="takeSnapShot()" /> 
    <p id="snapShot"></p>
</body>

<script>
    // CAMERA SETTINGS.
    Webcam.set({
        width: 220,
        height: 190,
        image_format: 'jpeg',
        jpeg_quality: 100
    });
    Webcam.attach('#camera');

    // SHOW THE SNAPSHOT.
    takeSnapShot = function () {
        Webcam.snap(function (data_uri) {
            document.getElementById('snapShot').innerHTML = 
                '<img src="' + data_uri + '" width="70px" height="50px" />';
        });
    }
</script>
</html>
Try it

I am using Webcan.js CDN in my example above. In the markup section, I have a <div> element on which live webcam is shown.

Now, see the <script> section, where I have configured the library by first using the .set() function. It has four properties. The width and height of the live images, the image format (which is jpeg) and finally the quality.

Next, I am using the .attach() function, where I have passed a parameter as the selector or the id of the <div> element, where live images will be shown.

To capture static images from the live webcam, I have a button (input element of type button) whose click event calls a JavaScript function named takeSnapShot(). Its a user-defined function.

takeSnapShot = function () { }

Inside the function, I am using the library’s in-built function named Webcam.snap(), which has a data_uri as parameter that is used as an <img> source. The image taken from the webcam is converted into a data URI.

Webcam.snap(function (data_uri) {
    document.getElementById('snapShot').innerHTML = 
        '<img src="' + data_uri + '" width="70px" height="50px" />';
});

The <img> with the data URI is then assigned to a <p> element for display purpose. I have also assigned a specific width and height for the image.

Save the Webcam Images using Webcam.js

You can easily save or download the captured image from a webcam to your computer. The data URI of an image, which I have explained in the above example, can easily be used in a variety of ways. A data URI is a binary format of an image and is prefixed with the data: scheme. You can POST the data URI by making an Ajax call and save it in a database.

You can also use the same data URI to download the image in your computer.

I am extending the above example and making small changes inside the <script> section.

I have added a function named downloadImage() that has two parameters. The name of the file (or image) and the data URI. The function is called from Webcam.snap() function.

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js"></script>
</head>

<body>
    <div id="camera" style="height:auto;width:auto; text-align:left;"></div>
    <input type="button" value="Take a Snap and Download Picture" id="btPic" 
        onclick="takeSnapShot()" /> 
</body>

<script>
    // CAMERA SETTINGS.
    Webcam.set({
        width: 220,
        height: 190,
        image_format: 'jpeg',
        jpeg_quality: 100
    });
    Webcam.attach('#camera');

    // TAKE A SNAPSHOT.
    takeSnapShot = function () {
        Webcam.snap(function (data_uri) {
            downloadImage('arun', data_uri);
        });
    }

    // DOWNLOAD THE IMAGE.
    downloadImage = function (name, datauri) {
        var a = document.createElement('a');
        a.setAttribute('download', name + '.png');
        a.setAttribute('href', datauri);
        a.click();
    }
</script>
</html>
Try it


Its a simple download method (or should I say technique), where I am creating an <a> element and setting its attributes. The anchor’s click event automatically downloads the image in your computers download folder.

Capture Image from webcam Add it to a Table element

Now, lets see a more practical use of this widget.

The Webcam.js library provides simple methods to capture webcam image using a web application. You can show the captured images on different web elements, like an HTML table.

In my previous blog posts I have shared many useful examples on how to add different elements to an HTML table dynamically for various purposes. Now lets see how we can add images, taken from a webcam, into table cells.

<html>
<head>
    <title>Capture picture from your webcam and show it in a Table</title>
    <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js "></script>

    <style>
    	table, input {
            width: auto;
            font: 15px Calibri;
        }
        table, th, td, th {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
            font-weight: normal;
        }
        #camBox{
            display:none;
            position:fixed;
            border:0;
            top:0;
            right:0;
            left:0;
            overflow-x:auto;
            overflow-y:hidden;
            z-index:9999;
            background-color:rgba(239,239,239,.9);
            width:100%;
            height:100%;
            padding-top:10px;
            text-align:center;
            cursor:pointer;
            -webkit-box-align:center;-webkit-box-orient:vertical;
            -webkit-box-pack:center;-webkit-transition:.2s opacity;
            -webkit-perspective:1000
        }

        .revdivshowimg{
            width:300px;
            top:0;
            padding:0;
            position:relative;
            margin:0 auto;
            display:block;
            background-color:#fff;
            webkit-box-shadow:6px 0 10px rgba(0,0,0,.2),-6px 0 10px rgba(0,0,0,.2);
            -moz-box-shadow:6px 0 10px rgba(0,0,0,.2),-6px 0 10px rgba(0,0,0,.2);
            box-shadow:6px 0 10px rgba(0,0,0,.2),-6px 0 10px rgba(0,0,0,.2);
            overflow:hidden;
            border-radius:3px;
            color:#17293c
        }        
    </style>
</head>
<body>
    <div id="camBox" style="width:100%;height:100%;">
        <!--POPUP DIALOG BOX TO SHOW LIVE WEBCAM.-->
        <div class="revdivshowimg" style="top:20%;text-align:center;margin:0 auto;">

            <div id="camera" style="height:auto;text-align:center;margin:0 auto;"></div>

            <p>
                <input type="button" value="Ok" id="btAddPicture" 
                    onclick="addCamPicture()" /> 
                <input type="button" value="Cancel" 
                    onclick="document.getElementById('camBox').style.display = 'none';" />
            </p>
            <input type="hidden" id="rowid" /><input type="hidden" id="dataurl" />
        </div>

    </div>

    <div style="width:300px;">
        <table id="myTable">
            <tbody>
                <tr><th>Employee Name</th><th>Picture</th></tr>
                <tr>
                    <td>Alpha</td>
                    <td>
                        <div id="div_alpha"></div>
                        <input type="button" value="Take a SnapShot" id="alpha" 
                            onclick="takeSnapshot(this)" />
                    </td>
                </tr>
                <tr>
                    <td>Bravo</td>
                    <td>
                        <div id="div_bravo"></div>
                        <input type="button" value="Take a SnapShot" id="bravo" 
                            onclick="takeSnapshot(this)" />
                    </td>
                </tr>
                <tr>
                    <td>Charlie</td>
                    <td>
                        <div id="div_charlie"></div>
                        <input type="button" value="Take a SnapShot" id="charlie" 
                            onclick="takeSnapshot(this)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    // CAMERA SETTINGS.
    Webcam.set({
        width: 220,
        height: 190,
        image_format: 'jpeg',
        jpeg_quality: 100
    });
    Webcam.attach('#camera');

    takeSnapshot = function (oButton) {
        document.getElementById('camBox').style.display = 'block';
        document.getElementById('rowid').value = oButton.id
    }

    addCamPicture = function () {
        var rowid = document.getElementById('rowid').value;

        Webcam.snap(function (data_uri) {
            document.getElementById('div_' + rowid).innerHTML = 
                '<img src="' + data_uri + '" id="" width="70px" height="50px" />';
        });

        document.getElementById('rowid').value = '';
        document.getElementById('camBox').style.display = 'none';       // HIDE THE POPUP DIALOG BOX.
    }
</script>
</html></html>
Try it

You can alter the above code according to your requirement. You can add the download image method that I have explained in the 2nd example above, to this example.

Browser Compatibility

It works fine with any latest version of Chrome. I have tested the above examples with Microsoft Edge and it worked fine.

In some older versions of IE, it uses flash. However, I have not tested it.

Well, that’s it. Thanks for reading.

← Previous



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner