从不同子域访问沙盒iframe中的摄像头和麦克风 [英] accessing camera and mic in sandboxed iframe from different subdomain

问题描述

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

I have basic video chat nodeJS webapp using twilio javascript SDK

video.xyz.com

video.xyz.com

我试图在运行在不同Web服务和子域上的Webapplet的iframe中添加

which I am trying to add in a iframe of a webapplet running on different webservice and sub domain

demo.xyz.com

demo.xyz.com

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

Browser shows Camera and microphone access prompt when i run directly and it works fine. But inside iframe i am not able to access camera and mic.

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

Both webapplets are running on same port but different subdomains.

我尝试在视频聊天应用程序上设置document.domain，以匹配将要添加iframe的父页面应用程序，但没有成功. 我在Chrome中收到此错误:

I have tried setting document.domain on video chat app to match parent page app where iframe will be added, but didn't get that to work. I get this error in chrome:

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

我确实具有允许麦克风和摄像头属性.

I do have allow mic and camera attribute.

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

我需要做什么才能在iframe中获得摄像头访问权限?哪个Web应用程序需要此更改?这需要CORS吗?

What do i need to do get camera access in iframe? Which web app will need this change? Does this need CORS?

先谢谢了.任何帮助将不胜感激.

Thanks in advance. Any help would be appreciated.

推荐答案

只需阅读此方法之前曾起作用:

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

在我的情况下，该网页具有HTTP响应标头: 内容安全策略:child-src'self'*;" 而且，iframe中网址的来源与其父网址的来源不同.

In my case , the webpage has a HTTP response header: "Content-Security-Policy: child-src 'self' *;" And the URL's origin in Iframe is not the same as its parent's URL origin.

但是现在我们应该这样做:(已在Chrome版本83.0.4103.61中测试)

But now we should do like this:(tested in Chrome Version 83.0.4103.61 )

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

这篇关于从不同子域访问沙盒iframe中的摄像头和麦克风的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！