title: Send video played on canvas to websocket
body: <p>I made multiple videos running on HTML5 canvas. Success.
  I made node.js websocket and its clients on browser. Success.
  Now I am trying to combine these projects.
  The idea is to send video played on canvas (admin.html) through nodejs websocket (server) to browser clients (spectactor.html). I am failed.</p>
  
  <p>Please help. Here is the script. runVid called when an admin clicked a row in playlist after establishing ws connection. runVid then called draw() and sendImage. sendImage not triggered at all. What's wrong? I also put sendImage() within draw() function, but this also failed.</p>
  
  <pre><code>var port = 8080;
  var ws = new WebSocket('ws://127.0.0.1:' + port,['soap', 'xmpp']);
  ws.binaryType = 'arraybuffer';
  
  
    function runVid(){
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
  
      var context = canvas.getContext('2d');
  
      var cw = Math.floor(canvas.clientWidth);
      var ch = Math.floor(canvas.clientHeight);
      canvas.width = cw;
      canvas.height = ch;
  
      video.addEventListener('play', function(){
        draw(this, context, cw, ch);
        sendImage(context, cw, ch);
      }, false);
    }
  
  
    function draw(video,canvas,width,height) {
      if(video.paused || video.ended) return false;
      canvas.drawImage(video,0,0,width,height);
  
      setTimeout(draw,20,video,canvas,width,height);
  
    }
  
    function sendImage(context, width,height){
      var imageData = context.getImageData(0, 0, width, height);
      var canvasPixelArray = imageData.data;
      var canvasPixelLen = canvasPixelArray.length;
  
      for(var j = 0; j&lt;canvasPixelLen;j++){
        byteArray[j] = canvasPixelArray[j];
      }
  
      ws.send(byteArray.buffer);
      console.log("byteArray sent");
    }
  </code></pre>