Take Image Snapshot from webcam with Jquery and HTML

If you want to take image snapshot from webcam with Jquery and HTML then you can use javascript webcam library for capture image from the camera.

In this tutorial, I will show you how to implement webcam image capture and view image using HTML and Jquery.

We will use webcamjs 1.0.25 library to take image snapshots.

Copy this js import to Html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>

Configure a few settings and attach the camera

<script language="JavaScript">
Webcam.set({
width: 520,
height: 400,
image_format: 'jpeg',
jpeg_quality: 120
});
Webcam.attach( '#my_camera' );
function take_snapshot() {
Webcam.snap( function(data_uri) {
$(".image-tag").val(data_uri);
document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
});
}
</script>

In the above script webcam.set() function contains many options such as width, height, image_format, jpeg_quality. Change it according to your need.

Then we call attach function and attach the image.

After then we create a function take_snapshot and inside the function, we call snap function and pass the parameter data_uri and display the image in the image box.

$(“.image-tag”).val(data_uri); this line will assign a value of image in input with class image-tag.

document.getElementById(‘results’).innerHTML = ‘<img src=”‘+data_uri+'”/>’; this line will display the snapshot image in results container box.

Preview:

In this tutorial, we will create an index.html file and show you the layout of your webcam with “Take Snapshot” button, when you will click on that button js library will capture an image on a base64 string.

HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>Take Image Snapshot from webcam with Jquery and PHP - Fulltotech.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <style type="text/css">
    #results { padding:10px; border:1px solid; background:#ccc; }
  </style>
</head>
<body>
 <div class="container">
   <h1 class="text-center">
     Take Image Snapshot from webcam with Jquery and PHP
   </h1>
   <div class="row">
     <div class="col-md-6 col-xs-12">
       <div id="my_camera"></div><br/>
          <input type=button value="Take Snapshot" class="btn btn-primary pull-right" onClick="take_snapshot()">
          <input type="hidden" name="image" class="image-tag">
       </div>
     <div class="col-md-6 col-xs-12">
       <div id="results">
         Your captured image will appear here...
       </div>
     </div>
   </div>
  </div>
</body>
</html>

Complete Source Code (index.html):

You have to just create one file as like below and you will get layout like as above:

<!DOCTYPE html>
<html>
<head>
  <title>Take Image Snapshot from webcam with Jquery and PHP - Fulltotech.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
  <style type="text/css">
    #results { padding:10px; border:1px solid; background:#ccc; }
  </style>
</head>
<body>
 <div class="container">
   <h1 class="text-center">
     Take Image Snapshot from webcam with Jquery and PHP
   </h1>
   <div class="row">
     <div class="col-md-6 col-xs-12">
       <div id="my_camera"></div><br/>
          <input type=button value="Take Snapshot" class="btn btn-primary pull-right" onClick="take_snapshot()">
          <input type="hidden" name="image" class="image-tag">
       </div>
     <div class="col-md-6 col-xs-12">
       <div id="results">
         Your captured image will appear here...
       </div>
     </div>
   </div>
  </div>
<script language="JavaScript">
Webcam.set({
width: 520,
height: 400,
image_format: 'jpeg',
jpeg_quality: 120
});
Webcam.attach( '#my_camera' );
function take_snapshot() {
Webcam.snap( function(data_uri) {
$(".image-tag").val(data_uri);
document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
});
}
</script>
</body>
</html>