使用 WebRTC 流式传输 HTML5 画布活动答案

【问题标题】：Stream HTML5 canvas activity using WebRTC使用 WebRTC 流式传输 HTML5 画布活动
【发布时间】：2016-09-08 22:58:27
【问题描述】：

我想使用 WebRTC 流式传输 HTML5 画布的活动。一位用户广播他的画布，连接的对等方查看远程对等方在他的画布上正在做什么，如果他正在画一条线或任何东西，我希望连接的对等方看到他自己的画布上的更改。

我的问题是，WebRTC 可以开箱即用吗？经过我的搜索，我会说事实并非如此。

如果没有，您将如何处理这样的系统？

谢谢。

【问题讨论】：

【解决方案1】：

是的，有； CANVAS 元素带有一个 captureStream 方法，该方法允许您将画布捕获为与 RTC Peer Channel 兼容的 MediaStream。就像您将相机流发送到另一个对等点一样，您可以将此捕获的流发送给对等点以使其正常工作。

当然，并非所有浏览器都支持它；但它是一项有用的技术，因为它可以按照您提到的方式用于 CANVAS 流式传输。

我很惊讶地看到 2015 年的回答说这是不可能的 - 画布上的 captureStream 方法从 2014 年到 2015 年就已经存在......今天有很多可用的演示可能会对你有所帮助开始吧。

【讨论】：

【解决方案2】：

不幸的是，它不能开箱即用，因为画布不能用作视频源。

这必须在每个客户端本地解决，方法是安装一个伪摄像头（模拟摄像头的驱动程序）来代替记录屏幕。然后可以将其用作 WebRTC 的源代码。

您可以使用 WebSocket 之类的东西通过服务器发送绘图命令并在接收端重放它们来模拟流，但它当然不会成为 WebRTC 的集成部分（或使用它的数据通道）。

更新
这个答案是 1.5 多年前写的，尽管存在 captureStream() 接口的初稿，但它还处于非常幼稚的状态。从那时起，该技术已经成熟，可以用于实验。

但是，请注意页面还指出：

这是一项实验性技术

还有

另请注意，随着规范的变化，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。

该功能仅在 Chrome（因此也在新的 Opera）和 Firefox 中受支持，并且当前必须通过标志启用。

换句话说，目前还不需要考虑生产。

【讨论】：

同意。 Websockets 绝对是去这里的方式（如果你是 Microsoft，则为 SignalR，否则为 SocketIO）。尤其如此，因为似乎只有一个内容源需要广播给一组订阅者。这种单一来源的要求使同步内容变得更加容易。一旦您克服了序列化内容更改的障碍，websocket 环境就会运行良好。硬敲学校的提示：只广播“完整和离散”的绘图命令集。每组都必须独立存在。
（我忘记了 WebRTC 的数据通道，答案已更新）@markE 一种老式的方法也可以使传输更快，通过使用二进制格式（类型化数组）来存储命令和位置, 作为 blob 发送。这使得“数据包”更加紧凑并且解析速度更快。

【解决方案3】：

WebRTC 很少有“开箱即用”的东西；你想做的也不例外。然而，它可以实现，这一切都取决于您的画布应用程序的复杂性。

一个想法可以是渲染一个代表远程画布的本地画布。一旦连接了对等点，远程对等点就可以发送您自己复制远程画布内容所需的信息。

如果可能，那么发送此信息的一种方式是通过 WebRTC 的 DataChannel，它公开了一个类似于 WebSockets 的 API。它肯定比 WebSockets 快，因为它具有对等连接的性质，并且能够以乱序传送和可变的重新传输量发送数据包。

【讨论】：