-
-
Save miketaylr/f2ac64ed7fc467ccdfe3 to your computer and use it in GitHub Desktop.
Normalizing getUserMedia between Opera's and Chrome's implementation. Neither of which are 100% spec complaint.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Ha! That's evil, in a nice way :^).
…On May 22, 2012 5:27 PM, "Paul Irish" < ***@***.***> wrote:
mr @agektmr found a clever trick for handling both init cases (object and
string), that's worth considering:
``` js
navigator.webkitGetUserMedia(
{audio : true, video : true, toString : function(){return
"video,audio";}},
onSuccess,
onError
);
```
---
Reply to this email directly or view it on GitHub:
https://gist.github.com/f2ac64ed7fc467ccdfe3
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;
}
},
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
mr @agektmr found a clever trick for handling both init cases (object and string), that's worth considering: