JS Canvas Webcam Plus Zoom In Window SRC V1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      body {
        background: black;
        color:#CCCCCC;
      }
      #c2 {
        background-image: url(foo.png);
        background-repeat: no-repeat;
      }
      div {
        float: left;
        border :1px solid #444444;
        padding:10px;
        margin: 10px;
        background:#3B3B3B;
      }
    </style>
    <script type="text/javascript;version=1.8" src="main.js"></script>
  </head>

  <body onload="processor.Load()">
    <div>
      <video id="video" src="video.mp4" controls="true"/>
    </div>
    <div>
      <canvas id="c1" width="160" height="96"/>
      <canvas id="c2" width="160" height="96"/>
    </div>
  </body>
</html>

<center>
<body bgcolor="black">
<video id="video" autoplay hidden>
</video>

<canvas id="canvas" width="500" height="500"style="opacity:1.0;fillColor:black;">
<script>
var ii=1;
var inn=prompt("Enter #:");
var video = document.getElementById("video");
var c = document.getElementById("c1");
var ctx = c.getContext("2d");
var i=0;
var canvas = document.getElementById('canvas');
  var c2=document.getElementById('c2')
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true,audio:true};
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
video.src = this.window.URL.createObjectURL(stream);
video.play();
video.addEventListener("play", function() {i = window.setInterval(function() {
canvas.style.opacity-=0.1;
canvas.style.opacity=+Math.random()*.9;
ctx.drawImage(video,1,1,ii++,ii++)},inn);
}, false);
});
</script>