JSWebcam

Join the chat at

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/