accessing camera and mic in sandboxed iframe from different subdomain

Question

I have basic video chat nodeJS webapp using twilio javascript SDK

video.xyz.com

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

demo.xyz.com

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.

Both webapplets are running on same port but different subdomains.

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>

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.

Answer 1

Just read https://groups.google.com/forum/#!topic/bigbluebutton-dev/jauJm_sBbU8

This worked before:

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

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.

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"/>

Answer 2

Piece of cake:

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