javascript - 在站点导航时保持 WebRTC 视频流处于事件状态

标签 javascript html iframe

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

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

感谢您的任何提示!

最佳答案

iframe 可以工作。

Are there any drawbacks as for browser features when using iFrame?

主要问题是在 iframe 加载时您无法真正控制页面的呈现。例如,当上一页被撕毁并替换时,用户可能会看到短暂的纯白色。

Is there anything I absolutely cannot do in iFrames?

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

Do iFrames share the (PHP) session and cookies with the "main" wrapper

是的

How could the JavaScript codes of the wrapper and the iFrames communicate with each other?

您实际上可以从外部 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

关于javascript - 在站点导航时保持 WebRTC 视频流处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58736692/

相关文章:

javascript - 如何检测它是否是用户查看的我网站的第一页?

javascript - 将 npm 中的 js 库添加为 Play 2.0 应用程序的依赖项

javascript - 访问 Controller 中的 $rootScope 方法

javascript - CloudKit.js 的安全性

javascript - iFrame 错误地报告内部元素高度

javascript - 如何调整跨域url中iframe的大小

javascript - 如果元素的后代包含特定单词,则执行代码的 Jquery

javascript - Masonry jQuery 插件和空格

html - Chrome 中的表单 - 奇怪的 css 渲染

javascript - 从 iframe 关闭 Angular md-dialog