How to take a picture from webcam using JavaScript

JavaScript | Quick and easy how to take a picture from webcam using JavaScript with following below steps:

Step 1:

Include webcam.min.js in the page where you want to use it and easy to make changes and set according to your design.

Step 2:

Configure below init code.

Webcam.set({
  width: 320,
  height: 240,
  image_format: 'jpeg',
  jpeg_quality: 90
});
Webcam.attach( '#my_camera' );

snap function to used to take picture from webcam.

Webcam.snap( function(data_uri) {
  // display results in page
  document.getElementById('results').innerHTML = 
  '<img src="'+data_uri+'"/>';
});

Step 3:

Complete code in one shot as below.

<style>
  #my_camera{
    width: 320px;
    height: 240px;
    border: 1px solid black;
  }
</style>

<div id="my_camera"></div>
<input type=button value="Take Picture" onClick="take_snapshot()">

<div id="results" ></div>

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

<script language="JavaScript">
  Webcam.set({
    width: 320,
    height: 240,
    image_format: 'jpeg',
    jpeg_quality: 90
  });
  Webcam.attach( '#my_camera' );

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

Step 4:

Adding Sound while taking a picture from webcam use Audio() Object and play() function code as below.

<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 type="text/javascript" src="webcamjs/webcam.min.js"></script>

<script language="JavaScript">
  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();

    Webcam.snap( function(data_uri) {
      // display results in page
      document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
    });
  }
</script>

Step 5:

Use this function Webcam.upload() to upload and save image into database code as below.

Webcam.upload( base64image, 'upload.php', function(code, text) {
  // response here.
});

<?php
// new filename
$filename = 'pic_'.date('YmdHis') . '.jpeg';

$url = '';
if( move_uploaded_file($_FILES['webcam']['tmp_name'],'upload/'.$filename) ){
  $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/fileupload/' . $filename;
}

// Return image url
echo $url;
?>

Download complete code from GitHub.

Any query? Please share your thoughts in the comments below. Glad to help you!
Thanks!

Was this page helpful? Do not forget to share this post!