使用WebRTC流HTML5画布活动

Question

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

我的问题是，WebRTC是否可以立即使用？ 搜索之后，我会说不是这样。

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

谢谢。

Answer 1

就在这里; CANVAS元素带有captureStream方法，该方法允许您将画布捕获为与RTC对等通道兼容的MediaStream。 就像将摄像机流发送给另一个对等方一样，您也可以将捕获的流发送给对等方以使其正常工作。

参考： https : //developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/captureStream

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

我很惊讶地看到一个2015年的回答说这是不可能的-画布上的captureStream方法自2014-2015年就出现了……今天有很多演示可用，也许可以帮助您入门。

Answer 2

不幸的是，由于画布不能用作视频源，因此无法开箱即用。

必须通过在每个客户端上本地安装伪摄像机（模拟摄像机的驱动程序）来解决此问题，该伪摄像机记录屏幕。 然后，可以将其用作WebRTC的源。

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

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

但是，请注意，页面也会指出：

这是一项实验技术

以及

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

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

换句话说，尚未考虑将其用于生产。

Answer 3

WebRTC几乎没有“开箱即用”的东西。 您想要做的也不例外。 但是，可以实现它，这完全取决于画布应用程序的复杂性。

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

如果可能的话，则通过WebRTC的DataChannel发送此信息的方法，该方法公开类似于WebSockets的API。 由于对等连接的性质以及以乱序发送和可变数量的重新发送来发送数据包的能力，它肯定比WebSockets更快。

此处的相关信息： http : //www.html5rocks.com/en/tutorials/webrtc/datachannels/