在浏览网站时保持 WebRTC 视频流处于活动状态

Question

我正在寻找保持 WebRTC 视频流 + 流控件（挂断、静音等）加载并处于活动状态的最佳方式，即使用户通过导航菜单导航到另一个子页面。 我想到了以下方法，但是我不知道这是否是最实用的方法，或者现在是否有更好的解决方案：我只需用导航菜单制作一个包装器，然后在当前内容所在的位置放置一个 iFrame .视频流本身将进入菜单栏本身（它是一个足够宽的侧边栏，可以执行此类操作），当用户单击菜单项时，iFrame src 将替换为新的 URL。 这是正确的方法吗？但是，如果是这样，由于到目前为止我还没有使用过多的 iFrame，我还有一些担忧：

1. 在使用 iFrame 时浏览器功能有什么缺点吗？例如，我知道 Chrome 会要求您将几个功能放入 iFrame 的allow 属性中，例如在使用摄像头、麦克风或用户位置时。有什么我绝对不能在 iFrames 中做的吗？
2. iFrame 是否与“主”包装器共享 (PHP) 会话和 cookie，还是这些单独的会话？
3. 可能是我最关心的问题：包装器的 JavaScript 代码和 iFrame 之间如何相互通信？例如，如何从 iFrame 中向包装器中的视频流发送挂断信号？

感谢任何提示！

Answer 1

iframe 可以工作。

在使用 iFrame 时浏览器功能有什么缺点吗？

主要问题是，当 iframe 加载时，您并不能真正控制页面的呈现方式。例如，当前一页被拆除和替换时，用户可能会看到短暂的纯白色。

在 iFrame 中有什么我绝对不能做的吗？

iframe 非常灵活。请记住，它们有自己的 JavaScript 上下文，因此您需要编写一些额外的代码来来回移动数据。

iFrame 是否与“主”包装器共享 (PHP) 会话和 cookie

是的

包装器和 iFrame 的 JavaScript 代码如何相互通信？

您实际上可以从外部 iframe 访问 iframe 的 Document 对象。 （当然，假设它们来自同一个来源。）

const iframe = document.querySlector('iframe');
iframe.contentDocument.querySelector('body').whateveryouwant

也许最好的方法是使用 postMessage API。这使您可以根据需要以一种很好的隔离方式来回发送数据。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage