Merge branch 'hannosch-patch-1'

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"
   },

demos/gum-canvas.html

@@ -31,9 +31,9 @@
   <canvas id="source"></canvas>
   <p id="gum">getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.</p>
 </article>
+<script src="/js/gum.js"></script>
 <script>
-var video = document.querySelector('video'),
-    source = document.getElementById('source').getContext('2d'),
+var source = document.getElementById('source').getContext('2d'),
     output = source, //document.getElementById('output').getContext('2d'),
     slider = document.getElementById('hue'),
     target = document.getElementById('target'),
@@ -85,30 +85,13 @@ slider.oninput = slider.onchange = function () {
   tb = rgb[2];
 };
 
-
-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;
-    }
-  }
-}
-
+// note: video is defined in gum.js
 video.addEventListener('loadedmetadata', function () {
-  source.canvas.width = video.videoWidth;
-  source.canvas.height = video.videoHeight;
+  // due to bug in Chrome: http://crbug.com/168700
+  if (video.videoWidth) {
+    source.canvas.width = video.videoWidth;
+    source.canvas.height = video.videoHeight;
+  }
   draw();
 });
 
@@ -146,10 +129,9 @@ window.requestAnimFrame = (function(){
 var article = video.parentNode,
     gum = document.getElementById('gum');
 
-if (navigator.getUserMedia || navigator.webkitGetUserMedia) {
+if (navigator.getUserMedia) {
   article.removeChild(gum);
   article.className = 'supported';
-  init();
 }
 
 </script>

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); 
@@ -27,37 +28,13 @@
   </video>
   <p id="gum">getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.</p>
 </article>
+<script src="/js/gum.js"></script>
 <script>
-var video = document.getElementById('video'),
-    article = video.parentNode,
+var article = video.parentNode,
     gum = document.getElementById('gum');
 
-function init() {
-  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
-  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 (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;
-    }
-  }
-}
-
-if (navigator.getUserMedia || navigator.webkitGetUserMedia) {
+if (navigator.getUserMedia) {
   article.removeChild(gum);
   article.className = 'supported';
-  init();
 }
-</script>
+</script>

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();