Replace OpenCV with GPU blob detection

client/camera/CameraMain.js

@@ -128,10 +128,10 @@ export default class CameraMain extends React.Component {
 
     return (
       <div>
-        <div className={styles.dynamicland}>
+        {/*<div className={styles.dynamicland}>
           Do not use Paper Programs as a substitute for going to or collaborating with Dynamicland.
           This is just some silly project off the internet. It does not even come close.
-        </div>
+        </div>*/}
         <div className={styles.video}>
           <CameraVideo
             width={this.state.pageWidth - padding * 3 - sidebarWidth}
@@ -229,6 +229,35 @@ export default class CameraMain extends React.Component {
             />
           </div>
 
+          <div className={styles.sidebarSection}>
+            sigma = {this.props.config.sigma}{' '}
+            <br />
+            <input
+              type="range"
+              min="1"
+              max="20"
+              step="0.1"
+              value={this.props.config.sigma}
+              onChange={event =>
+                this.props.onConfigChange({ ...this.props.config, sigma: parseFloat(event.target.value) })
+              }
+            />
+          </div>
+
+          <div className={styles.sidebarSection}>
+            dotThreshold = {this.props.config.dotThreshold}{' '}
+            <input
+              type="range"
+              min="-0.95"
+              max="-0.10"
+              step="0.01"
+              value={this.props.config.dotThreshold}
+              onChange={event =>
+                this.props.onConfigChange({ ...this.props.config, dotThreshold: parseFloat(event.target.value) })
+              }
+            />
+          </div>
+
           <div className={styles.sidebarSection}>
             <div className={styles.sidebarSectionSection}>colors</div>
             <div>

client/camera/CameraVideo.js

@@ -1,5 +1,3 @@
-/* global cv */
-
 import React from 'react';
 
 import { cornerNames } from '../constants';
@@ -31,15 +29,12 @@ export default class CameraVideo extends React.Component {
             video.width = video.videoWidth;
             video.height = video.videoHeight;
             this.setState({ videoWidth: video.width, videoHeight: video.height });
-            this._videoCapture = new cv.VideoCapture(video);
             this._dataToRemember = {};
             this._processVideo();
           };
         });
     };
-
-    if (cv.Mat) init();
-    else cv.onRuntimeInitialized = init;
+    init();
   }
 
   _onMouseDown = mouseDownEvent => {
@@ -67,28 +62,19 @@ export default class CameraVideo extends React.Component {
     setTimeout(this._processVideo);
     if (this.props.config.freezeDetection) return;
 
-    const displayMat = new cv.Mat(
-      this._videoCapture.video.height,
-      this._videoCapture.video.width,
-      cv.CV_8UC4
-    );
-
     try {
       const { programsToRender, keyPoints, dataToRemember, framerate } = detectPrograms({
         config: this.props.config,
-        videoCapture: this._videoCapture,
+        videoInput: this._videoInput,
         dataToRemember: this._dataToRemember,
-        displayMat,
+        displayCtx: this._canvas.getContext("2d")
       });
       this._dataToRemember = dataToRemember;
       this.setState({ keyPoints });
       this.props.onProcessVideo({ programsToRender: programsToRender, framerate });
     } catch (error) {
       console.log(error); // eslint-disable-line no-console
     }
-
-    cv.imshow(this._canvas, displayMat);
-    displayMat.delete();
   };
 
   render() {
@@ -102,7 +88,6 @@ export default class CameraVideo extends React.Component {
         ref={el => (this._el = el)}
         style={{ width: outerWidth, height: outerHeight, overflow: 'hidden' }}
       >
-        <video id="videoInput" style={{ display: 'none' }} ref={el => (this._videoInput = el)} />
         <div
           style={{
             position: 'relative',
@@ -112,9 +97,15 @@ export default class CameraVideo extends React.Component {
             top: this.props.config.zoomCanvasY,
           }}
         >
+          <video
+            id="videoInput"
+            style={{ position: 'absolute', top: 0, left: 0, width, height }}
+            ref={el => (this._videoInput = el)}
+          />
           <canvas
             id="canvasOutput"
-            style={{ width, height }}
+            width={this.state.videoWidth} height={this.state.videoHeight}
+            style={{ position: 'absolute', top: 0, left: 0, width, height }}
             ref={el => (this._canvas = el)}
             onMouseDown={this._onMouseDown}
           />
@@ -145,7 +136,7 @@ export default class CameraVideo extends React.Component {
                   width: point.size / this.state.videoWidth * width,
                   height: point.size / this.state.videoHeight * height,
                 }}
-                onClick={() => this.props.onSelectColor(point.avgColor)}
+                onClick={() => this.props.onSelectColor(point.color)}
               />
             ))}
         </div>