Question

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

video.xyz.com

我试图在运行在不同Web服务和子域上的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响应标头： “内容安全策略：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"
     />

从不同子域访问沙盒iframe中的摄像头和麦克风

2 个答案: