Take Image Snapshot from webcam with Jquery and HTML

If you want to take a picture of the user from a webcam 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

Configure a few settings and attach the camera

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.


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:

Complete Source Code (index.html):

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

RESHMA 4th November 2020
please tell me how to save the captured image in system folder without using PHP