[Color segmentation] Create a button for background capturing

ttoivone · Nov 8, 2019 · c632d57 · c632d57
1 parent c72e66b
commit c632d57
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/samples/css/base.css b/samples/css/base.css
@@ -21,7 +21,8 @@ body {
 .stats-settings, .threads-control, .jitter-limit, .edge-error,
 .downscale-level, .threshold-block-size, .threshold-offset, .demo-state,
 .lower-hue-control, .upper-hue-control, .lower-saturation-control,
-.upper-saturation-control, .lower-value-control, .upper-value-control {
+.upper-saturation-control, .lower-value-control, .upper-value-control,
+.background-control {
   padding: 10px;
   width: 100%;
   border-bottom: dotted silver 1px;

diff --git a/samples/invisibilityCloak/README.md b/samples/invisibilityCloak/README.md
@@ -10,7 +10,7 @@ Demonstrate color detection and segmentation using OpenCV.js.
 Camera parameters are not stable when the camera is just getting started. So we execute a loop where we capture background and use the last frame as a stable background.
 
 ```javascript
-const BACKGROUND_CAPTURE_ITERATIONS = 300;
+const BACKGROUND_CAPTURE_ITERATIONS = 50;
 
 for (let i = 0; i < BACKGROUND_CAPTURE_ITERATIONS; ++i) {
   ...
@@ -22,7 +22,7 @@ for (let i = 0; i < BACKGROUND_CAPTURE_ITERATIONS; ++i) {
 2. Create HSV ranges for blue color
 
 In OpenCV, Hue range is [0,179], Saturation range is [0,255] and Value range is [0,255].
-We use 0-33 range for blue color, 100-255 for saturation and 70-255 for brigtness.
+We apply range values from sliders but let's see example for blue color.
 
 ```javascript
 lowerRedRange = new cv.Mat(video.height, video.width, cv.CV_8UC3, new cv.Scalar(0, 100, 70, 255));

diff --git a/samples/invisibilityCloak/index.html b/samples/invisibilityCloak/index.html
@@ -40,7 +40,7 @@
     </div>
 
     <div class="demo-state centered">
-      <label id="demoState">Capture background...</label>
+      <label id="demoState">Capturing background...</label>
     </div>
 
     <div class="stats-settings centered">
@@ -53,35 +53,39 @@
       <input type="number" id="threadsNum" min="1" max="16">
     </div>
 
+    <div class="background-control centered">
+      <button onclick="requestAnimationFrame(captureBackground)">Capture background</button>
+    </div>
+
     <div class="lower-hue-control centered">
       <label for="lowerHue">Lower value of Hue channel:
         <output id="lowerHueOutput">0</output></label>
-        <input type="range" id="lowerHue" value="0" min="0" max="179" step="1">
+      <input type="range" id="lowerHue" value="0" min="0" max="179" step="1">
     </div>
     <div class="upper-hue-control centered">
       <label for="upperHue">Upper value of Hue channel:
         <output id="upperHueOutput">33</output></label>
-        <input type="range" id="upperHue" value="33" min="0" max="179" step="1">
+      <input type="range" id="upperHue" value="33" min="0" max="179" step="1">
     </div>
     <div class="lower-saturation-control centered">
       <label for="lowerSaturation">Lower value of Saturation channel:
         <output id="lowerSaturationOutput">100</output></label>
-        <input type="range" id="lowerSaturation" value="100" min="0" max="255" step="1">
+      <input type="range" id="lowerSaturation" value="100" min="0" max="255" step="1">
     </div>
     <div class="upper-saturation-control centered">
       <label for="upperSaturation">Upper value of Saturation channel:
         <output id="upperSaturationOutput">255</output></label>
-        <input type="range" id="upperSaturation" value="255" min="0" max="255" step="1">
+      <input type="range" id="upperSaturation" value="255" min="0" max="255" step="1">
     </div>
     <div class="lower-value-control centered">
       <label for="lowerValue">Lower value of Brigtness channel:
         <output id="lowerValueOutput">70</output></label>
-        <input type="range" id="lowerValue" value="70" min="0" max="255" step="1">
+      <input type="range" id="lowerValue" value="70" min="0" max="255" step="1">
     </div>
     <div class="upper-value-control centered">
       <label for="upperValue">Upper value of Brigtness channel:
         <output id="upperValueOutput">255</output></label>
-        <input type="range" id="upperValue" value="255" min="0" max="255" step="1">
+      <input type="range" id="upperValue" value="255" min="0" max="255" step="1">
     </div>
   </div>
 

diff --git a/samples/invisibilityCloak/index.js b/samples/invisibilityCloak/index.js
@@ -17,7 +17,7 @@ let dst = null;
 // Camera parameters are not stable when the camera is just getting started.
 // So we execute a loop where we capture background and use the last frame
 // as a stable background.
-const BACKGROUND_CAPTURE_ITERATIONS = 300;
+const BACKGROUND_CAPTURE_ITERATIONS = 30;
 
 // In OpenCV, Hue range is [0,179], Saturation range is [0,255]
 // and Value range is [0,255]. We use ~0-33 range for blue color as default.
@@ -81,18 +81,29 @@ function completeStyling() {
   canvasOutput.height = video.height;
 }
 
-function captureBackground() {
-  for (let i = 0; i < BACKGROUND_CAPTURE_ITERATIONS; ++i) {
+let backgroundCaptureCounter = 0;
+function runCapturingRound() {
+  if (backgroundCaptureCounter < BACKGROUND_CAPTURE_ITERATIONS) {
+    ++backgroundCaptureCounter;
+
     canvasInputCtx.drawImage(video, 0, 0, video.width, video.height);
     let imageData = canvasInputCtx.getImageData(0, 0, video.width, video.height);
     background.data.set(imageData.data);
     cv.imshow(canvasOutput, background);
+
+    requestAnimationFrame(runCapturingRound);
+    return;
   }
-  document.getElementById("demoState").innerText = "Ready for magic! Put on your blue cloak!"
+  backgroundCaptureCounter = 0;
+  document.getElementById("demoState").innerText = "Ready for magic! You may adjust color range below.";
   requestAnimationFrame(processVideo);
 }
+function captureBackground() {
+  document.getElementById("demoState").innerText = "Capturing background...";
+  requestAnimationFrame(runCapturingRound);
+}
 
-function removeBlueColor(source, destination) {
+function applyColorSegmentation(source, destination) {
   let hsv = new cv.Mat(video.height, video.width, cv.CV_8UC3);
   let mask = new cv.Mat();
   let maskInv = new cv.Mat();
@@ -137,7 +148,7 @@ function processVideo() {
     let imageData = canvasInputCtx.getImageData(0, 0, video.width, video.height);
     src.data.set(imageData.data);
 
-    removeBlueColor(src, dst);
+    applyColorSegmentation(src, dst);
 
     cv.imshow(canvasOutput, dst);
 
@@ -166,7 +177,13 @@ function onVideoStartedCustom() {
   document.getElementById('mainContent').classList.remove('hidden');
   completeStyling();
   initOpencvObjects();
-  captureBackground();
+  requestAnimationFrame(captureBackground);
+}
+
+function startVideoProcessingCustom() {
+  videoTrack = video.srcObject.getVideoTracks()[0];
+  imageCapturer = new ImageCapture(videoTrack);
+  requestAnimationFrame(captureBackground);
 }
 
 function cleanupAndStop() {