All modern browsers reject camera and microphone when loading through SAME origin iframe - Bug clearly visible in Zoom Web SDK example app

Description
I am integrating a simple zoom app into a web page, which I want to load into another page via a same-origin iframe, to avoid conflicts with various dependencies of zoom (lodash and jquery) in the “parent page”

Error

  • On all modern browsers tested (chrome, safari, chromium/brave, firefox) camera and microphone are rejected in same-origin iframe.
  • “Your browser doesn’t support using computer’s Audio device, please upgrade your browser to the latest version.”
  • “Cannot detect your camera, please check the device and connection and try again.”
  • Loading the same html page in its own tab works flawlessly

Which version?
Tested both: 1.7.9 (CDN version) and ^1.8.0 (npm installed module)

To Reproduce
Simply clone the Zoom web SDK example app and run it. Use the “join iframe” button on any modern browser.

Additional context
My actual app loads zoom via the CDN method in a plain html file, then uses some basic js lifted from example app to join straightaway. But that isn’t really important, you can reproduce this bug simply by running the Zoom example app.

Screenshots


I can only upload one file because I’m a new user, so ill copy-paste console text from sample app:

  • Zoom support you browser. Chrome/84.0.4147.135
  • You browser support below features
  • {“browserInfo”:“Chrome/84.0.4147.135”,“browserName”:“Chrome”,“browserVersion”:“84.0.4147.135”,“features”:[“viewSharing”,“screenShare”,“computerVideo”,“computerAudio”,“callIn”,“callOut”,“chat”,“closedCaption”,“QA”]}

Hey @tlock,

We will look into why the browser can’t recognize the camera and mic

For now please continue using the Web SDK in your HTML page and not in an iFrame.

Thanks,
Tommy

Hey @tlock,

The Web SDK currently does not support being embedded in an iFrame. We have removed the iFrame example in the sample app. Apologies for the confusion.

Thanks,
Tommy

Hi @tommy

Until now it was officially supported (from your support team and from your demo application) and suddenly that support is removed.
Even if this kind of abrupt and sudden change is a problem in my opinion, i don’t want to debate about that here.
But the main reason why people like @tlock or us started integrate zoom within an iFrame was :

I am integrating a simple zoom app into a web page, which I want to load into another page via a same-origin iframe, to avoid conflicts with various dependencies of zoom (lodash and jquery) in the “parent page”

Are there any plans regarding these problems ?
Now that we should not embed zoom in an iFrame anymore this kind issue become more critical.

2 Likes

Honestly, @tommy I mean no disrespect to you, personally, but marking this as “solved” is ridiculous.

The iframe is same origin. It should work out-of-the-box, like anything else because a same-origin frame is respected by all browsers as if it were just the same html page. There simply must be additional code in the zoom dependencies which is blocking it.

But @nvivot I got around it by updating my dependencies to 1.7.10 from 1.7.9 (even though this version isn’t even listed in the CDN documentation), and added the following attrs to the iframe:

 sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation"
allow="microphone; camera; fullscreen;"

Tommy, Nvivot: Note that the sandbox attribute is intended to treat same-origin iframes the way cross-origin iframes are treated, locking down features. Putting the attr there locks out all features, while specifying a comma separated list of features will individually turn them on.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox

This absolutely should not be required for same-origin iframes, and I recommend that the Zoom developers look into this, rather than closing the topic as “solved” and removing the iframe from the sample app. This is likely the breadcrumb the Zoom devs need to restore support for same-origin iframes, which I repeat: is basic browser functionality.

1 Like

@tlock

This was already “documented” somewhere and required to work yes:

sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"

But this should not be needed at all as we are in same origin. It’s only required for cross origin:

allow="microphone; camera; fullscreen;"

We don’t have any problems with camera & microphone with just the first set of configuration, or at least not as obvious as the non supported message you got. We are also using 1.7.10 but this is working fine with previous version as well. (1.7.8 for example)

1 Like

Hey @tlock, @nvivot,

Thanks for your feedback. We are working to make the Web SDK more customizable, not override styles, and not have dependencies like jQuery.

We realize the current functionality is not ideal for custom implementations, and are working to improve it. :slight_smile:

Thanks,
Tommy

Hi @tommy @michael_p.zoom, first of all thanks a lot for your efforts on fixing this microphone issue, though as off today the issue is not fixed in the Safari browser it seems. I am having a simple HTML page not iFrame included and using the CDN version (1.7.9) of zoom scripts but still getting the pop-up message about incompatibility for meetings.

I am loading all the CDN resources as documented in the WebSDK
$js_files = array(
'https://source.zoom.us/1.7.9/lib/vendor/react.min.js',
'https://source.zoom.us/1.7.9/lib/vendor/react-dom.min.js',
'https://source.zoom.us/1.7.9/lib/vendor/redux.min.js',
'https://source.zoom.us/1.7.9/lib/vendor/redux-thunk.min.js',
'https://source.zoom.us/1.7.9/lib/vendor/jquery.min.js',
'https://source.zoom.us/1.7.9/lib/vendor/lodash.min.js',
'https://source.zoom.us/zoom-meeting-1.7.9.min.js',
);

then loading inside the html tags, basically similar to the sample app
image

then initiating with the all the required ZoomMtg.join values
ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.7.9/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

ZoomMtg.init({

Now basically we are stuck with the App because majority of our clients uses the Mac/ iPhone and we need to sort this out quick.

Do we have any update/ upgrade to address this issue? I was about to test with the npm but as per this thread and most of the other threads, having the resources locally also not helping.

Even-though there are claims that this issues are fixed, the official doc says its not…

Also please note, joining through phone’s browser also not supported. In our usecase joining through the FireFox is seamless.

Please advice!

Hey @samkrish.usa,

Currently, joining with computer audio is not supported with the Web SDK in Safari:

The camera should work though.

Thanks,
Tommy

Hi Tommy,

So while iFrame is no longer supported, do you have a documentation on recommended implementation of how to embed Zoom Web SDK into our own application?

Regards,
Lara

I’m working on this project, but I could use some help

FYI, this may not solve your problem, but I have learned that browser access to the camera and microphone only seems to be supported when serving the page over https. In my case, I had to deploy to GitHub Pages to test.

Thanks for sharing @mlininkl! :slight_smile:

@lfrancia, feel free to checkout our Sample apps and local install which show how to use the Web SDK in your own app.

-Tommy

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.