Capture Picture from your webcam using webcam.js

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 the 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 "Webcam.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 control, which calls a JavaScript function named takeSnapShot() when clicked. Its a user-defined function.

takeSnapShot = function () { }

Inside the function, I am using the library’s built-in 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

See this page.

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.

← PreviousNext →