fixed up mozilla support in both gum demos, also separated out gum.js…

… to make things easier
SuperMelon · Jan 7, 2013 · 0e06c17 · 0e06c17
1 parent 1b0b0f9
commit 0e06c17
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 59 deletions.
diff --git a/demos/gum-canvas.html b/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,32 +85,13 @@
   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);
-  }
-}
-
+// 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();
 });
 
@@ -148,10 +129,9 @@
 var article = video.parentNode,
     gum = document.getElementById('gum');
 
-if (navigator.getUserMedia || navigator.webkitGetUserMedia) {
+if (navigator.getUserMedia) {
   article.removeChild(gum);
   article.className = 'supported';
-  init();
 }
 
 </script>

diff --git a/demos/gum.html b/demos/gum.html
@@ -28,40 +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 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) {
-    navigator.getUserMedia({video: true }, successCallback, errorCallback);
-  }
-}
-
-if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
+if (navigator.getUserMedia) {
   article.removeChild(gum);
   article.className = 'supported';
-  init();
 }
 </script>
diff --git a/js/gum.js 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();