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

Question

我想使用WebRTC流式传输HTML5画布的活动。一个用户广播他的画布，连接的对等人看到远程对等在他的画布上做了什么，如果他正在绘制一条线或任何东西，我希望连接的对等体在他自己的画布上看到这些变化。

我的问题是，这可能是开箱即用的WebRTC吗？在我搜索之后，我会说事实并非如此。

如果没有，你会如何处理这样的系统？

感谢。

Answer 1

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

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

当然，并非所有浏览器都支持它;但它是一种有用的技术，因为它可以像你提到的那样用于CANVAS流媒体。

我很惊讶地看到有一个2015年的答案说这是不可能的 - 画布上的captureStream方法自2014 - 2015年以来一直存在......今天有很多可用的演示可能会帮助你开始吧

Answer 2

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

这必须通过安装记录屏幕的伪摄像头（模拟摄像头的驱动程序）在每个客户端本地解决。然后，这可以用作WebRTC的源。

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

<强>更新
这个答案是在1.5多年前编写的，尽管有captureStream()界面的初始草案，但它处于婴儿状态。从那时起，该技术已经成熟，可以用于实验用途。

但是，请注意该页面还说明：

  

这是一项实验技术

以及

  

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

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

换句话说，它还不适合生产。

Answer 3

开箱即用＆＃34;开箱即用＃34;与WebRTC;你想做的不是例外。然而，它可以实现，这完全取决于画布应用程序的复杂性。

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

如果可以，那么发送此信息的方法是通过WebRTC的DataChannel，它公开类似于WebSockets的API。它肯定比WebSockets更快，因为对等连接的性质，以及发送带有无序传送和可变数量的重传的数据包的能力。

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