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> Share this:Click to share on Twitter (Opens in new window)Click to share on Facebook (Opens in new window)Click to print (Opens in new window)Click to share on LinkedIn (Opens in new window)Click to share on Telegram (Opens in new window)Click to share on WhatsApp (Opens in new window)Like this:Like Loading... Post navigation Learn How to Use jQuery to Identify the Selected Radio Button Open Footer Responsive Full-Screen Footer