From 27eb28eaa25467a3df0510c182cb3a3e2d74d5d0 Mon Sep 17 00:00:00 2001 From: Hanno Schlichting Date: Wed, 18 Jul 2012 09:14:54 +0300 Subject: [PATCH 1/5] Add mozGetUserMedia support, as available in latest Firefox Nightly builds --- demos/gum.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/gum.html b/demos/gum.html index ce1594e..c0feca2 100644 --- a/demos/gum.html +++ b/demos/gum.html @@ -31,7 +31,7 @@ var video = document.getElementById('video'), gum = document.getElementById('gum'); function init() { - navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; + 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('video', successCallback, errorCallback); @@ -52,7 +52,7 @@ function init() { } } -if (navigator.getUserMedia || navigator.webkitGetUserMedia) { +if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { article.removeChild(gum); article.className = 'supported'; init(); From 11b883cde1f7227ce26ad200f59c64691ebb6c77 Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Tue, 11 Dec 2012 20:08:43 +0000 Subject: [PATCH 2/5] add support table for firefox, will push to master once support comes back in --- demos.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demos.json b/demos.json index 2a5c47e..7b48830 100644 --- a/demos.json +++ b/demos.json @@ -5,7 +5,7 @@ "tags": "getUserMedia canvas", "support": { "live": "opera", - "nightly": "chrome" + "nightly": "chrome firefox" }, "test": "navigator.getUserMedia !== undefined" }, @@ -15,7 +15,7 @@ "tags": "getUserMedia", "support": { "live": "opera", - "nightly": "chrome" + "nightly": "chrome firefox" }, "test": "navigator.getUserMedia !== undefined" }, From c66d23be421bae91c47cb053136ca6c335f8e999 Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Tue, 11 Dec 2012 20:41:49 +0000 Subject: [PATCH 3/5] look for mozSrcObj - but still does not work for me... --- demos/gum.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/demos/gum.html b/demos/gum.html index 2e98c29..ecc680d 100644 --- a/demos/gum.html +++ b/demos/gum.html @@ -41,7 +41,9 @@ function init() { navigator.getUserMedia({video: true, audio: true }, successCallback, errorCallback); function successCallback(stream) { window.stream = stream; - if (window.webkitURL) { + 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 { @@ -60,4 +62,4 @@ if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUs article.className = 'supported'; init(); } - \ No newline at end of file + From 1b0b0f9c23f11c186046fe13c1b40da5cebc0eed Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Mon, 7 Jan 2013 23:38:49 +0000 Subject: [PATCH 4/5] made success & error global to allow firefox to find them, also remove audio support as Firefox borks altogether --- demos/gum-canvas.html | 26 ++++++++++++++------------ demos/gum.html | 40 +++++++++++++++++++++------------------- 2 files changed, 35 insertions(+), 31 deletions(-) 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); } } From 0e06c17460717c3f1aa2a344fd8b17dc15afc6c7 Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Mon, 7 Jan 2013 23:59:28 +0000 Subject: [PATCH 5/5] fixed up mozilla support in both gum demos, also separated out gum.js to make things easier --- demos/gum-canvas.html | 38 +++++++++----------------------------- demos/gum.html | 33 +++------------------------------ js/gum.js | 27 +++++++++++++++++++++++++++ 3 files changed, 39 insertions(+), 59 deletions(-) create mode 100644 js/gum.js diff --git a/demos/gum-canvas.html b/demos/gum-canvas.html index c61443e..3858587 100644 --- a/demos/gum-canvas.html +++ b/demos/gum-canvas.html @@ -31,9 +31,9 @@

getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.

+ diff --git a/demos/gum.html b/demos/gum.html index 77dd1f4..daf406a 100644 --- a/demos/gum.html +++ b/demos/gum.html @@ -28,40 +28,13 @@

getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.

+ diff --git a/js/gum.js b/js/gum.js new file mode 100644 index 0000000..eebe3a1 --- /dev/null +++ b/js/gum.js @@ -0,0 +1,27 @@ +var video = document.querySelector('video'); + +function gumSuccess(stream) { + // window.stream = stream; + if ('mozSrcObject' in video) { + video.mozSrcObject = stream; + } else if (window.webkitURL) { + video.src = window.webkitURL.createObjectURL(stream); + } else { + video.src = stream; + } + video.play(); +} + +function gumError(error) { + console.error('Error on getUserMedia', error); +} + +function gumInit() { + navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; + + if (navigator.getUserMedia) { + navigator.getUserMedia({video: true }, gumSuccess, gumError); + } +} + +gumInit(); \ No newline at end of file