JavaScript | Quick and easy how to take a picture from webcam using JavaScript with following below steps:
Step 1:
Include webcam.min.js
in the page where you want to use it and easy to make changes and set according to your design.
Step 2:
Configure below init code.
Webcam.set({ width: 320, height: 240, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach( '#my_camera' );
snap
function to used to take picture from webcam.
Webcam.snap( function(data_uri) { // display results in page document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>'; });
Step 3:
Complete code in one shot as below.
<style> #my_camera{ width: 320px; height: 240px; border: 1px solid black; } </style>
<div id="my_camera"></div> <input type=button value="Take Picture" onClick="take_snapshot()">
<div id="results" ></div>
<script type="text/javascript" src="webcamjs/webcam.min.js"></script>
<script language="JavaScript"> Webcam.set({ width: 320, height: 240, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach( '#my_camera' ); function take_snapshot() { Webcam.snap( function(data_uri) { document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>'; }); } </script>
Step 4:
Adding Sound while taking a picture from webcam use Audio()
Object and play()
function code as below.
<style> #my_camera{ width: 320px; height: 240px; border: 1px solid black; } </style> <div id="my_camera"></div> <input type=button value="Take Snapshot" onClick="take_snapshot()"> <div id="results" ></div> <script type="text/javascript" src="webcamjs/webcam.min.js"></script> <script language="JavaScript"> Webcam.set({ width: 320, height: 240, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach( '#my_camera' ); // preload shutter audio clip var shutter = new Audio(); shutter.autoplay = true; shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3'; function take_snapshot() { // play sound effect shutter.play(); Webcam.snap( function(data_uri) { // display results in page document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>'; }); } </script>
Step 5:
Use this function Webcam.upload()
to upload and save image into database code as below.
Webcam.upload( base64image, 'upload.php', function(code, text) { // response here. });
<?php // new filename $filename = 'pic_'.date('YmdHis') . '.jpeg'; $url = ''; if( move_uploaded_file($_FILES['webcam']['tmp_name'],'upload/'.$filename) ){ $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/fileupload/' . $filename; } // Return image url echo $url; ?>
Download complete code from GitHub.
Any query? Please share your thoughts in the comments below. Glad to help you!
Thanks!
Was this page helpful? Do not forget to share this post!