如何在两个 iframe 之间发送 MediaStream

Question

我有两个 iframe 元素与它们的文档一起加载，它们都属于同一个源域。

在第一帧加载的文档获得了一些媒体流（使用getUserMedia）并将流附加到播放器。

第二帧中加载的文档也有一个播放器，我也想为这个播放器重复使用相同的媒体流。

寻找解决方案我遇到了RTCPeerConnection class article at Mozilla Developer Network，然后是some examples of using it。

但对于像我这样的简单用例来说，它看起来真的很重。我只想在同一浏览器和同一台计算机上的两个帧之间共享流。

这是我发现的唯一方法吗？

如果是这样，有什么方法可以提高性能（减少 CPU 使用率）？

或者还有其他方法可以实现上述用例吗？

Answer 1

目前我无法引用相关的 Web 标准出版物来断言我将要描述的行为是“标准化的”，但我已经通过经验验证了它（在另一个帧中播放媒体流）是微不足道的使用 Google Chrome、Microsoft Edge 或 Mozilla Firefox 完成，如果框架/文档共享相同的来源。

这些是最受欢迎的用户代理，尤其是对于依赖于MediaStream 类的应用程序，我认为它们的功能应该足以满足您的应用程序。

解决方案的关键在于上述用户代理在播放媒体流时不区分相同来源的帧。

意思是是的，如果您可以在您的应用程序中使用以下代码，假设player 指代一些HTMLMediaElement 和media_source 指一些MediaStream 对象：

player.srcObject = media_stream;

...那么代码也将“从另一个框架”工作（当然，前提是另一个框架同源）。

您无需解决任何特殊情况。要在多个文档/帧中播放相同的媒体流，您可以（并且应该有条不紊地）将相同的媒体流对象分配给属于任何一个文档的某些媒体元素的 srcObject 属性，只要文档共享相同的来源。

可以说性能应该是最佳的，因为媒体流是相同的，因此被所有媒体播放元素“共享”。毕竟，您不是在复制流。

我确信，当您尝试播放在一个来源的上下文中创建的媒体流时，建议的解决方案将失效，并且媒体播放元素与另一个来源相关联。您可以通过复制媒体流的数据段、逐个 blob 或逐个源缓冲区来复制媒体流，也许，使用假设两个帧在通信通道的任一端协作的消息传递（通过postMessage），但是那肯定会不是性能最佳，我想，如果可能的话。