使用 WebRTC 串流 HTML5 canvas activity
Stream HTML5 canvas activity using WebRTC
我想使用 WebRTC 流式传输 HTML5 canvas 的 activity。一个用户广播他的 canvas 并且连接的对等点看到远程对等点在他的 canvas 上做什么，如果他正在画一条线或任何东西，我希望连接的对等点看到他的变化拥有 canvas.
我的问题是，WebRTC 是否可以开箱即用？经过我的搜索，我会说不是这样。
如果没有，您将如何处理这样的系统？
谢谢。
不幸的是，它不能开箱即用，因为 canvas 不能用作视频源。
这必须在每个客户端上本地解决，方法是安装一个伪相机（模拟相机的驱动程序）来记录屏幕。然后这可以用作WebRTC的源。
您可以使用 WebSocket 之类的东西通过服务器发送绘制命令并在接收端重播它们来模拟流式传输，但它当然不会成为 WebRTC 的集成部分（或使用其数据通道）。
更新
这个答案是在 1.5 多年前写的，虽然存在 captureStream() 界面的初始草案，但它还处于非常初级的状态。该技术从那时起已经成熟，可以用于实验。
但是，请注意，页面还指出：
This is an experimental technology
以及
Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
该功能仅在 Chrome（因此也在新的 Opera 中）和 Firefox 中受支持，并且当前必须通过标志启用。
换句话说，它还不是生产中需要考虑的东西。
WebRTC "out of the box" 的东西很少；你想做的也不例外。然而，它是可以实现的，这完全取决于您的 canvas 应用程序的复杂性。
一个想法可以是渲染代表远程 canvas 的本地 canvas。连接对等点后，远程对等点可以发送您自己复制远程 canvas 内容所需的信息。
如果可能的话，发送此信息的方法是通过 WebRTC 的 DataChannel，它公开了一个类似于 WebSockets 的 API。它肯定比 WebSockets 更快，因为对等连接的性质，以及发送无序交付和可变重新传输量的数据包的能力。
相关信息在此：
http://www.html5rocks.com/en/tutorials/webrtc/datachannels/
是的，有； CANVAS 元素附带一个 captureStream 方法，允许您将 canvas 捕获为 RTC 对等通道兼容的 MediaStream。就像您将相机流发送到另一个对等点一样，您可以将捕获的流发送到对等点以使其正常工作。
参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream
当然不是所有浏览器都支持它；但它是一项有用的技术，因为它可用于 CANVAS 按照您提到的方式进行流式传输。
我很惊讶地看到 2015 年的回答说这是不可能的 - canvas 上的 captureStream 方法自 2014-2015 年以来一直存在......今天有很多演示可用也许这会帮助你开始。
我想使用 WebRTC 流式传输 HTML5 canvas 的 activity。一个用户广播他的 canvas 并且连接的对等点看到远程对等点在他的 canvas 上做什么，如果他正在画一条线或任何东西，我希望连接的对等点看到他的变化拥有 canvas.
我的问题是，WebRTC 是否可以开箱即用？经过我的搜索，我会说不是这样。
如果没有，您将如何处理这样的系统？
谢谢。
不幸的是，它不能开箱即用，因为 canvas 不能用作视频源。
这必须在每个客户端上本地解决，方法是安装一个伪相机（模拟相机的驱动程序）来记录屏幕。然后这可以用作WebRTC的源。
您可以使用 WebSocket 之类的东西通过服务器发送绘制命令并在接收端重播它们来模拟流式传输，但它当然不会成为 WebRTC 的集成部分（或使用其数据通道）。
更新
这个答案是在 1.5 多年前写的，虽然存在 captureStream() 界面的初始草案，但它还处于非常初级的状态。该技术从那时起已经成熟，可以用于实验。
但是，请注意，页面还指出：
This is an experimental technology
以及
Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
该功能仅在 Chrome（因此也在新的 Opera 中）和 Firefox 中受支持，并且当前必须通过标志启用。
换句话说，它还不是生产中需要考虑的东西。
WebRTC "out of the box" 的东西很少；你想做的也不例外。然而，它是可以实现的，这完全取决于您的 canvas 应用程序的复杂性。
一个想法可以是渲染代表远程 canvas 的本地 canvas。连接对等点后，远程对等点可以发送您自己复制远程 canvas 内容所需的信息。
如果可能的话，发送此信息的方法是通过 WebRTC 的 DataChannel，它公开了一个类似于 WebSockets 的 API。它肯定比 WebSockets 更快，因为对等连接的性质，以及发送无序交付和可变重新传输量的数据包的能力。
相关信息在此： http://www.html5rocks.com/en/tutorials/webrtc/datachannels/
是的，有； CANVAS 元素附带一个 captureStream 方法，允许您将 canvas 捕获为 RTC 对等通道兼容的 MediaStream。就像您将相机流发送到另一个对等点一样，您可以将捕获的流发送到对等点以使其正常工作。
参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream
当然不是所有浏览器都支持它；但它是一项有用的技术，因为它可用于 CANVAS 按照您提到的方式进行流式传输。
我很惊讶地看到 2015 年的回答说这是不可能的 - canvas 上的 captureStream 方法自 2014-2015 年以来一直存在......今天有很多演示可用也许这会帮助你开始。