-
-
Save miketaylr/f2ac64ed7fc467ccdfe3 to your computer and use it in GitHub Desktop.
<!DOCTYPE html> | |
<video id="video" autoplay> | |
<source type="video/webm" src="http://miketaylr.com/misc/dontstop.webm"> | |
//real demo should have real source elements | |
//for all your favorite codec flavors | |
</video> | |
<script> | |
//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(){}; | |
root.appendChild(el); | |
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 | |
root.removeChild(el); | |
el = null; | |
} | |
return {string: string, object: object} | |
})(window), | |
//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) { | |
stringOptions.push(o); | |
} | |
} | |
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() { | |
//doSomethingUsefulHere() | |
}, | |
video = document.getElementById('video'); | |
if (navigator.getUserMedia) { | |
navigator.getUserMedia(norm({video: true, audio: true}), hollaback, errback); | |
} | |
</script> |
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:
navigator.webkitGetUserMedia(
{audio : true, video : true, toString : function(){return "video,audio";}},
onSuccess,
onError
);
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;
video.play();
} else {
video.src = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(stream) : stream;
}
},
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?