Modern constraints polyfill in adapter.js

src/content/getusermedia/resolution/index.html

@@ -80,6 +80,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/resolution" 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/resolution/js/main.js

@@ -34,52 +34,21 @@ fullHdButton.onclick = function() {
 };
 
 var qvgaConstraints = {
-  video: {
-    mandatory: {
-      minWidth: 320,
-      minHeight: 180,
-      maxWidth: 320,
-      maxHeight: 180
-    }
-  }
+  video: { width: { exact: 320 }, height: { exact: 240 } }
 };
 
 var vgaConstraints = {
-  video: {
-    mandatory: {
-      minWidth: 640,
-      minHeight: 360,
-      maxWidth: 640,
-      maxHeight: 360
-    }
-  }
+  video: { width: { exact: 640 }, height: { exact: 480 } }
 };
 
 var hdConstraints = {
-  video: {
-    mandatory: {
-      minWidth: 1280,
-      minHeight: 720,
-      maxWidth: 1280,
-      maxHeight: 720
-    }
-  }
+  video: { width: 1280, height: 720 }
 };
 
 var fullHdConstraints = {
-  video: {
-    mandatory: {
-      minWidth: 1920,
-      minHeight: 1080,
-      maxWidth: 1920,
-      maxHeight: 1080
-    }
-  }
+  video: { width: { exact: 1920 }, height: { exact: 1080 } }
 };
 
-navigator.getUserMedia = navigator.getUserMedia ||
-    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-
 function successCallback(stream) {
   window.stream = stream; // stream available to console
   video.src = window.URL.createObjectURL(stream);
@@ -90,20 +59,21 @@ function errorCallback(error) {
 }
 
 function displayVideoDimensions() {
+  if (!video.videoWidth) {
+    setTimeout(displayVideoDimensions, 500);
+  }
   dimensions.innerHTML = 'Actual video dimensions: ' + video.videoWidth +
     'x' + video.videoHeight + 'px.';
 }
 
-video.onplay = function() {
-  setTimeout(function() {
-    displayVideoDimensions();
-  }, 500);
-};
+video.onloadedmetadata = displayVideoDimensions;
 
 function getMedia(constraints) {
   if (stream) {
     video.src = null;
     stream.stop();
   }
-  navigator.getUserMedia(constraints, successCallback, errorCallback);
+  setTimeout(function() {
+    navigator.getUserMedia(constraints, successCallback, errorCallback);
+  }, (stream? 200 : 0));
 }

src/js/adapter.js

@@ -61,9 +61,45 @@ if (navigator.mozGetUserMedia) {
   // The RTCIceCandidate object.
   window.RTCIceCandidate = mozRTCIceCandidate;
 
-  // getUserMedia shim (only difference is the prefix).
-  // Code from Adam Barth.
-  getUserMedia = navigator.mozGetUserMedia.bind(navigator);
+  // getUserMedia constraints shim.
+  getUserMedia = (webrtcDetectedVersion < 38)? function(c, onSuccess, onError) {
+    var constraintsToFF37 = function(c) {
+      if (typeof c != "object" || c.require) {
+        return c;
+      }
+      var require = [];
+      Object.keys(c).forEach(function(key) {
+        var r = c[key] = (typeof c[key] == "object")? c[key] : { ideal:c[key] };
+        if (r.exact !== undefined) {
+          r.min = r.max = r.exact;
+          delete r.exact;
+        }
+        if (r.min !== undefined || r.max !== undefined) {
+          require.push(key);
+        }
+        if (r.ideal !== undefined) {
+          c.advanced = c.advanced || [];
+          var oc = {};
+          oc[key] = { min: r.ideal, max: r.ideal };
+          c.advanced.push(oc);
+          delete r.ideal;
+          if (!Object.keys(r).length) {
+            delete c[key];
+          }
+        }
+      });
+      if (require.length) {
+        c.require = require;
+      }
+      return c;
+    }
+    console.log("spec: " + JSON.stringify(c));
+    c.audio = constraintsToFF37(c.audio);
+    c.video = constraintsToFF37(c.video);
+    console.log("ff37: " + JSON.stringify(c));
+    return navigator.mozGetUserMedia(c, onSuccess, onError);
+  } : navigator.mozGetUserMedia.bind(navigator);
+
   navigator.getUserMedia = getUserMedia;
 
   // Shim for MediaStreamTrack.getSources.
@@ -184,9 +220,51 @@ if (navigator.mozGetUserMedia) {
     return new webkitRTCPeerConnection(pcConfig, pcConstraints);
   };
 
-  // Get UserMedia (only difference is the prefix).
-  // Code from Adam Barth.
-  getUserMedia = navigator.webkitGetUserMedia.bind(navigator);
+  // getUserMedia constraints shim.
+  getUserMedia = function(c, onSuccess, onError) {
+    var constraintsToChrome = function(c) {
+      if (typeof c != "object" || c.mandatory || c.optional) {
+        return c;
+      }
+      var cc = {};
+      Object.keys(c).forEach(function(key) {
+        if (key == "require" || key == "advanced") {
+          return;
+        }
+        var r = (typeof c[key] == "object")? c[key] : { ideal: c[key] };
+        if (r.exact !== undefined) {
+          r.min = r.max = r.exact;
+        }
+        var oldname = function(prefix, name) {
+          return prefix + name.charAt(0).toUpperCase() + name.slice(1);
+        }
+        if (r.ideal !== undefined) {
+          cc.optional = cc.optional || [];
+          var oc = {};
+          oc[oldname("min", key)] = r.ideal;
+          cc.optional.push(oc);
+          oc = {};
+          oc[oldname("max", key)] = r.ideal;
+          cc.optional.push(oc);
+        }
+        ["min", "max"].forEach(function(mix) {
+          if (r[mix] !== undefined) {
+            cc.mandatory = cc.mandatory || {};
+            cc.mandatory[oldname(mix, key)] = r[mix];
+          }
+        });
+      });
+      if (c.advanced) {
+        cc.optional = (cc.optional || []).concat(c.advanced);
+      }
+      return cc;
+    }
+    console.log("spec: " + JSON.stringify(c));
+    c.audio = constraintsToChrome(c.audio);
+    c.video = constraintsToChrome(c.video);
+    console.log("chrm: " + JSON.stringify(c));
+    return navigator.webkitGetUserMedia(c, onSuccess, onError);
+  }
   navigator.getUserMedia = getUserMedia;
 
   // Attach a media stream to an element.