.

ck.js

@@ -8,9 +8,7 @@ window.ck= (function(_d){
         _width  = 0,
         _height = 0,
         _tmpCtx = _d.createElement('canvas'),
-        // criamos uma cor, que trataremos
         _colors = [0, 0, 200],
-        // distância aceita, entre um tom de cor e outro
         _range  = 80;
 
     _tmpCtx.width= _canvas.offsetWidth;
@@ -41,14 +39,12 @@ window.ck= (function(_d){
             g= data[l*4+1];
             b= data[l*4+2];
 
-            // caso o tom atual da cor, esteja dentro do range
             if(Math.abs(r - _colors[0]) < 250 - _range
                 &&
                Math.abs(g - _colors[1]) < 250 - _range
                 &&
                Math.abs(b - _colors[2]) < 250 - _range)
             {
-                // colocamos seu alpha como 0 (invisível)
                 frame.data[l*4+3]= 0;
             }
         }
@@ -78,6 +74,11 @@ window.ck= (function(_d){
 
                 setInterval(_videoPlaying, 60);
 
+                // vamos usar o input range para definir a distância aceita
+                _d.getElementById('range').addEventListener('change', function(){
+                    _range= 255 - this.value;
+                });
+
             }, function(){
                 alert('O usuário não permitiu!');
             });

index.html

@@ -17,6 +17,9 @@
             }
             video{
                 border: solid 1px red;
+                /* vamos esconder o vídeo aqui */
+                position: absolute;
+                left: -999px;
             }
             body{
                 background-color: appworkspace;
@@ -34,7 +37,7 @@
 
             <canvas id="canvas" width="360" height="270"></canvas><br/>
 
-            <input id="range" type="range" value="100" min="0" max="255" />
+            <input id="range" type="range" value="175" min="0" max="255" />
 
         </div>