Create a gist now

Instantly share code, notes, and snippets.

@miketaylr /demo.html Secret
Created Jan 30, 2012

What would you like to do?
Normalizing getUserMedia between Opera's and Chrome's implementation. Neither of which are 100% spec complaint.
<!DOCTYPE html>
<video id="video" autoplay>
<source type="video/webm" src="">
//real demo should have real source elements
//for all your favorite codec flavors
//normalize window.URL
window.URL || (window.URL = window.webkitURL || window.msURL || window.oURL);
//normalize navigator.getUserMedia
navigator.getUserMedia || (navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
//detect if {video: true} or "video" style options
//by creating an iframe and blowing it up
//style jacked from @kangax
var optionStyle = (function(win){
//only test if there's something to test
if (!navigator.getUserMedia) return;
var el = document.createElement('iframe'),
root = document.body || document.documentElement,
string = true, object = true, nop = function(){};
var f = win.frames[win.frames.length-1];
f.navigator.getUserMedia || (f.navigator.getUserMedia = f.navigator.webkitGetUserMedia || f.navigator.mozGetuserMedia || f.navigator.msGetUserMedia);
try { //try it with spec syntax
f.navigator.getUserMedia({video: true}, nop);
} catch (e) {
object = false;
try { //try it with old spec string syntax
f.navigator.getUserMedia("video", nop);
} catch (e) { //neither is supported
string = false;
} finally { //clean up
el = null;
return {string: string, object: object}
//normalize the options object to a string
//if that's the only thing supported
norm = function(opts){ // has to be {video: false, audio: true}. caveat emptor.
var stringOptions = [];
if (optionStyle.string && !optionStyle.object) {
//pluck the "true"s
for (var o in opts) {
if (opts[o] == true) {
return stringOptions.join(" ");
} else {
//really, this will blow up if you pass it {video: true, rofl: "copter"}. so don't.
return opts;
hollaback = function(stream) {
video.src = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(stream) : stream;
errback = function() {
video = document.getElementById('video');
if (navigator.getUserMedia) {
navigator.getUserMedia(norm({video: true, audio: true}), hollaback, errback);

miketaylr commented Jan 30, 2012

By line number:

9: reference any prefixed window.URL object as window.URL to make our lives nicer. Note there's no mozURL because it doesn't exist, AFAIK.

12: do the same for navigator.getUserMedia

17: optionsStyle is an immediately invoked function expression (IIFE) that does sort of a feature test. Basically it creates some iframes and tries to use getUserMedia with the new object ({video: true, audio: false}) syntax. Then it tries with the old string ("video audio") syntax. Failing that, it throws a NoDiceError.

42: optionsStyle returns an object that looks like this: {string: true, object: false}.

47: norm is a helper function to normalize the spec object syntax into whatever the UA can handle, based on what gets returned from optionsStyle. In a nutshell, it takes the object argument, looks for the trues and makes a string out of those--if the string, but not the object, syntax is supported.

66: if window.URL.createObjectURL exists, pass it a stream and set the src of the video. Otherwise, set the raw stream to the video src.

76: navigator.getUserMedia(norm({video: true, audio: true}), hollaback, errback); this is how you use it. MAGICK™.


miketaylr commented Jan 31, 2012

Removed throwing the error and added an early bail from the optionsStyle IIFE. Less nice, but less errors thrown in production. ;)

Suggest we call it "gUM shield" ?


miketaylr commented Feb 2, 2012


rwaldron commented Mar 9, 2012

A similar effort, inspired by gUM Shield

Fantastic – thanks!

One minor point...

With the changes to getUserMedia() in Chrome Canary a few days ago, permission is now requested when getUserMedia() is called.

This means that with guMShield, permission is requested twice: once in the try block, and once when navigator.getUserMedia() is called.

Maybe the code could be restructured just to use the try block?


miketaylr commented May 16, 2012

Ack, just deleted my comment. >_<

I think @paulirish mentioned to me that Chrome Canary added support for the spec syntax--so I wonder if we can get away without using this at all...

If not, yeah this should be fixed.

mr @agektmr found a clever trick for handling both init cases (object and string), that's worth considering:

  {audio : true, video : true, toString : function(){return "video,audio";}},

say2joe commented May 30, 2012

I'm going to be implementing "native" audio recording soon using no plugins (strictly HTML5 API / extensions). I'd love to see more comments here and activity -- I'll contribute when I have something. As far as the context of this thread goes... Paul and Mike, please post any resources you have that are related since this topic is still evolving. Thank you Mike for creating this page!

@say2joe I believe getUserMedia + Web Audio API can achieve this

window.URL.createObjectURL(stream) chokes on Firefox 18... looks like this works:

  hollaback = function(stream) {
    if (navigator.mozGetUserMedia) {
      // HACK for ff
      video.mozSrcObject = stream;;
    } else {
      video.src = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(stream) : stream;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment