-
-
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> |
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
@say2joe I believe getUserMedia + Web Audio API can achieve this