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.
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.
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:
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.
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)
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
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.
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?
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.