JS Webcam: Capture pictures or video with the webcam

Recommend this page to a friend!
  Info   View files Example   View files View files (4)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   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.


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

Innovation Award
JavaScript Programming Innovation award winner
September 2014

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



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


| 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 |


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  
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  /  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  /  lib  
File Role Description
  Plain text file Webcam.js Class Class source

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