ビデオをキャンバスでwebsocketに再生する

Question

HTML5キャンバスで複数の動画を再生しました。成功。 node.js websocketとそのクライアントをブラウザで作成しました。成功。 私はこれらのプロジェクトを組み合わせようとしています。 アイデアは、キャンバス（admin.html）で再生されたビデオをnodejs websocket（サーバー）からブラウザクライアント（spectactor.html）に送信することです。私は失敗です。

助けてください。ここにスクリプトがあります。 runVidは、ws接続を確立した後、管理者がプレイリスト内の行をクリックしたときに呼び出されます。 runVidはdraw（）とsendImageを呼び出します。 sendImageはまったくトリガーされません。どうしましたか？私はsendImage（）をdraw（）関数の中に入れましたが、これも失敗しました。

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"); 
    } 

Answer 1

アイデアは、ブラウザクライアントにnodejsのWebSocket（サーバー）（spectactor.html）からキャンバス（admin.html）で再生映像を送信することです。

はWebSocketを使用できますが、なぜあなたはしたいですか？あなたのアプローチでは、キャンバスからすべてのデータを取得し、バッファリングしなければならず、場合によっては生データをそのまま残しておく必要があります（これは、インターネット上での伝送には不都合で実用的ではありません） JS内のすべてのリスニングクライアントに送信し、受信側でプロセスを元に戻します。このオーバーヘッドは大規模で、優れたインターネット接続があり、ロスレスなビデオを必要とし、フレームレートやフレームサイズが低いと思われる場合にのみ適切です。

代わりに行うべきことは、CanvasCaptureMediaStreamで始まることです。 CanvasをMediaStreamとしてキャプチャしたら、MediaRecorderを使用してそのビデオのエンコードされたバージョンを取得し、WebSocketによってサーバーに送信し、サーバーが通常のHTTPを使用して他のすべてのクライアントに送信できるようにします。

WebRTCを使用してください。あなたはデフォルトで低レイテンシーのためにいくつかの品質を犠牲にしますが、それはあなたの新しいMediaStreamを取って、あなたのサーバーにまったく関与せずにクライアントにそれを送るでしょう。 （もちろん、1つを多数にストリームしたい場合を除き、最終的には、サーバーが関与して負荷を処理するようにしてください）。

これらのソリューションのいずれも、現在実行しようとしているものより優れています。