JS Webcam: Capture pictures or video with the webcam

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 439 This week: 1All time: 75 This week: 3Up
Version License JavaScript version Categories
js-webcam 1.0.10MIT/X Consortium ...1.5Browser, Video
Description 

Author

This object can capture pictures or video with the webcam.

It can check if the browser can access the webcam, and if so, capture a picture or a stream of video.

Pictures are return as data URLs, so they can be viewed to image elements.

When it is not supported to take pictures, a file input is presented to let the user pick a local file.

Innovation Award
JavaScript Programming Innovation award winner
September 2014
Winner


Prize: One book of choice by Packt
More recent versions of Web browsers provide an API to access Webcams.

This object takes advantage of that API to capture pictures from a Webcam and save it as a string of binary data.

Manuel Lemos
Picture of Elger van Boxtel
Name: Elger van Boxtel <contact>
Classes: 4 packages by
Country: The Netherlands The Netherlands
Age: ???
All time rank: 292 in The Netherlands The Netherlands
Week rank: 2 Up1 in The Netherlands The Netherlands Up
Innovation award
Innovation award
Nominee: 1x

Winner: 1x

Recommendations

Take pictures with a camera
Take a shot and upload to server

Example

document.addEventListener('DOMContentLoaded', function () { document.getElementById('image').style.display = 'none'; document.getElementById('thumb').style.display = 'none'; document.getElementById('video').style.display = 'none'; var webcam = new Webcam('#video'); /** * when pressing the stop button... */ document.getElementById('stop').addEventListener('click', function(e){ e.preventDefault(); webcam.stop(); document.getElementById('image').style.display = 'none'; document.getElementById('thumb').style.display = 'none'; }, false); document.getElementById('start').addEventListener('click', function(e){ e.preventDefault(); if (webcam.isSupported()) { webcam.start({video: true, audio: false}, function(stream) { // success function, video is streaming... document.getElementById('video').style.display = 'block'; }, function(e) { alert('Oops, something went wrong'); }); } else { if (window.navigator.userAgent.match(/Mobi/)){ // mobile browser... webcam.useFallback(true); } else{ alert('API is not supported by your browser'); } } }, false); document.getElementById('picture').addEventListener('click', function(e){ e.preventDefault(); if (webcam.isStarted()){ // now take an picture using the webcam webcam.takePicture(function(pic){ // and assign it to an image document.querySelector('#image').src = pic; document.querySelector('#image').style.display = 'inline'; }); // now take an picture using the webcam and make a square centered thumb webcam.takePicture(function(pic){ document.getElementById('video').style.display = 'none'; // and assign it to an image document.querySelector('#thumb').src = pic; document.querySelector('#thumb').style.display = 'inline'; },function(ctx, canvas){ var min = Math.min(canvas.width,canvas.height); var max = Math.max(canvas.width,canvas.height); canvas.width = min; canvas.height = min; ctx.drawImage(webcam.element(), (max-min)/2, 0, min,min, 0,0,min,min); }); } }, false); document.getElementById('fallback').addEventListener('click', function(e){ // now take an picture using the webcam and make a square centered thumb webcam.fallback(function(pic){ document.getElementById('video').style.display = 'none'; // and assign it to an image document.querySelector('#thumb').src = pic; document.querySelector('#thumb').style.display = 'inline'; },function(ctx, canvas){ var min = Math.min(canvas.width,canvas.height); var max = Math.max(canvas.width,canvas.height); canvas.width = min; canvas.height = min; ctx.drawImage(webcam.element(), (max-min)/2, 0, min,min, 0,0,min,min); }); }, false); });

Details

JSWebcam

Join the chat at Join the chat at https://gitter.im/elgervb/JSWebcam

Make use of the webcam in the browser, using an optional fallback to use the camera of mobile devices or to upload pictures from disc.

Fork me on GitHub https://github.com/elgervb/JSWebcam Example on: http://elgervanboxtel.nl/site/blog/capturing-webcam-with-getusermedia-and-canvas

Methods

| Method | Description | |-------------|-----------------------------------------------------------| | element | Returns the actual video HTMLElement | | fallback | Fallback mechanism to select files. Use this when you want to take pics from a mobile device or upload pictures from disc | | isStarted | Checks whether the webcam is started | | isSupported | Checks whether or not the API is supported by the browser | | start | Enables the webcam, will ask the user to share his webcam | | stop | Stops the Webcam object | | takePicture | Take a still image of the webcam, returns a Blob | | uriToBlob | Takes in a dataUri and transforms it into a Blob | | useFallback | Sets if a fallback mechanism should be in place to select files. Set this to true when you want to take pics from a mobile device or upload pictures from dics |

Usage

var webcam = new Webcam('#video');
if (webcam.isSupported()) {
	webcam.start({video: true, audio: false}, function(stream) {
      // success function, video is streaming...
    }, function(e) {
      alert('Oops, something went wrong');
    });

    // now take an picture using the webcam
    var pic = webcam.takePicture();

    // and assign it to an image
    document.querySelector('#img').src = pic;
}
else {
	alert('API is not supported by your browser');
}

Reading material

  • http://dev.w3.org/2011/webrtc/editor/archives/20140619/getusermedia.html
  • http://dev.w3.org/2009/dap/camera/
  • https://developer.mozilla.org/en-US/docs/NavigatorUserMedia.getUserMedia
  • https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC
  • http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Bitdeli Badge


  Files folder image Files (4)  
File Role Description
Files folder imageexamples (2 files)
Files folder imagelib (1 file)
Accessible without login Plain text file README.md Doc. Auxiliary data

  Files folder image Files (4)  /  examples  
File Role Description
  Accessible without login Plain text file example.html Example Documentation
  Accessible without login Plain text file impl.js Example Example script

  Files folder image Files (4)  /  lib  
File Role Description
  Plain text file Webcam.js Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:439
This week:1
All time:75
This week:3Up