Add Ability to Update Video Resolution through getUserMedia (#173)

* feat(capture): ability to update video resolution This adds the ability for user to update video resolution through getUserMedia constraints. Currently we hardcoded five resolution options (1080p, 720p, 480p, 360p, 240p). An error message would be shown if any error occurs. (e.g. overconstrained, not allowed etc.). A success message would be shown when resolution gets updated successfully. * add facing constraint -- Update examples/capture/getUserMedia.js * rebuilt with added face/facingmode settings change * facingmode Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>
publiclab · Sep 22, 2020 · 8d0526d · 8d0526d
1 parent 4f0ae7b
commit 8d0526d
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 7 deletions.
diff --git a/dist/capture.dist.js b/dist/capture.dist.js
@@ -240,6 +240,16 @@ $W.getRow=function() {
       }
     }
   }
+// Resulotion Map
+// Map resolution option name to value
+const resolutionMap = {
+  "1080p": { width: 1920, height: 1080 },
+  "720p": { width: 1080, height: 720 },
+  "480p": { width: 854, height: 480 },
+  "360p": { width: 640, height: 360 },
+  "240p": { width: 426, height: 240 }
+}
+
 // Temasys Adapter JS
 // https://github.com/Temasys/AdapterJS
 // AdapterJS provides polyfills and cross-browser helpers for WebRTC. It wraps around
@@ -271,3 +281,34 @@ $W.getUserMedia = function(options) {
     getUserMedia($W.defaultConstraints, successCallback, errorCallback);
   });
 };
+
+$W.updateResolution = function(resolution) {
+  const width = resolutionMap[resolution].width,
+        height = resolutionMap[resolution].height;
+
+  const constraints = {
+    ...$W.defaultConstraints,
+    facingMode: { ideal: "environment" },
+    video: {
+      ...$W.defaultConstraints.video,
+      width: { min: width },
+      height: { min: height }
+    }
+  };
+
+  const message = $('#resolution-message > small');
+
+  const successCallback = stream => {
+    attachMediaStream(document.getElementById("webcam-video"), stream);
+    message.html('Update Successfully!');
+    message.css('color', '#52BE80');
+  }
+
+  const errorCallback = error => {
+    message.html(error.name || 'Failed to update resolution');
+    message.css('color', '#E74C3C');
+    console.warn(error);
+  };
+
+  getUserMedia(constraints, successCallback, errorCallback);
+}
diff --git a/examples/capture/getUserMedia.js b/examples/capture/getUserMedia.js
@@ -1,3 +1,13 @@
+// Resulotion Map
+// Map resolution option name to value
+const resolutionMap = {
+  "1080p": { width: 1920, height: 1080 },
+  "720p": { width: 1080, height: 720 },
+  "480p": { width: 854, height: 480 },
+  "360p": { width: 640, height: 360 },
+  "240p": { width: 426, height: 240 }
+}
+
 // Temasys Adapter JS
 // https://github.com/Temasys/AdapterJS
 // AdapterJS provides polyfills and cross-browser helpers for WebRTC. It wraps around
@@ -30,3 +40,33 @@ $W.getUserMedia = function(options) {
   });
 };
 
+$W.updateResolution = function(resolution) {
+  const width = resolutionMap[resolution].width,
+        height = resolutionMap[resolution].height;
+
+  const constraints = {
+    ...$W.defaultConstraints,
+    facingMode: { ideal: "environment" },
+    video: {
+      ...$W.defaultConstraints.video,
+      width: { min: width },
+      height: { min: height }
+    }
+  };
+
+  const message = $('#resolution-message > small');
+
+  const successCallback = stream => {
+    attachMediaStream(document.getElementById("webcam-video"), stream);
+    message.html('Update Successfully!');
+    message.css('color', '#52BE80');
+  }
+
+  const errorCallback = error => {
+    message.html(error.name || 'Failed to update resolution');
+    message.css('color', '#E74C3C');
+    console.warn(error);
+  };
+
+  getUserMedia(constraints, successCallback, errorCallback);
+}
diff --git a/examples/capture/index.html b/examples/capture/index.html
@@ -151,7 +151,20 @@
     </div>
 
     <div class="tool-pane" id="tool-pane">
-
+
+      <p><small><b>RESOLUTION</b></small></p>
+      <div class="btn-group toolbar" style="margin-bottom:5px;">
+        <select name="resolutions" id="resolution-select" onChange="$W.updateResolution(this.value)" style="width: 100%;color: #000000;">
+          <option value="" style="color:#c4c4c4;">--options--</option>
+          <option value="1080p">1920 x 1080</option>
+          <option value="720p">1280 x 720</option>
+          <option value="480p">854 x 480</option>
+          <option value="360p">640 x 360</option>
+          <option value="240p">426 x 240</option>
+        </select>
+        <p id="resolution-message" style="margin:5px 0 0 0;"><small></small></p>
+      </div>
+
       <p><small><b>ADJUSTMENTS</b></small></p>
       <div class="btn-group toolbar" data-toggle="buttons-checkbox" style="margin-bottom:5px;">
 

diff --git a/package.json b/package.json
@@ -34,16 +34,16 @@
     "moment": "~2.27.0"
   },
   "devDependencies": {
-    "matchdep": "^2.0.0",
     "grunt": "^1.0.3",
-    "grunt-cli": "^1.2.0",
-    "grunt-tape": "^0.1.0",
-    "tape": "^5.0.1",
+    "grunt-cli": "^1.3.2",
     "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-jasmine": "~1.0.3",
     "grunt-contrib-watch": "^1.1.0",
+    "grunt-tape": "^0.1.0",
     "jasmine": "~3.6.1",
-    "jasmine-jquery": "~2.1.1",
     "jasmine-ajax": "~4.0.0",
-    "grunt-contrib-jasmine": "~1.0.3"
+    "jasmine-jquery": "~2.1.1",
+    "matchdep": "^2.0.0",
+    "tape": "^5.0.1"
   }
 }