Question

我在HTML5画布上制作了多个视频。成功。我在浏览器上创建了node.js websocket及其客户端。成功。现在我正在尝试将这些项目结合起来。这个想法是通过nodejs websocket（服务器）将在canvas（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，但你为什么要这样做？使用您的方法，您必须从画布中获取所有数据，缓冲它，并且在您的情况下，您将其保留为原始（这是通过互联网传输的huuuuuge和不切实际），然后让服务器复制所有将数据传递给JS中的所有侦听客户端，然后撤消接收端的进程。这是一个巨大的开销，只有你有良好的互联网连接，你需要无损视频，你期望低帧率和/或帧大小。

你应该做的是从CanvasCaptureMediaStream开始。一旦您将Canvas作为MediaStream捕获，您可以使用MediaRecorder获取该视频的编码版本，通过WebSocket将其发送到您的服务器，然后让服务器将其发送到具有正常HTTP的所有其他客户端！ / p>

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

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

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

1 个答案: