diff --git a/demos/gum-canvas.html b/demos/gum-canvas.html index f02559d..c61443e 100644 --- a/demos/gum-canvas.html +++ b/demos/gum-canvas.html @@ -85,24 +85,26 @@ slider.oninput = slider.onchange = function () { tb = rgb[2]; }; +function successCallback(stream) { + window.stream = stream; + if (window.webkitURL) { + video.src = window.webkitURL.createObjectURL(stream); + } else { + video.src = stream; + } + video.play(); +} + +function errorCallback(error) { + console.error('An error occurred: [CODE ' + error.code + ']'); + return; +} function init() { // from HTML5 Doctor article: http://html5doctor.com/getusermedia/ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({ video: true }, successCallback, errorCallback); - function successCallback(stream) { - window.stream = stream; - if (window.webkitURL) { - video.src = window.webkitURL.createObjectURL(stream); - } else { - video.src = stream; - } - } - function errorCallback(error) { - console.error('An error occurred: [CODE ' + error.code + ']'); - return; - } } } diff --git a/demos/gum.html b/demos/gum.html index ecc680d..77dd1f4 100644 --- a/demos/gum.html +++ b/demos/gum.html @@ -7,6 +7,7 @@ .supported video, .supported audio { + width: 100%; /* I'm using CSS3 to translate the video on the X axis to give it a mirror effect */ -webkit-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg); -o-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg); @@ -32,28 +33,29 @@ var video = document.getElementById('video'), article = video.parentNode, gum = document.getElementById('gum'); +function successCallback(stream) { + window.stream = stream; + if ('mozSrcObject' in video) { + video.mozSrcObject = stream; + } else if (window.webkitURL) { + video.src = window.webkitURL.createObjectURL(stream); + // document.querySelector('audio').src = window.webkitURL.createObjectURL(stream); + } else { + video.src = stream; + } + video.play(); +} + +function errorCallback(error) { + console.error('An error occurred: [CODE ' + error.code + ']', error); + return; +} + function init() { navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; + if (navigator.getUserMedia) { - // NOTE: at time of writing March 26, 2012, audio isn't working in Chrome - // navigator.getUserMedia('audio,video', successCallback, errorCallback); - // Below is the latest syntax. Using the old syntax for the time being for backwards compatibility. - navigator.getUserMedia({video: true, audio: true }, successCallback, errorCallback); - function successCallback(stream) { - window.stream = stream; - if ('mozSrcObject' in video) - video.mozSrcObject = stream; - } else if (window.webkitURL) { - video.src = window.webkitURL.createObjectURL(stream); - // document.querySelector('audio').src = window.webkitURL.createObjectURL(stream); - } else { - video.src = stream; - } - } - function errorCallback(error) { - console.error('An error occurred: [CODE ' + error.code + ']'); - return; - } + navigator.getUserMedia({video: true }, successCallback, errorCallback); } }