How to Take Picture From Webcam in Javascript Using Webcam.js | Webcam Capture in Javascript

SOURCE CODE

First of all you need to make an index.html file and copy paste the following code.

index.html

<!-- CSS -->
<style>
    #my_camera{
        width: 320px;
        height: 240px;
        border: 1px solid black;
    }
    </style>
    
    <!-- -->
    <div id="my_camera"></div>
    <input type=button value="Take Snapshot" onClick="take_snapshot()">
     
    <div id="results" ></div>
     
    <!-- Script -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js"></script>
    
    <!-- Code to handle taking the snapshot and displaying it locally -->
    <script language="JavaScript">
    
     // Configure a few settings and attach camera
     Webcam.set({
         width: 320,
         height: 240,
         image_format: 'jpeg',
         jpeg_quality: 90
     });
     Webcam.attach( '#my_camera' );
    
     // preload shutter audio clip
     var shutter = new Audio();
     shutter.autoplay = true;
     shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
    
    function take_snapshot() {
       // play sound effect
       shutter.play();
    
       // take snapshot and get image data
       Webcam.snap( function(data_uri) {
          // display results in page
          document.getElementById('results').innerHTML = 
              '<img src="'+data_uri+'"/>';
        });
    }
    </script>

<style>

#my_camera{

width: 320px;

height: 240px;

border: 1px solid black;

}

</style>

// Configure a few settings and attach camera

Webcam.set({

width: 320,

height: 240,

image_format: 'jpeg',

jpeg_quality: 90

});

Webcam.attach( '#my_camera' );

// preload shutter audio clip

var shutter = new Audio();

shutter.autoplay = true;

shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';

function take_snapshot() {

// play sound effect

shutter.play();

// take snapshot and get image data

Webcam.snap( function(data_uri) {

// display results in page

document.getElementById('results').innerHTML =

'<img src="'+data_uri+'"/>';

});

}

</script>

As you can see we are including the webcam.js cdn and then we have the simple option to display the live webcam feed of the user webcam and then we have the button to capture the image of the user and then we are displaying the image of the user as shown below