Taking Picture from WebCam using Webcam jQuery plugin

WebcamJS is a small standalone JavaScript library for capturing still images from your computer's camera, and delivering them to you as JPEG or PNG. The images can then be displayed in your web page, rendered into a canvas, or submitted to your server.  WebcamJS uses [HTML5 getUserMedia], but provides an automatic and invisible Flash fallback.

WebcamJS is based on my old [JPEGCam] project, but has been redesigned for the modern web.  Instead of relying on Flash and only being able to submit images directly to a server, WebcamJS delivers your images as client-side Data URIs, and it uses HTML5 getUserMedia where available.  Flash is only used if your browser doesn't support getUserMedia, and the fallback is handled automatically.

Implementation:

1. Download webcam.js and put inside your application.download webcam.js click here.

2.include webcam.js in your html  file.

   <script src="webcam.js"></script>

3.configure your cam viewer setting:

   Webcam.set({
        width: 320, // width of cam viewer 

        height: 240, // width of cam viewer

        image_format: 'jpeg', // image format
        jpeg_quality: 90        // image quality

    });

4. Load your cam viewer:

Webcam.attach( '#web_cam' ); // inside script

5. take a picture:

function take_image() {
            // take snapshot and get image data
            var data_uri = Webcam.snap();
           
            // display results in page
            document.getElementById('results').innerHTML =
                '<h2>Here is your image:</h2>' +
                '<img src="'+data_uri+'"/>';
        }

call this take_image function to take picture from your cam.it will take an image and show it into the output's DOM.

 Html for the above example:

--------------------------------------

<div id="results"></div>    

<div id="web_cam" ></div>

<form>
        <input type=button value="Take Photo" onClick="take_image()">

</form>