手机摄像头拍照 Cross-browser camera capture with getUserMedia/WebRTC

, three of the major desktop browsers now have the ability to get data from cameras without the use of plugins. As it’s still early days, however, the implementations differ slightly between browsers. Below is an example of how to work around these differences and a script to do the heavy lifting for you, but first, an overview of how the three browsers stack up.

Comparison of getUserMedia behaviour in browsers as of February 2013

	Firefox 18	Opera 12	Chrome 24
Requires vendor prefix	Yes (moz)	No	Yes (webkit)
Triggered with autoplay attribute	No	Yes	Yes
Requires enabling by user	Yes Firing of playing event	Repeatedly	Once	Once
Supports file:// protocol	Yes	Yes	No
Tab playing notification	None	Icon	Animated icon
Permission request	Each page load	First page load only	Each page load

getUserMedia has to be enabled in Firefox by setting the media.peerconnection.enabled option to true in about:config.

There are a few more differences once we start coding so let’s walk through it. Our recipe for getUserMedia success will be broken down into the following easy steps:

3. A helping of HTML5

   Our main task in this short tutorial is just to get a moving image displaying in a page. In that respect, it’s no different to regular video so the first step is a simple <video> element in our HTML:

   <video></video>

   That’s it. No controls, no src, no nothing.

   Over to the JavaScript, and obviously we need to get a reference to the <video> element, which we can do like so (or alternatively with an id):

   var video = document.querySelector('video');

   A dollop of feature detection

   Now it gets interesting as we check for getUserMedia support. We’re definitely not going to use unreliable user agent sniffing for this — no, we’ll do it the easy way by checking for the navigator.getUserMedia object. This is prefixed in Firefox and Chrome so first it’s handy to assign it to a common object for all browsers. While we’re at it, let’s do it for the window.URL object as well which we’ll use later on.

   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

   And next, the actual existence checking:

   if (navigator.getUserMedia) { // Call the getUserMedia method here } else { console.log('Native device media streaming (getUserMedia) not supported in this browser.'); // Display a friendly "sorry" message to the user. }

   If getUserMedia is supported, we need to pass it three arguments — an options object, a success callback function and an error callback function. Note that the error callback is required in Firefox but optional in Opera and Chrome. The options argument is a JSON-style object that specifies whether audio, video or both are to be used. The following example code is for video only:

   navigator.getUserMedia({video: true}, successCallback, errorCallback);

   Dialogs requesting camera access

   
   

   Dialog in Firefox

   
   

   Dialog in Google Chrome

   
   

   Dialog in Opera

   A spoonful of streaming

   So far so good, so let’s define what happens next. The success callback function receives an argument containing the video stream from the camera and we want to send that stream to our <video> element. We do this by setting its src attribute but there are a couple of things to bear in mind:

   • Firefox uses the mozSrcObject attribute whereas Opera and Chrome use src.
   • Chrome uses the createObjectURL method whereas Firefox and Opera send the stream directly.

   With Firefox, video.mozSrcObject is initially null rather than undefined so we can rely on this to detect for Firefox’s support (

   function successCallback(stream) { if (video.mozSrcObject !== undefined) { video.mozSrcObject = stream; } else { video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; }; video.play(); }