从不同的子域访问沙盒 iframe 中的相机和麦克风

Question

我有使用 twilio javascript SDK 的基本视频聊天 nodeJS webapp

video.xyz.com

我正在尝试将其添加到在不同网络服务和子域上运行的 webapplet 的 iframe

demo.xyz.com

当我直接运行时，浏览器显示摄像头和麦克风访问提示，并且工作正常。但是在 iframe 中，我无法访问相机和麦克风。

两个 webapplet 都在相同的端口上运行，但在不同的子域上。

我尝试document.domain在视频聊天应用程序上设置以匹配将添加 iframe 的父页面应用程序，但没有让它起作用。我在 chrome 中收到此错误：

"Uncaught DOMException: Failed to set the 'domain' property on 'Document': Assignment is forbidden for sandboxed iframes."

我确实有允许麦克风和相机属性。

<iframe allow="camera; microphone" sandbox="allow-forms allow-scripts" src="https://video.xyz.com"></iframe>

我需要做什么才能在 iframe 中访问相机？哪个 Web 应用程序需要进行此更改？这需要CORS吗？

提前致谢。任何帮助，将不胜感激。

Answer 1

只需阅读https://groups.google.com/forum/#!topic/bigbluebutton-dev/jauJm_sBbU8

这以前有效：

<iframe src="example.com" allow="camera; microphone"/>

就我而言，该网页有一个 HTTP 响应标头：“Content-Security-Policy: child-src 'self' *;” 并且 Iframe 中的 URL 来源与其父级的 URL 来源不同。

但是现在我们应该这样做：（在 Chrome 版本 83.0.4103.61 中测试）

<iframe src="example.com" allow="camera https://example.com; microphone https://example.com"/>

Answer 2

小菜一碟：

<iframe
       title="Open identification process"
       src="xxx.com"
       frameBorder="0"
       width="600"
       height="800"
       allow="camera; microphone"
     />