Question

我目前正在开展以下工作：

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

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

但那还不是我想要和需要的东西。我需要它作为一个真正的视频流，所以就像用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);

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

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

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

1 个答案: