将画布上播放的视频发送到 websocket

Question

我制作了多个在 HTML5 画布上运行的视频。成功。 我在浏览器上制作了 node.js websocket 及其客户端。成功。 现在我正在尝试将这些项目结合起来。 这个想法是通过nodejs websocket（服务器）将在画布（admin.html）上播放的视频发送到浏览器客户端（spectactor.html）。我失败了。

请帮忙。这是脚本。当管理员在建立 ws 连接后单击播放列表中的一行时调用 runVid。 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（服务器）将画布上播放的视频（admin.html）发送到浏览器客户端（spectactor.html）。

您可以使用 WebSocket，但您为什么要这样做？使用您的方法，您必须从画布中获取所有数据，对其进行缓冲，并且在您的情况下，您将其保留为原始数据（这对于通过 Internet 传输来说是 huuuuuge 并且不切实际），然后让服务器复制所有这些数据到您的 JS 中的所有侦听客户端，然后在接收端撤消该过程。这样做的开销是巨大的，并且仅适用于您拥有出色的互联网连接、需要无损视频并且期望低帧速率和/或帧大小的情况。

您应该从 CanvasCaptureMediaStream 开始。将 Canvas 捕获为 MediaStream 后，您可以使用 MediaRecorder 获取该视频的编码版本，通过 WebSocket 将其发送到您的服务器，然后让服务器使用普通 HTTP 将其发送到所有其他客户端！

更好...使用 WebRTC。默认情况下，您会牺牲一些质量来降低延迟，但它会占用您的新 MediaStream 并将其直接发送给客户端，而完全不涉及您的服务器。 （当然，除非您想流式传输一对多……然后最终您会希望相关的服务器来帮助处理负载。）

这些解决方案中的任何一个都比您现在尝试做的更好。