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:

Take Image Snapshot from webcam with Jquery and HTML

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”/]

3 thoughts on “Take Image Snapshot from webcam with Jquery and HTML”
    1. use the POST method to save the image to the database. And then use move_uploaded_file() to save the image to the path.

  1. great submit, very informative. I ponder why the other specialists of
    this sector do not realize this. You should proceed your writing.

    I’m sure, you have a great readers’ base already!

Leave a Reply

Your email address will not be published. Required fields are marked *