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>

   

Using FlashLight plugin in Phonegap Applications

Flashlight works with PhoneGap applications,Compatible with PhoneGap 3.0.0 and up. You can implement the plugin with these simple steps.

1. Installation:
  a. Download phonegap flashlight plugin here.
  b. place FlashLight.js inside your application's www/js/plugin folder.
  c. Add the following xml to your config.xml to always use the latest version of  this plugin:

  <gap:plugin name="nl.x-services.plugins.flashlight" />

  or to use this exact version:

  <gap:plugin name="nl.x-services.plugins.slashlight" version="1.0" />

 d. Reference the JavaScript code in your index.html:

 <script src="js/plugins/Flashlight.js"></script>

Note: keep it mind that FlashLight plugin must be referenced after phonegap in your index.html file.

2. Usage:
use these scripts to handle FlashLight events.

 window.plugins.flashlight.switchOn(); // to on flashlight.
 window.plugins.flashlight.switchOff(); // to off flashlight.

As an alternative to switchOn and switchOff, you can use the toggle function

window.plugins.flashlight.toggle();