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