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
[pastacode manual=”%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fwebcamjs%2F1.0.25%2Fwebcam.min.js%22%3E%3C%2Fscript%3E” provider=”manual” lang=”default”/]
Configure a few settings and attach the camera
[pastacode manual=”%3Cscript%20language%3D%22JavaScript%22%3E%0D%0AWebcam.set(%7B%0D%0Awidth%3A%20520%2C%0D%0Aheight%3A%20400%2C%0D%0Aimage_format%3A%20’jpeg’%2C%0D%0Ajpeg_quality%3A%20120%0D%0A%7D)%3B%0D%0AWebcam.attach(%20’%23my_camera’%20)%3B%0D%0Afunction%20take_snapshot()%20%7B%0D%0AWebcam.snap(%20function(data_uri)%20%7B%0D%0A%24(%22.image-tag%22).val(data_uri)%3B%0D%0Adocument.getElementById(‘results’).innerHTML%20%3D%20’%3Cimg%20src%3D%22’%2Bdata_uri%2B’%22%2F%3E’%3B%0D%0A%7D)%3B%0D%0A%7D%0D%0A%3C%2Fscript%3E” provider=”manual” lang=”javascript”/]
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:
[pastacode manual=”%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%3E%0D%0A%3Chead%3E%0D%0A%20%20%3Ctitle%3ETake%20Image%20Snapshot%20from%20webcam%20with%20Jquery%20and%20PHP%20-%20Fulltotech.com%3C%2Ftitle%3E%0D%0A%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Ftwitter-bootstrap%2F4.1.3%2Fcss%2Fbootstrap.min.css%22%20%2F%3E%0D%0A%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0A%20%20%20%20%23results%20%7B%20padding%3A10px%3B%20border%3A1px%20solid%3B%20background%3A%23ccc%3B%20%7D%0D%0A%20%20%3C%2Fstyle%3E%0D%0A%3C%2Fhead%3E%0D%0A%3Cbody%3E%0D%0A%20%3Cdiv%20class%3D%22container%22%3E%0D%0A%20%20%20%3Ch1%20class%3D%22text-center%22%3E%0D%0A%20%20%20%20%20Take%20Image%20Snapshot%20from%20webcam%20with%20Jquery%20and%20PHP%0D%0A%20%20%20%3C%2Fh1%3E%0D%0A%20%20%20%3Cdiv%20class%3D%22row%22%3E%0D%0A%20%20%20%20%20%3Cdiv%20class%3D%22col-md-6%20col-xs-12%22%3E%0D%0A%20%20%20%20%20%20%20%3Cdiv%20id%3D%22my_camera%22%3E%3C%2Fdiv%3E%3Cbr%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3Dbutton%20value%3D%22Take%20Snapshot%22%20class%3D%22btn%20btn-primary%20pull-right%22%20onClick%3D%22take_snapshot()%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22image%22%20class%3D%22image-tag%22%3E%0D%0A%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%3Cdiv%20class%3D%22col-md-6%20col-xs-12%22%3E%0D%0A%20%20%20%20%20%20%20%3Cdiv%20id%3D%22results%22%3E%0D%0A%20%20%20%20%20%20%20%20%20Your%20captured%20image%20will%20appear%20here…%0D%0A%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%3C%2Fdiv%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”default”/]
Complete Source Code (index.html):

You have to just create one file as like below and you will get layout like as above:
[pastacode manual=”%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%3E%0D%0A%3Chead%3E%0D%0A%20%20%3Ctitle%3ETake%20Image%20Snapshot%20from%20webcam%20with%20Jquery%20and%20PHP%20-%20Fulltotech.com%3C%2Ftitle%3E%0D%0A%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Ftwitter-bootstrap%2F4.1.3%2Fcss%2Fbootstrap.min.css%22%20%2F%3E%0D%0A%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjquery%2F3.3.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0D%0A%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fwebcamjs%2F1.0.25%2Fwebcam.min.js%22%3E%3C%2Fscript%3E%0D%0A%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0A%20%20%20%20%23results%20%7B%20padding%3A10px%3B%20border%3A1px%20solid%3B%20background%3A%23ccc%3B%20%7D%0D%0A%20%20%3C%2Fstyle%3E%0D%0A%3C%2Fhead%3E%0D%0A%3Cbody%3E%0D%0A%20%3Cdiv%20class%3D%22container%22%3E%0D%0A%20%20%20%3Ch1%20class%3D%22text-center%22%3E%0D%0A%20%20%20%20%20Take%20Image%20Snapshot%20from%20webcam%20with%20Jquery%20and%20PHP%0D%0A%20%20%20%3C%2Fh1%3E%0D%0A%20%20%20%3Cdiv%20class%3D%22row%22%3E%0D%0A%20%20%20%20%20%3Cdiv%20class%3D%22col-md-6%20col-xs-12%22%3E%0D%0A%20%20%20%20%20%20%20%3Cdiv%20id%3D%22my_camera%22%3E%3C%2Fdiv%3E%3Cbr%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3Dbutton%20value%3D%22Take%20Snapshot%22%20class%3D%22btn%20btn-primary%20pull-right%22%20onClick%3D%22take_snapshot()%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22image%22%20class%3D%22image-tag%22%3E%0D%0A%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%3Cdiv%20class%3D%22col-md-6%20col-xs-12%22%3E%0D%0A%20%20%20%20%20%20%20%3Cdiv%20id%3D%22results%22%3E%0D%0A%20%20%20%20%20%20%20%20%20Your%20captured%20image%20will%20appear%20here…%0D%0A%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%3C%2Fdiv%3E%0D%0A%3Cscript%20language%3D%22JavaScript%22%3E%0D%0AWebcam.set(%7B%0D%0Awidth%3A%20520%2C%0D%0Aheight%3A%20400%2C%0D%0Aimage_format%3A%20’jpeg’%2C%0D%0Ajpeg_quality%3A%20120%0D%0A%7D)%3B%0D%0AWebcam.attach(%20’%23my_camera’%20)%3B%0D%0Afunction%20take_snapshot()%20%7B%0D%0AWebcam.snap(%20function(data_uri)%20%7B%0D%0A%24(%22.image-tag%22).val(data_uri)%3B%0D%0Adocument.getElementById(‘results’).innerHTML%20%3D%20’%3Cimg%20src%3D%22’%2Bdata_uri%2B’%22%2F%3E’%3B%0D%0A%7D)%3B%0D%0A%7D%0D%0A%3C%2Fscript%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”default”/]