JavaScriptCollection
diff --git a/‎examples/assets/minions.mp4‎
3.71 MB b/‎examples/assets/minions.mp4‎
3.71 MB
diff --git a/‎examples/color_video.html‎
Lines changed: 30 additions & 17 deletions b/‎examples/color_video.html‎
Lines changed: 30 additions & 17 deletions
@@ -9,12 +9,12 @@
   <script src="assets/stats.min.js"></script>
 
   <style>
-  #rectangle {
-    height: 80px;
-    left: -1000px;
+  .demo-container {
+    background-color: black;
+  }
+
+  video, canvas {
     position: absolute;
-    top: -1000px;
-    width: 120px;
   }
   </style>
 </head>
@@ -27,33 +27,46 @@
     <div class="demo-container">
       <div id="rectangle"></div>
       <video id="video" width="800" height="530" preload autoplay loop muted controls>
-        <source src="assets/color.mp4"  type="video/mp4">
-        <source src="assets/color.webm" type="video/webm">
+        <source src="assets/minions.mp4"  type="video/mp4">
       </video>
+      <canvas id="canvas" width="800" height="500"></canvas>
     </div>
   </div>
 
   <script>
     window.onload = function() {
       var rectangle = document.getElementById('rectangle');
       var video = document.getElementById('video');
+      var canvas = document.getElementById('canvas');
+      var context = canvas.getContext('2d');
+
+      tracking.ColorTracker.registerColor('purple', function(r, g, b) {
+        var threshold = 50,
+          dx = r - 120,
+          dy = g - 60,
+          dz = b - 210;
 
-      var tracker = new tracking.ColorTracker();
+        if ((b - g) >= 100 && (r - g) >= 60) {
+          return true;
+        }
+        return dx * dx + dy * dy + dz * dz < 3500;
+      });
+
+      var tracker = new tracking.ColorTracker(['yellow', 'purple']);
       tracker.setMinDimension(5);
 
       tracking.track('#video', tracker);
 
       tracker.on('track', function(event) {
-        if (event.data.length === 0) {
-          rectangle.style.top = '-1000px';
-          return;
-        }
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
         event.data.forEach(function(rect) {
-          rectangle.style.border = '2px solid ' + rect.color;
-          rectangle.style.width = rect.width + 'px';
-          rectangle.style.height = rect.height + 'px';
-          rectangle.style.left = (video.offsetLeft + rect.x) + 'px';
-          rectangle.style.top = (video.offsetTop + rect.y) + 'px';
+          if (rect.color === 'custom') {
+            rect.color = tracker.customColor;
+          }
+
+          context.strokeStyle = rect.color;
+          context.strokeRect(rect.x, rect.y, rect.width, rect.height);
         });
       });
     };