Merge pull request #517 from fippo/harmonize-demos

make gum demos use adapter.js and attachMediaStream

index.html

@@ -55,7 +55,7 @@ <h1>WebRTC samples</h1>
 
       <p>This is a repository for the WebRTC Javascript code samples. The source for these samples is available at <a href="//github.com/webrtc/samples" title="View GitHub repository for these files">github.com/webrtc/samples</a>.</p>
 
-      <p>Some of the samples use new browser features. They may only work in <a href="//www.google.com/chrome/browser/canary.html" title="Download Chrome Canary">Chrome Canary</a> and/or <a href="http://www.mozilla.org/firefox/beta/" title="Download Firefox Beta">Firefox Beta</a>, and may require flags to be set.</p>
+      <p>Some of the samples use new browser features. They may only work in <a href="//www.google.com/chrome/browser/canary.html" title="Download Chrome Canary">Chrome Canary</a>, <a href="http://www.mozilla.org/firefox/beta/" title="Download Firefox Beta">Firefox Beta</a> or Microsoft Edge (available with Windows 10), and may require flags to be set.</p>
 
       <p>Most of the samples use <a href="//github.com/webrtc/adapter">adapter.js</a>, a shim to insulate apps from spec changes and prefix differences. (In fact, the standards and protocols used for WebRTC implementations are highly stable, and there are only a few prefixed names. For full interop information, see <a href="//www.webrtc.org/web-apis/interop">webrtc.org/web-apis/interop</a>.)</p>
 

src/content/getusermedia/audio/index.html

@@ -34,7 +34,7 @@
 
     <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>getUserMedia, audio only</span></h1>
 
-    <audio controls autoplay></audio>
+    <audio id="gum-local" controls autoplay></audio>
 
     <p>Render the audio stream from an audio-only <code>getUserMedia()</code> call with an audio element.</p>
 
@@ -44,6 +44,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
 
   </div>
 
+  <script src="../../../js/adapter.js"></script>
   <script src="js/main.js"></script>
 
   <script src="../../../js/lib/ga.js"></script>

src/content/getusermedia/audio/js/main.js

@@ -9,30 +9,21 @@
 'use strict';
 
 // Put variables in global scope to make them available to the browser console.
-var audio = window.audio = document.querySelector('audio');
+var audio = document.querySelector('audio');
 var constraints = window.constraints = {
   audio: true,
   video: false
 };
-navigator.getUserMedia = navigator.getUserMedia ||
-    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 
 function successCallback(stream) {
-  var videoTracks = stream.getVideoTracks();
   var audioTracks = stream.getAudioTracks();
-  if (audioTracks.length === 1 && videoTracks.length === 0) {
-    console.log('Got stream with constraints:', constraints);
-    console.log('Using audio device: ' + audioTracks[0].label);
-    stream.onended = function() {
-      console.log('Stream ended');
-    };
-  }
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using audio device: ' + audioTracks[0].label);
+  stream.onended = function() {
+    console.log('Stream ended');
+  };
   window.stream = stream; // make variable available to browser console
-  if (window.URL) {
-    audio.src = window.URL.createObjectURL(stream);
-  } else {
-    audio.src = stream;
-  }
+  attachMediaStream(audio, stream);
 }
 
 function errorCallback(error) {

src/content/getusermedia/canvas/index.html

@@ -46,6 +46,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
 
   </div>
 
+  <script src="../../../js/adapter.js"></script>
   <script src="js/main.js"></script>
   <script src="../../../js/lib/ga.js"></script>
 

src/content/getusermedia/canvas/js/main.js

@@ -22,21 +22,14 @@ button.onclick = function() {
     drawImage(video, 0, 0, canvas.width, canvas.height);
 };
 
-navigator.getUserMedia = navigator.getUserMedia ||
-    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-
 var constraints = {
   audio: false,
   video: true
 };
 
 function successCallback(stream) {
   window.stream = stream; // make stream available to browser console
-  if (window.URL) {
-    video.src = window.URL.createObjectURL(stream);
-  } else {
-    video.src = stream;
-  }
+  attachMediaStream(video, stream);
 }
 
 function errorCallback(error) {

src/content/getusermedia/filter/index.html

@@ -66,6 +66,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
     <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/filter" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
   </div>
 
+  <script src="../../../js/adapter.js"></script>
   <script src="js/main.js"></script>
 
   <script src="../../../js/lib/ga.js"></script>

src/content/getusermedia/filter/js/main.js

@@ -30,21 +30,14 @@ filterButton.onclick = function() {
   canvas.className = filters[newIndex];
 };
 
-navigator.getUserMedia = navigator.getUserMedia ||
-    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-
 var constraints = {
   audio: false,
   video: true
 };
 
 function successCallback(stream) {
   window.stream = stream; // make stream available to browser console
-  if (window.URL) {
-    video.src = window.URL.createObjectURL(stream);
-  } else {
-    video.src = stream;
-  }
+  attachMediaStream(video, stream);
 }
 
 function errorCallback(error) {

src/content/getusermedia/gum/index.html

@@ -43,6 +43,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
     <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/gum" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
   </div>
 
+  <script src="../../../js/adapter.js"></script>
   <script src="js/main.js"></script>
 
   <script src="../../../js/lib/ga.js"></script>

src/content/getusermedia/gum/js/main.js

@@ -8,23 +8,22 @@
 
 'use strict';
 
-// variables in global scope so available to console
+// Put variables in global scope to make them available to the browser console.
 var video = document.querySelector('video');
-var constraints = {
+var constraints = window.constraints = {
   audio: false,
   video: true
 };
 
-navigator.getUserMedia = navigator.getUserMedia ||
-    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-
 function successCallback(stream) {
-  window.stream = stream; // stream available to console
-  if (window.URL) {
-    video.src = window.URL.createObjectURL(stream);
-  } else {
-    video.src = stream;
-  }
+  var videoTracks = stream.getVideoTracks();
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using video device: ' + videoTracks[0].label);
+  stream.onended = function() {
+    console.log('Stream ended');
+  };
+  window.stream = stream; // make variable available to browser console
+  attachMediaStream(video, stream);
 }
 
 function errorCallback(error) {

src/content/getusermedia/resolution/js/main.js

@@ -71,7 +71,8 @@ video.onloadedmetadata = displayVideoDimensions;
 function getMedia(constraints) {
   if (stream) {
     video.src = null;
-    stream.stop();
+    stream.getAudioTracks().forEach(function(track) { track.stop(); });
+    stream.getVideoTracks().forEach(function(track) { track.stop(); });
   }
   setTimeout(function() {
     navigator.getUserMedia(constraints, successCallback, errorCallback);

src/content/getusermedia/source/js/main.js

@@ -50,7 +50,8 @@ function errorCallback(error) {
 function start() {
   if (window.stream) {
     videoElement.src = null;
-    window.stream.stop();
+    window.stream.getAudioTracks().forEach(function(track) { track.stop(); });
+    window.stream.getVideoTracks().forEach(function(track) { track.stop(); });
   }
   var audioSource = audioSelect.value;
   var videoSource = videoSelect.value;

src/content/getusermedia/volume/index.html

@@ -64,6 +64,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
   </div>
 
 
+  <script src="../../../js/adapter.js"></script>
   <script src="js/soundmeter.js"></script>
   <script src="js/main.js"></script>
 

src/content/getusermedia/volume/js/main.js

@@ -31,9 +31,6 @@ var constraints = window.constraints = {
   video: false
 };
 
-navigator.getUserMedia = navigator.getUserMedia ||
-    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-
 function successCallback(stream) {
   // Put variables in global scope to make them available to the browser console.
   window.stream = stream;

src/js/adapter.js

@@ -129,7 +129,10 @@ if (navigator.mozGetUserMedia) {
 
   // Shim for mediaDevices on older versions.
   if (!navigator.mediaDevices) {
-    navigator.mediaDevices = {getUserMedia: requestUserMedia};
+    navigator.mediaDevices = {getUserMedia: requestUserMedia,
+      addEventListener: function() { },
+      removeEventListener: function() { }
+    };
   }
   navigator.mediaDevices.enumerateDevices =
       navigator.mediaDevices.enumerateDevices || function() {
@@ -141,6 +144,7 @@ if (navigator.mozGetUserMedia) {
       resolve(infos);
     });
   };
+
   if (webrtcDetectedVersion < 41) {
     // Work around http://bugzil.la/1169665
     var orgEnumerateDevices =
@@ -179,8 +183,41 @@ if (navigator.mozGetUserMedia) {
 
   // The RTCPeerConnection object.
   window.RTCPeerConnection = function(pcConfig, pcConstraints) {
-    return new webkitRTCPeerConnection(pcConfig, pcConstraints);
+    var pc = new webkitRTCPeerConnection(pcConfig, pcConstraints);
+    var origGetStats = pc.getStats.bind(pc);
+    pc.getStats = function(selector, successCallback, errorCallback) { // jshint ignore: line
+      // If selector is a function then we are in the old style stats so just
+      // pass back the original getStats format to avoid breaking old users.
+      if (typeof selector === 'function') {
+        return origGetStats(selector, successCallback);
+      }
+
+      var fixChromeStats = function(response) {
+        var standardReport = {};
+        var reports = response.result();
+        reports.forEach(function(report) {
+          var standardStats = {
+            id: report.id,
+            timestamp: report.timestamp,
+            type: report.type
+          };
+          report.names().forEach(function(name) {
+            standardStats[name] = report.stat(name);
+          });
+          standardReport[standardStats.id] = standardStats;
+        });
+
+        return standardReport;
+      };
+      var successCallbackWrapper = function(response) {
+        successCallback(fixChromeStats(response));
+      };
+      return origGetStats(successCallbackWrapper, selector);
+    };
+
+    return pc;
   };
+
   // add promise support
   ['createOffer', 'createAnswer'].forEach(function(method) {
     var nativeMethod = webkitRTCPeerConnection.prototype[method];
@@ -287,8 +324,6 @@ if (navigator.mozGetUserMedia) {
   attachMediaStream = function(element, stream) {
     if (typeof element.srcObject !== 'undefined') {
       element.srcObject = stream;
-    } else if (typeof element.mozSrcObject !== 'undefined') {
-      element.mozSrcObject = stream;
     } else if (typeof element.src !== 'undefined') {
       element.src = URL.createObjectURL(stream);
     } else {
@@ -315,7 +350,27 @@ if (navigator.mozGetUserMedia) {
         });
       });
     }};
+    // in case someone wants to listen for the devicechange event.
+    navigator.mediaDevices.addEventListener = function() { };
+    navigator.mediaDevices.removeEventListener = function() { };
   }
+} else if (navigator.mediaDevices && navigator.userAgent.match(
+    /Edge\/(\d+).(\d+)$/)) {
+  console.log('This appears to be Edge');
+  webrtcDetectedBrowser = 'edge';
+
+  webrtcDetectedVersion =
+    parseInt(navigator.userAgent.match(/Edge\/(\d+).(\d+)$/)[2], 10);
+
+  // the minimum version still supported by adapter.
+  webrtcMinimumVersion = 12;
+
+  attachMediaStream = function(element, stream) {
+    element.srcObject = stream;
+  };
+  reattachMediaStream = function(to, from) {
+    to.srcObject = from.srcObject;
+  };
 } else {
   console.log('Browser does not appear to be WebRTC-capable');
 }
@@ -339,4 +394,19 @@ if (typeof module !== 'undefined') {
     //requestUserMedia: not exposed on purpose.
     //trace: not exposed on purpose.
   };
+} else if ((typeof require === 'function') && (typeof define === 'function')) {
+  // Expose objects and functions when RequireJS is doing the loading.
+  define([], function() {
+    return {
+      RTCPeerConnection: RTCPeerConnection,
+      getUserMedia: getUserMedia,
+      attachMediaStream: attachMediaStream,
+      reattachMediaStream: reattachMediaStream,
+      webrtcDetectedBrowser: webrtcDetectedBrowser,
+      webrtcDetectedVersion: webrtcDetectedVersion,
+      webrtcMinimumVersion: webrtcMinimumVersion
+      //requestUserMedia: not exposed on purpose.
+      //trace: not exposed on purpose.
+    };
+  });
 }