Consolidate the asm.js and wasm versions

huningxin · Aug 13, 2017 · bca40d6 · bca40d6
1 parent be4666e
commit bca40d6
Show file tree

Hide file tree

Showing 17 changed files with 65 additions and 832 deletions.
diff --git a/samples/face-detection-wasm/css/style.css → samples/css/style.css b/samples/face-detection-wasm/css/style.css → samples/css/style.css
diff --git a/samples/face-detection-wasm/README.txt b/samples/face-detection-wasm/README.txt
diff --git a/samples/face-detection-wasm/js/index.js b/samples/face-detection-wasm/js/index.js
diff --git a/samples/face-detection-wasm/license.txt b/samples/face-detection-wasm/license.txt
diff --git a/samples/face-detection/css/style.css b/samples/face-detection/css/style.css
diff --git a/samples/face-detection-wasm/index.html → samples/face-detection/index-wasm.html b/samples/face-detection-wasm/index.html → samples/face-detection/index-wasm.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <title>OpenCV.js Face Detection (WebAssembly)</title>
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="../css/style.css">
 </head>
 
 <body>
@@ -26,6 +26,11 @@
 <script src="../libs/adapter-latest.js"></script>
 <script src="../libs/stats.min.js"></script>
 <script src="../libs/dat.gui.min.js"></script>
+<script src="../libs/utils.js"></script>
+<script>
+var featuresReady = checkFeatures(document.getElementById("info"), {webrtc: true, wasm: true});
+</script>
+<script src="js/index.js"></script>
 <script>
 var Module = {
    wasmBinaryFile: '../../build/wasm/opencv_js.wasm',
@@ -38,6 +43,5 @@
 };
 </script>
 <script async src="../../build/wasm/opencv.js"></script>
-<script src="js/index.js"></script>
 </body>
 </html>
diff --git a/samples/face-detection/index.html b/samples/face-detection/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <title>OpenCV.js Face Detection</title>
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="../css/style.css">
 </head>
 <body>
 <div id="info" class="text-center">
@@ -25,6 +25,11 @@
 <script src="../libs/adapter-latest.js"></script>
 <script src="../libs/stats.min.js"></script>
 <script src="../libs/dat.gui.min.js"></script>
+<script src="../libs/utils.js"></script>
+<script>
+var featuresReady = checkFeatures(document.getElementById("info"), {webrtc: true});
+</script>
+<script src="js/index.js"></script>
 <script>
 var Module = {
   preRun: [function() {
@@ -36,6 +41,5 @@
 };
 </script>
 <script async src="../../build/asm.js/opencv.js"></script>
-<script src="js/index.js"></script>
 </body>
 </html>
diff --git a/samples/face-detection/js/index.js b/samples/face-detection/js/index.js
@@ -181,7 +181,11 @@ function initUI() {
 
 function opencvIsReady() {
   console.log('OpenCV.js is ready');
+  if (!featuresReady) {
+    console.log('Requred features are not ready.');
+    return;
+  }
   info.innerHTML = '';
   initUI();
   startCamera();
-}
+}
diff --git a/samples/index.html b/samples/index.html
@@ -18,19 +18,19 @@
   <div class="textblock">
     <ul>
       <li>
-        <p class="startli"><a class="el" href="video-processing">Video processing (asm.js)</a></p>
+        <p class="startli"><a class="el" href="video-processing/index.html">Video processing (asm.js)</a></p>
         <p class="startli"></p>
       </li>
       <li>
-        <p class="startli"><a class="el" href="video-processing-wasm">Video processing (wasm)</a></p>
+        <p class="startli"><a class="el" href="video-processing/index-wasm.html">Video processing (wasm)</a></p>
         <p class="startli"></p>
       </li>
       <li>
-        <p class="startli"><a class="el" href="face-detection">Face detection (asm.js)</a></p>
+        <p class="startli"><a class="el" href="face-detection/index.html">Face detection (asm.js)</a></p>
         <p class="startli"></p>
       </li>
       <li>
-        <p class="startli"><a class="el" href="face-detection-wasm">Face detection (wasm)</a></p>
+        <p class="startli"><a class="el" href="face-detection/index-wasm.html">Face detection (wasm)</a></p>
         <p class="startli"></p>
       </li>
     </ul>

diff --git a/samples/libs/utils.js b/samples/libs/utils.js
@@ -0,0 +1,30 @@
+function checkFeatures(info, features) {
+  var wasmSupported = true, webrtcSupported = true;
+  if (features.webrtc) {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      webrtcSupported = false;
+    }
+  }
+  if (features.wasm && !window.WebAssembly) {
+    wasmSupported = false;
+  }
+
+  if (!webrtcSupported || !wasmSupported) {
+    var text = "Your web browser doesn't support ";
+    var len = text.length;
+    if (!webrtcSupported) {
+      text += "WebRTC";
+    }
+    if (!wasmSupported) {
+      if (text.length > len) {
+        text += " and ";
+      }
+      text += "WebAssembly"
+    }
+    text += ".";
+    info.innerHTML = text;
+    return false;
+  }
+
+  return true;
+}
diff --git a/samples/video-processing-wasm/README.txt b/samples/video-processing-wasm/README.txt
diff --git a/samples/video-processing-wasm/css/style.css b/samples/video-processing-wasm/css/style.css