Update demos

1. disable eye detection 2. set capture size by screen size
huningxin · Aug 11, 2017 · ab18474 · ab18474
1 parent 62e26a5
commit ab18474
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 14 deletions.
diff --git a/samples/face-detection-wasm/index.html b/samples/face-detection-wasm/index.html
@@ -17,7 +17,7 @@
   <div id="container">
     <canvas class="center-block" id="canvasOutput" width=320 height=240></canvas>
   </div>
-  <div class="text-center">
+  <div class="invisible">
     <input type="checkbox" id="face" name="classifier" value="face" checked>
     <label for="face">face</label>
     <input type="checkbox" id="eye" name="cascade" value="eye">

diff --git a/samples/face-detection-wasm/js/index.js b/samples/face-detection-wasm/js/index.js
@@ -1,5 +1,11 @@
 let videoWidth, videoHeight;
 
+let qvga = {width: {exact: 320}, height: {exact: 240}};
+
+let vga = {width: {exact: 640}, height: {exact: 480}};
+
+let resolution = window.innerWidth < 640 ? qvga : vga;
+
 // whether streaming video from the camera.
 let streaming = false;
 
@@ -13,7 +19,7 @@ let detectEye = document.getElementById('eye');
 
 function startCamera() {
   if (streaming) return;
-  navigator.mediaDevices.getUserMedia({video: true, audio: false})
+  navigator.mediaDevices.getUserMedia({video: resolution, audio: false})
     .then(function(s) {
     stream = s;
     video.srcObject = s;
@@ -93,7 +99,8 @@ function processVideo() {
       size = faceMat.size();
     } else {
       cv.pyrDown(grayMat, faceMat);
-      cv.pyrDown(faceMat, faceMat);
+      if (videoWidth > 320)
+        cv.pyrDown(faceMat, faceMat);
       size = faceMat.size();
     }
     faceClassifier.detectMultiScale(faceMat, faceVect);

diff --git a/samples/face-detection/index.html b/samples/face-detection/index.html
@@ -17,7 +17,7 @@
   <div id="container">
     <canvas class="center-block" id="canvasOutput" width=320 height=240></canvas>
   </div>
-  <div class="text-center">
+  <div class="invisible">
     <input type="checkbox" id="face" name="classifier" value="face" checked>
     <label for="face">face</label>
     <input type="checkbox" id="eye" name="cascade" value="eye">

diff --git a/samples/face-detection/js/index.js b/samples/face-detection/js/index.js
@@ -1,5 +1,11 @@
 let videoWidth, videoHeight;
 
+let qvga = {width: {exact: 320}, height: {exact: 240}};
+
+let vga = {width: {exact: 640}, height: {exact: 480}};
+
+let resolution = window.innerWidth < 640 ? qvga : vga;
+
 // whether streaming video from the camera.
 let streaming = false;
 
@@ -13,7 +19,7 @@ let detectEye = document.getElementById('eye');
 
 function startCamera() {
   if (streaming) return;
-  navigator.mediaDevices.getUserMedia({video: true, audio: false})
+  navigator.mediaDevices.getUserMedia({video: resolution, audio: false})
     .then(function(s) {
     stream = s;
     video.srcObject = s;
@@ -93,7 +99,8 @@ function processVideo() {
       size = faceMat.size();
     } else {
       cv.pyrDown(grayMat, faceMat);
-      cv.pyrDown(faceMat, faceMat);
+      if (videoWidth > 320)
+        cv.pyrDown(faceMat, faceMat);
       size = faceMat.size();
     }
     faceClassifier.detectMultiScale(faceMat, faceVect);

diff --git a/samples/video-processing-wasm/js/index.js b/samples/video-processing-wasm/js/index.js
@@ -1,7 +1,12 @@
-// In this case, We set width 320, and the height will be computed based on the input stream.
-let width = 320;
+let width = 0;
 let height = 0;
 
+let qvga = {width: {exact: 320}, height: {exact: 240}};
+
+let vga = {width: {exact: 640}, height: {exact: 480}};
+
+let resolution = window.innerWidth < 640 ? qvga : vga;
+
 // whether streaming video from the camera.
 let streaming = false;
 
@@ -11,7 +16,7 @@ let vc = null;
 
 function startCamera() {
   if (streaming) return;
-  navigator.mediaDevices.getUserMedia({video: true, audio: false})
+  navigator.mediaDevices.getUserMedia({video: resolution, audio: false})
     .then(function(s) {
     stream = s;
     video.srcObject = s;
@@ -23,7 +28,8 @@ function startCamera() {
 
   video.addEventListener("canplay", function(ev){
     if (!streaming) {
-      height = video.videoHeight / (video.videoWidth/width);
+      height = video.videoHeight;
+      width = video.videoWidth;
       video.setAttribute("width", width);
       video.setAttribute("height", height);
       streaming = true;

diff --git a/samples/video-processing/js/index.js b/samples/video-processing/js/index.js
@@ -1,7 +1,12 @@
-// In this case, We set width 320, and the height will be computed based on the input stream.
-let width = 320;
+let width = 0;
 let height = 0;
 
+let qvga = {width: {exact: 320}, height: {exact: 240}};
+
+let vga = {width: {exact: 640}, height: {exact: 480}};
+
+let resolution = window.innerWidth < 640 ? qvga : vga;
+
 // whether streaming video from the camera.
 let streaming = false;
 
@@ -11,7 +16,7 @@ let vc = null;
 
 function startCamera() {
   if (streaming) return;
-  navigator.mediaDevices.getUserMedia({video: true, audio: false})
+  navigator.mediaDevices.getUserMedia({video: resolution, audio: false})
     .then(function(s) {
     stream = s;
     video.srcObject = s;
@@ -23,7 +28,8 @@ function startCamera() {
 
   video.addEventListener("canplay", function(ev){
     if (!streaming) {
-      height = video.videoHeight / (video.videoWidth/width);
+      height = video.videoHeight;
+      width = video.videoWidth;
       video.setAttribute("width", width);
       video.setAttribute("height", height);
       streaming = true;