将 Canvas 发送到 UDP 组播地址 - 组播画布直播流

Question

我目前正在从事以下工作：

在一台计算机上，我有一个带有白色画布的浏览器，您可以在其中进行绘图。 在许多其他计算机上，您应该能够以视频流的形式接收该画布。计划是以某种方式将画布表面转换为视频流并通过 udp 将其发送到其他计算机。

到目前为止，我实现的是，画布在其他计算机上使用 node.js 和 socket.io 重绘（所以我基​​本上只是发送绘图信息，如坐标）。然后我还使用 WebRTC 的captureStream()-方法，将画布表面转换为视频标签。所以“视觉上”，它的工作，我在一台电脑上画画，在其他电脑上，我可以将视频设置为全屏，它似乎正在工作。

但这还不是我想要和需要的。我需要它作为一个真正的视频流，所以就像用 MPV 接收它一样。所以问题是：如何将画布表面作为 UDP 实时视频流发送？可能我还需要通过 FFMPEG 或其他方式发送它以对其进行转码..

到目前为止我读了很多，但基本上没有完全弄清楚该怎么做......

我查看了您从 captureStream() 返回的 MediaStream，但这似乎没有多大帮助，因为从画布捕获时 getTracks() 不起作用。

另外，当谈到 WebRTC 时，我不确定它是否工作，不是 2P2 吗？或者我可以以某种方式广播它并将数据包发送到 UDP 地址？我读到的here 是它不是直接可能的。但即使，我应该发送什么？那么如何将画布表面作为视频发送？

所以基本上有两个问题：1. 我必须发送什么，如何将画布发送到视频流和 2. 我如何将其作为流发送给其他客户端？

欢迎任何方法或提示。

Answer 1

timetocode.org 站点是从 HTML5 画布（在主机上）流式传输到视频元素（在客户端计算机上）的示例。

主页上的“更多关于演示”链接中提供了帮助。阅读那里的多人游戏主题。但基本上你只需检查“多人游戏”选项，命名一个“房间”，连接到那个房间（这使你成为那个房间的主人），点击客户端页面的链接之一，然后将客户端连接到你的房间设置。您应该很快就会看到画布视频流向客户端。

它使用 socket.io 在建立 WebRTC (P2P) 连接时发出信号。请注意，客户端通过 WebRTC 数据通道将鼠标和键盘数据发送回主机。

视频流的主机端代码的关键部分是canvas元素的captureStream方法，

var hostCanvas = document.getElementById('hostCanvas');
videoStream = hostCanvas.captureStream(); //60

以及WebRTC对等连接对象的addTrack方法，

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

在客户端代码上，将流定向到视频元素的 srcObject 的 ontrack 处理程序：

pc.ontrack = function (evt) {
   videoMirror.srcObject = evt.streams[0];
};