Javascript 高效的html5画布内容流式传输方式？

我正在尝试使用

websockets

和

nodejs

实时流式传输

html5画布的内容

html5画布的内容只是一个视频

到目前为止，我所做的是：

我将画布转换为
blob
，然后获取
blob URL
，并使用WebSocket将该URL发送到我的nodejs服务器

我得到的blob URL如下所示：

canvas.toBlob(function(blob) {
   url = window.URL.createObjectURL(blob);
});

blob:null/e3e8888e-98da-41aa-a3c0-8fe3f44frt53

blob URL是每个视频帧生成的（准确地说是每秒20帧），它们看起来像这样：

canvas.toBlob(function(blob) {
   url = window.URL.createObjectURL(blob);
});

blob:null/e3e8888e-98da-41aa-a3c0-8fe3f44frt53

然后，我通过websockets从服务器获取blobURL，以便使用它将其绘制到另一个画布上，供其他用户查看

我确实搜索了如何从blobURL绘制到画布上，但我找不到任何接近我正在尝试做的事情

所以我的问题是：

这是我努力实现目标的正确方式吗？任何
赞成和反对都会被感激

有没有其他更有效的方法来做这件事，或者我是对的
路径

提前谢谢

编辑：

我应该提到，我不能在这个项目中使用WebRTC，我必须用我所拥有的一切来完成它

为了让我现在所在的每个人都更容易，下面是我如何使用WebSocket在画布中显示上面提到的blob URL的方法：

websocket.onopen = function(event) {

        websocket.onmessage = function(evt) {
            var val = evt.data;
            console.log("new data "+val);
            var canvas2 = document.querySelector('.canvMotion2');
            var ctx2 = canvas2.getContext('2d');
            var img = new Image();     

            img.onload = function(){
                ctx2.drawImage(img, 0, 0)
            }
            img.src = val;
        };

        // Listen for socket closes
        websocket.onclose = function(event) {

        };

        websocket.onerror = function(evt) {

        };

};

问题是，当我在FireFox中运行该代码时，画布总是空/空的，但我在控制台中看到blob URL，这让我认为我所做的是错误的

在Google chrome中，我发现
不允许加载本地资源：blob:
错误

第二次编辑：

这就是我现在的处境

第一选项

我试图通过websockets发送整个blob，我成功地做到了这一点。然而，由于某种奇怪的原因，我无法在客户端读取它

当我查看nodejs服务器的控制台时，我可以看到我发送到服务器的每个blob都是这样的：

<buffer fd67676 hdsjuhsd8 sjhjs....

流式传输画布内容的最自然方式：WebRTC
OP明确表示他们不能使用它，对许多人来说可能是这样，因为

还是没那么好
这意味着有一个MediaServer正在运行（至少ICE+STUN/TURN，如果您想流式传输到多个对等方，还可能有一个网关）
但是，如果您负担得起，那么从画布元素获得MediaStream所需的只是

const canvas_stream = canvas.captureStream(minimumFrameRate);

然后您只需将其添加到RTPeerConnection：

pc.addTrack(stream.getVideoTracks()[0], stream);

下面的示例将仅向
元素显示MediaStream


设x=0；
const ctx=canvas.getContext（'2d'）；
draw（）；
startStream（）；
函数startStream（）{
//抓住我们的媒体流
const stream=canvas.captureStream（30）；
//喂
vid.srcObject=流；
视频播放（）；
}
函数绘图（）{
x=（x+1）%（canvas.width+50）；
ctx.fillStyle='白色'；
ctx.fillRect（0,0，canvas.width，canvas.height）；
ctx.fillStyle='红色'；
ctx.beginPath（）；
弧（x-25,75,25,0，数学π*2）；
ctx.fill（）；
请求动画帧（绘制）；
}
video，canvas{border:1px solid}
75
这是WebRTC的完美用例。看看这个例子：@Robert，很遗憾，我不能在我的项目中使用WebRTC。@williamwolly那么，在我们得到与您的情况不相关的答案之前，最好包含一个完整的问题并包含您的约束条件。@Adriani6编辑了我的问题。@PatrickRoberts，直接访问画布上的图形是什么意思？这是一个正在画布上显示的实时流媒体视频。我已经编辑了我的问题，并添加了一些详细信息和我的位置。