Video not working on iOS Safari with Web SDK

Meeting SDK Web
1

Description
We have a Zoom integration in our React App using an iFrame, getting scripts from CDN, and using Client view.
Everything works fine on Desktop browsers and Android, but on iOS Safari Video is not working (camera cannot be activated, and permission is never prompted).

Which Web Meeting SDK version?
2.12.2

Smartphone (please complete the following information):

  • Device: iPhone 6s
  • OS: iOS 14.4.1

Additional context
We get the following errors in console:

  • Unhandled Promise Rejection: [object Event] (from zoom-meeting-2.12.2.min.js)
  • Unhandled Promise Rejection: AbortError: The operation was aborted. (native code)
  • Unhandled Promise Rejection: TypeError: self.crypto.randomUUID is not a function. (In ‘self.crypto.randomUUID()’, ‘self.crypto.randomUUID’ is undefined) (from zoom-meeting-2.12.2.min.js)
  • Error when trying to check for local RTC peer connection: TypeError: n.addStream is not a function. (In ‘n.addStream(h)’, ‘n.addStream’ is undefined) (from /lib/av/1502_js_media.min.js)
  • Error when trying to determine support for VP9 codec: TypeError: Type error (from /lib/av/1502_js_media.min.js)
2

you need iOS/iPadOS/Safari 15.4 or newer for zoom in the browser

the javascript function “crypto.randomUUID” is not availble for iOS below

3

I’ve upgraded the device to iOS 15.7.6.

It’s still not working, we now have a permission prompt for using microphone and camera but then, nothing is displayed.
It seems that the camera preview and join button are in the DOM but not visible on screen due to the size of the div #content_container wich size is 1100px.
We do not have this behavior anywhere else (Windows/Android/Mac), only on iPhone.

We also have those errors in console:

  • Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. (native code)
  • Unhandled Promise Rejection: [object Event] (from zoom-meeting-2.12.2.min.js)
4

but still - one step further (to the next error)

you should check if it’s a problem of the SDK or the complete zoom browser solution

try the zoom non SDK web version on zoom.us

invite link → Popup “Allow this site to open …” → Cancel → Join from your browser

if there is the same error - we can stop looking for the errors in the SDK

5

On Desktop I have a link to join from browser, but not on iOS… And when I click on Start Meeting it says “Safari cannot open the page because the address is invalid.” (actual sentence is in french “Safari ne peut pas ouvrir la page car l’adresse n’est pas valide.”).

But I don’t think that is the actual issue.
As I said, I think it’s an UX one, here is the DOM part that seems odd:

<div id="content_container" class="preview-video main-content" style="background-color: white; height: 212px; width: 1100px; display: flex; justify-content: center; align-items: center; overflow: hidden scroll;">
  <span></span>
  <div id="zmmtg-preview"></div>
  <div id="content">
    <span id="previewOptions" value="7"></span>
    <div class="mini-layout-body" style="margin: 50px auto auto; padding-bottom: 0px; justify-content: center; display: flex; color: rgb(34, 34, 48); font-size: 24px; font-weight: 700; cursor: default;">
      <div class="form-group">
        <div class="mini-layout-body-title">Aperçu vidéo</div>
      </div>
    </div>
    <div class="preview-video preview-video2 preview-mobile" style="width: 254px; height: 143px;">
      <!-- Preview video is here -->
    </div>
    <div class="mini-layout-body" style="margin: 50px auto auto; padding-bottom: 0px; justify-content: center; display: flex;">
      <!-- Join button is here -->
    </div>
  </div>
</div>

We can see that the div #content_container has a width of 1100px, which make the preview video and join button appear on the right of the screen, thus not visible to the user.
I don’t understand why the SDK compute this size so wide. I have this behavior only on iOS…

6

Ok, so the width at 1100px comes from style injected by the SDK:

html, body 
{
	height:100%;
	width:100%;
	min-width:1100px;
	overflow:hidden;
	font-size:16px;
	padding:0;
	margin:0;
	font-family:"Open Sans";
	color:#4a4a4a
}

On other Windows or Android devices, there is the same style but content_container div size is well computed.
I have no idea why it’s not the same behavior on iOS…

Any idea?

7

“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

8

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