Monday, 29 May 2017

Send video played on canvas to websocket

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.

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.

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<canvasPixelLen;j++){
      byteArray[j] = canvasPixelArray[j];
    }

    ws.send(byteArray.buffer);
    console.log("byteArray sent");
  }



via J Does

No comments:

Post a Comment