// Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

   var rect=null;
   var olcmd="";

   var cssfilter = function(event) {
    var zeronum=0;
    if (('' + eval('' + document.getElementById('mode').value)).length != document.getElementById('mode').value.length) {
       zeronum=document.getElementById('mode').value.length - ('' + eval('' + document.getElementById('mode').value)).length;
       //document.title='-+' + zeronum + '.' + document.getElementById("c1").toDataURL().length;
       if (zeronum == 1) { // sepia
         rect=null;
         if (!rect) { 
         rect=document.getElementById("c2").getBoundingClientRect();  
         if (document.getElementById("dic1")) {
         document.getElementById("dic1").style.position='absolute';
         document.getElementById("dic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("dic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("dic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("dic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("dic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("dic1").style.zIndex='45';
         document.getElementById("ic1").style.display='block';
         } else {
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("ic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
         } 
         }
         document.getElementById("ic1").style.zIndex='45';
         if (('' + document.getElementById("ic1").className).indexOf('sepia') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='sepia';
           } else {
             document.getElementById("ic1").className+=' sepia';
           }
         }
         if (document.getElementById("ic1").src != document.getElementById("c1").toDataURL()) {
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
         //alert(document.getElementById("ic1").outerHTML);
         }
       } else if (zeronum == 2) { // saturate
         rect=null;
         if (!rect) { rect=document.getElementById("c2").getBoundingClientRect(); 
         if (document.getElementById("dic1")) {
         document.getElementById("dic1").style.position='absolute';
         document.getElementById("dic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("dic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("dic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("dic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("dic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("dic1").style.zIndex='45';
         document.getElementById("ic1").style.display='block';
         } else {
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("ic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
         }
         }
         document.getElementById("ic1").style.zIndex='45';
         if (('' + document.getElementById("ic1").className).indexOf('saturate') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='saturate';
           } else {
             document.getElementById("ic1").className+=' saturate';
           }
         }
         if (document.getElementById("ic1").src != document.getElementById("c1").toDataURL()) {
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
         //alert(document.getElementById("ic1").outerHTML);
         }
        } else if (zeronum == 3) { // hue-rotate
         rect=null;
         if (!rect) { rect=document.getElementById("c2").getBoundingClientRect(); 
         if (document.getElementById("dic1")) {
         document.getElementById("dic1").style.position='absolute';
         document.getElementById("dic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("dic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("dic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("dic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("dic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("dic1").style.zIndex='45';
         document.getElementById("ic1").style.display='block';
         } else {
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("ic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         //document.getElementById("ic1").width=('' + rect.width).replace('px',''); // + 'px';
         //document.getElementById("ic1").height=('' + rect.height).replace('px',''); // + 'px';
         //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
         document.getElementById("ic1").style.display='block';
         }
         }
         document.getElementById("ic1").style.zIndex='45';
         if (('' + document.getElementById("ic1").className).indexOf('hue-rotate') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='hue-rotate';
           } else {
             document.getElementById("ic1").className+=' hue-rotate';
           }
         }
         //document.getElementById("ic1").style.background="URL(" + document.getElementById("c1").toDataURL() + ")";
         if (document.getElementById("ic1").src != document.getElementById("c1").toDataURL()) {
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
         //alert(document.getElementById("ic1").outerHTML);
         }
      } else if (zeronum == 4) { // opacity
         rect=null;
         if (!rect) { rect=document.getElementById("c2").getBoundingClientRect(); 
         if (document.getElementById("dic1")) {
         document.getElementById("dic1").style.position='absolute';
         document.getElementById("dic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("dic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("dic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("dic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("dic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("dic1").style.zIndex='45';
         document.getElementById("ic1").style.display='block';
         } else {
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("ic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
         }
         }
         document.getElementById("ic1").style.zIndex='45';
         if (('' + document.getElementById("ic1").className).indexOf('opacity') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='opacity';
           } else {
             document.getElementById("ic1").className+=' opacity';
           }
         }
         if (document.getElementById("ic1").src != document.getElementById("c1").toDataURL()) {
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
         //alert(document.getElementById("ic1").outerHTML);
         }
      } else if (zeronum == 5) { // brightness
         rect=null;
         if (!rect) { rect=document.getElementById("c2").getBoundingClientRect(); 
         if (document.getElementById("dic1")) {
         document.getElementById("dic1").style.position='absolute';
         document.getElementById("dic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("dic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("dic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("dic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("dic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("dic1").style.zIndex='45';
         document.getElementById("ic1").style.display='block';
         } else {
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("ic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
         }
         }
         document.getElementById("ic1").style.zIndex='45';
         if (('' + document.getElementById("ic1").className).indexOf('brightness') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='brightness';
           } else {
             document.getElementById("ic1").className+=' brightness';
           }
         }
         if (document.getElementById("ic1").src != document.getElementById("c1").toDataURL()) {
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
         //alert(document.getElementById("ic1").outerHTML);
         }
      } else if (zeronum == 6) { // contrast
         rect=null;
         if (!rect) { rect=document.getElementById("c2").getBoundingClientRect(); 
         if (document.getElementById("dic1")) {
         document.getElementById("dic1").style.position='absolute';
         document.getElementById("dic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("dic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("dic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("dic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("dic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("dic1").style.zIndex='45';
         document.getElementById("ic1").style.display='block';
         } else {
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("ic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
         }
         }
         document.getElementById("ic1").style.zIndex='45';
         if (('' + document.getElementById("ic1").className).indexOf('contrast') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='contrast';
           } else {
             document.getElementById("ic1").className+=' contrast';
           }
         }
         if (document.getElementById("ic1").src != document.getElementById("c1").toDataURL()) {
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
         //alert(document.getElementById("ic1").outerHTML);
         }
      } else if (zeronum == 7) { // blur
         rect=null;
         if (!rect) { rect=document.getElementById("c2").getBoundingClientRect(); 
         if (document.getElementById("dic1")) {
         document.getElementById("dic1").style.position='absolute';
         document.getElementById("dic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("dic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("dic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("dic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("dic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("dic1").style.zIndex='45';
         document.getElementById("ic1").style.display='block';
         } else {
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("ic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
         }
         }
         document.getElementById("ic1").style.zIndex='45';
         if (('' + document.getElementById("ic1").className).indexOf('blur') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='blur';
           } else {
             document.getElementById("ic1").className+=' blur';
           }
         }
         if (document.getElementById("ic1").src != document.getElementById("c1").toDataURL()) {
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
         //alert(document.getElementById("ic1").outerHTML);
         }
      } else if (zeronum == 8) { // drop-shadow
         rect=null;
         if (!rect) { rect=document.getElementById("c2").getBoundingClientRect(); 
         if (document.getElementById("dic1")) {
         document.getElementById("dic1").style.position='absolute';
         document.getElementById("dic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("dic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("dic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("dic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("dic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("dic1").style.zIndex='45';
         document.getElementById("ic1").style.display='block';
         } else {
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("ic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
         }
         }
         document.getElementById("ic1").style.zIndex='45';
         if (('' + document.getElementById("ic1").className).indexOf('drop-shadow') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='drop-shadow';
           } else {
             document.getElementById("ic1").className+=' drop-shadow';
           }
         }
         if (document.getElementById("ic1").src != document.getElementById("c1").toDataURL()) {
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
         //alert(document.getElementById("ic1").outerHTML);
         }
      }
            
    }
   };

   var zoom = function(event) {
    var zeronum=0;
    if (eval(eval('' + document.getElementById('mode').value) % 3) != 0 || eval('' + document.getElementById('mode').value) == 0) { document.getElementById("mode").value="15"; }
    if (('' + eval('' + document.getElementById('mode').value)).length != document.getElementById('mode').value.length) {
       zeronum=document.getElementById('mode').value.length - ('' + eval('' + document.getElementById('mode').value)).length;
    }
    if (zeronum > 0) { 
    //document.title='-' + zeronum;
    cssfilter(event); 
    } else if (zeronum == 0) {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         if (!rect) { rect=document.getElementById("c2").getBoundingClientRect(); 
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
         document.getElementById("ic1").style.left=eval(160 + eval(('' + rect.left).replace('px',''))) + 'px';
         } else {
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         }
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
         }
         document.getElementById("ic1").style.zIndex='45';
    } else {
    document.getElementById("ic1").style.zIndex='-5';
    }
    var x=-1, y=-1;
    if (event.touches) {
       //document.title='0';
    if (event.touches.length >= 1) {  
       //document.title='1';
       var touches = event.changedTouches;
       //document.title='11';
       var first = touches[0];
       //document.title='111';
       x = first.clientX;
       //document.title='1111';
       y = first.clientY;
       //document.title='' + x + ',' + y;
       var rectc1=document.getElementById('c1').getBoundingClientRect();
       //document.title='' + x + ',' + y + ' ' + rectc1.left + ',' + rectc1.top;
       if (x >= rectc1.left && Math.abs(x - rectc1.left) <= rectc1.width && y >= rectc1.top && Math.abs(y - rectc1.top) <= rectc1.height) {
       //document.title+=';'; // + x + ',' + y;
       }
    }
    } else if (event.layerX && olcmd == '') {
       //document.title='2';
       x = event.layerX;
       //document.title='22';
       y = event.layerY;
       //document.title='222';
    } //else if (event.layerX) {
    //   alert(olcmd);
    //}
    //var x = event.layerX;
    //var y = event.layerY;
    if (x >= 0) {
    var x5=120, y5=192;
    x5/=eval(eval('' + document.getElementById('mode').value) / 3); 
    y5/=eval(eval('' + document.getElementById('mode').value) / 3); 
    //document.getElementById("ic1").onload = function() { if (olcmd.length > 0) { eval(olcmd); olcmd=''; }  };
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    //  alert(document.getElementById("ic1").outerHTML);
      document.getElementById("c2").background='';
    }
    document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
    olcmd='document.getElementById("c2").getContext("2d").drawImage(document.getElementById("ic1"),';
    olcmd+='' + Math.min(Math.max(0, x - 5), document.getElementById("ic1").width - 10) + ',';
    olcmd+='' + Math.min(Math.max(0, y - 5), document.getElementById("ic1").height - 10) + ',';
    olcmd+='' + Math.round(x5) + ',' + Math.round(y5) + ',0, 0,120, 192);';
    document.getElementById("c2").getContext("2d").drawImage(document.getElementById("ic1"),
                      Math.min(Math.max(0, x - 5), document.getElementById("ic1").width - 10),
                      Math.min(Math.max(0, y - 5), document.getElementById("ic1").height - 10),
                      Math.round(x5), Math.round(y5),
                      0, 0,
                      120, 192);
    }
    }
  };


let processor = {
    timerCallback: function() {
      if (this.video.paused || this.video.ended) {
        return;
      }
      this.computeFrame();
      let self = this;
      setTimeout(function () {
          self.timerCallback();
        }, 0);
    },
 
   
    doLoad: function() {
      this.video = document.getElementById("video");
      this.c1 = document.getElementById("c1");
      this.ctx1 = this.c1.getContext("2d");
      document.getElementById("c1").addEventListener('mousemove', zoom);
      document.getElementById("c1").addEventListener('touchmove', zoom);
      document.body.addEventListener('click', zoom);
      this.c2 = document.getElementById("c2");
      this.ctx2 = this.c2.getContext("2d");
      let self = this;
      this.video.addEventListener("play", function() {
          self.width = self.video.videoWidth / 2;
          self.height = self.video.videoHeight / 2;
          self.timerCallback();
        }, false);
    },
  
    computeFrame: function() {
      var imr=146;
      var img=117;
      var imb=101;
      var mode=0; // see through
      var bright=0;
      if (document.getElementById('mr')) {
      if (document.getElementById('mr').value != '') {
      imr=eval('' + document.getElementById('mr').value);
      }
      }
      if (document.getElementById('mg')) {
      if (document.getElementById('mg').value != '') {
      img=eval('' + document.getElementById('mg').value);
      }
      }
      if (document.getElementById('mb')) {
      if (document.getElementById('mb').value != '') {
      imb=eval('' + document.getElementById('mb').value);
      }
      }
      this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
      let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
          let l = frame.data.length / 4;
          
      if (document.getElementById('mode')) {
          mode=eval('' + document.getElementById('mode').value);  
          if (mode == 1) {  // going grey
      for (let i = 0; i < l; i++) {
        bright = 0.34 * frame.data[i * 4 + 0] + 0.5 * frame.data[i * 4 + 1] + 0.16 * frame.data[i * 4 + 2];
        frame.data[i * 4 + 0]=bright;
        frame.data[i * 4 + 1]=bright;
        frame.data[i * 4 + 2]=bright;
      }
          } else if (mode == 2) { // invert colours
      for (let i = 0; i < l; i++) {
        frame.data[i * 4 + 0]=255 - frame.data[i * 4 + 0];
        frame.data[i * 4 + 1]=255 - frame.data[i * 4 + 1];
        frame.data[i * 4 + 2]=255 - frame.data[i * 4 + 2];
      }
          } 
      }     
  
      if (mode == 0) {
      for (let i = 0; i < l; i++) {
        let r = frame.data[i * 4 + 0];
        let g = frame.data[i * 4 + 1];
        let b = frame.data[i * 4 + 2];
        if ((Math.abs(r - imr) <= 43 && Math.abs(g - img) <= 43 && Math.abs(b - imb) <= 43) || (1 == 6 && r > 200)) { frame.data[i * 4 + 3] = 0; }
      }
      }
      if (eval(mode % 3) != 0 || mode == 0) { this.ctx2.putImageData(frame, 0, 0); }
      return;
    }
  };

document.addEventListener("DOMContentLoaded", () => {
  processor.doLoad();
});