我正在尝试流式传输 a 的内容html5 canvas实时使用websockets and nodejs.
html5画布的内容只是一个视频。
到目前为止我所做的是：
我将画布转换为blob然后得到blob URL并使用 websockets 将该 URL 发送到我的 Nodejs 服务器。
我得到的 blob URL 是这样的：
canvas.toBlob(function(blob) {
url = window.URL.createObjectURL(blob);
});
Blob URL 是按视频帧生成的（确切地说是每秒 20 帧），它们看起来像这样：
blob:null/e3e8888e-98da-41aa-a3c0-8fe3f44frt53
然后，我通过 websockets 从服务器获取该 blob URL，以便我可以使用它将其绘制到另一个画布上以供其他用户查看。
我确实搜索了如何从 blob URL 绘制到画布上，但找不到任何接近我想要做的事情。
所以我的问题是：
这是我想要实现的目标的正确方法吗？任何
优点和缺点将不胜感激。
有没有其他更有效的方法来做到这一点或者我是对的
小路？
提前致谢。
EDIT:
我应该提到的是，我不能在这个项目中使用 WebRTC，我必须用我所拥有的一切来完成这一切。
为了让我现在所在的每个人都更容易，我尝试使用 websockets 在画布中显示上面提到的 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，这让我认为我所做的事情是错误的。
在谷歌浏览器中，我得到Not allowed to load local resource: blob: error.
第二次编辑：
这就是我现在所处的位置。
第一个选项
我尝试通过 websockets 发送整个 blob，并且成功完成。但是，由于某种奇怪的原因，我无法在客户端读回它！
当我查看 NodeJS 服务器的控制台时，我可以看到发送到服务器的每个 Blob 的类似内容：
<buffer fd67676 hdsjuhsd8 sjhjs....
第二个选项：
因此，上面的选项失败了，我想到了其他方法，即将每个画布帧转换为 base64(jpeg) 并通过 websockets 将其发送到服务器，然后将这些 base64 图像显示/绘制到客户端的画布上。
我每秒向服务器发送 24 帧。
这奏效了。但是再次显示这些 Base64 图像的客户端画布非常慢，就像每秒绘制 1 帧一样。这就是我目前遇到的问题。
第三个选项：
我还尝试使用没有画布的视频。所以，使用 WebRTC，我得到了video Stream as a 单个斑点。但我不完全确定如何使用它并将其发送到客户端以便人们可以看到它。
重要的：我正在开发的这个系统不是点对点连接。这只是我试图实现的一种单向流媒体方式。
