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

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

请帮忙。这是脚本。当管理员在建立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"); 
    }

来源

2017-05-29 J Does

的想法是发送视频玩上粗帆布（admin.html）通过的WebSocket的NodeJS（服务器）浏览器客户端（spectactor.html）。

你可能使用WebSocket，但你为什么要？使用你的方法，你必须从画布中获取所有的数据，缓冲它，并在你的情况下，你将它保留为原始的（这是huuuuuge和通过互联网传输不切实际），然后让服务器复制所有的数据到你的JS中的所有监听客户端，然后撤消接收端的进程。这种开销是巨大的，只有当你有良好的互联网连接，你需要无损视频，并且你期望低帧率和/或帧大小时才适用。

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

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

这些解决方案都比你现在想要做的要好。

来源

2017-05-30 05:51:35 Brad

这就是我正在做的，我通过socketIO发送blob到我的服务器，但是如何从我的服务器发送视频并正确地在客户端上播放它？谢谢 – Antoine

@Antoine我为此使用HTTP上的WebM，但你可以使用任何你想要的。您可能会发现使用FFmpeg首先处理任何需要的代码转换并发送到现有的视频流服务器会更加轻松。 – Brad

你可以扩展一下吗？基本上，我可以将WebM文件发送到客户端，但是如何将它们加载到视频源？我正在尝试使用媒体扩展程序API，但这对我来说非常困难，感谢您的帮助 – Antoine

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

回答

相关问题