Jitsi Meet IFrame API Not Working on iOS

[andrei-ziminov]

Description

I'm encountering an issue where the Jitsi Meet IFrame API does not work correctly on iOS devices. When trying to use a self-hosted instance of Jitsi within an iframe, it fails to function as expected on iOS. The exact same setup works perfectly on Android and desktop platforms, as well as when using the official Jitsi Meet URL (https://meet.jit.si). The issue seems to be specific to the iOS platform.

Environment Details

• Jitsi Meet Version: stable-9457-2
• Self-hosted on: Kubernetes
• Ingress Controller: Traefik
• Affected Devices: iOS (Safari and Chrome,Firefox)
• Working on: Android, Desktop (Windows, macOS)

Configuration

Here are the relevant configurations:

• Jitsi Config:

  - name: jitsi
  namespace: {{ .Values.namespace }}
  chart: ./charts/infrastructure/jitsi-helm
  version: 1.4.0
  values:
    - global:
        nameOverride: "jitsi"
    - publicURL: "https://jitsi.web.{{ .Values.domain }}"
    - web:
        enabled: true
        podAnnotations:
          consul.hashicorp.com/connect-inject: "true"
          consul.hashicorp.com/connect-service: "jitsi-web"
          consul.hashicorp.com/service-tags: "\
            traefik.enable=true,\
            traefik.http.routers.jitsi-web.entrypoints=websecure,\
            traefik.http.routers.jitsi-web.rule=Host(`jitsi.web.{{ .Values.domain }}`)"
    - jvb:
        enabled: true
        useHostPort: false
        useHostNetwork: false
        service:
          enabled: true
          type: ClusterIP
          externalIPs:
          externalTrafficPolicy:
        podAnnotations:
          consul.hashicorp.com/connect-inject: "true"
          consul.hashicorp.com/connect-service: "jitsi-jvb"
          consul.hashicorp.com/service-tags: "\
            traefik.enable=true,\
            traefik.http.routers.jitsi-jvb.entrypoints=websecure,\
            traefik.http.routers.jitsi-jvb.rule=Host(`jitsi.jvb.{{ .Values.domain }}`)" 
    - prosody:
        enabled: true
    - jicofo:
        podAnnotations: {}
    - jigasi:
        enabled: false
    - jibri:
        enabled: false

• Iframe Integration Code:

  <JitsiMeeting
        key={currentCall.conversationId}
        roomName={currentCall.conversationId}
        domain={CONFIG.jitsi.domain}
        configOverwrite={{
          startWithAudioMuted: true,
          startWithVideoMuted: true,
          prejoinConfig: {
            enabled: false,
          },
          disableSimulcast: false,
          disableThirdPartyRequests: true,
          participantsPane: {
            hideModeratorSettingsTab: true,
            hideMoreActionsButton: true,
            hideMuteAllButton: true,
          },
          enableWelcomePage: false,
          hideConferenceSubject: true,
          disableModeratorIndicator: true,
          disableProfile: true,
        }}
        interfaceConfigOverwrite={{
          TOOLBAR_BUTTONS: ['microphone', 'camera', 'fullscreen', 'hangup'],
          DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
        }}
        userInfo={{
          displayName: user?.displayName,
          email: user?.email,
        }}
        onApiReady={(externalApi) => {
          apiRef.current = externalApi;
        }}
        onReadyToClose={handleEndCall}
        getIFrameRef={(iframeRef) => {
          iframeRef.style.height = '100%';
          iframeRef.style.width = '100%';
          iframeRef.setAttribute(
            'sandbox',
            'allow-same-origin allow-scripts allow-forms allow-top-navigation-by-user-activation allow-popups allow-modals'
          );
          iframeRef.setAttribute('allow', 'camera; microphone; autoplay; fullscreen');
        }}
      />

Steps to Reproduce

1. Host a Jitsi instance on a Kubernetes cluster.
2. Attempt to embed the Jitsi Meet session using the IFrame API in a web app.
3. Access the web app on an iOS device using Safari or Chrome.
4. Observe that the Jitsi meeting fails to load or function correctly.

Expected Behavior

The Jitsi Meet session should load and function correctly within the iframe, allowing users to participate in video calls on iOS devices, just as it does on Android and desktop platforms.

Observed Behavior

The Jitsi Meet session fails to load or functions incorrectly when accessed via an iframe on iOS devices.

Additional Information

• The iframe includes necessary permissions and sandbox attributes (allow-same-origin, allow-scripts, allow-forms, etc.).
• The issue seems to be related to how iOS handles iframes and cross-origin requests.
• Directly accessing the self-hosted Jitsi instance outside of an iframe works without issues on iOS.

Causing this

Troubleshooting Steps Taken

• Verified that the issue is specific to iOS by testing on Android and desktop.
• Tested the same setup with the official Jitsi Meet URL, which works fine on iOS.
• Added appropriate CORS headers in the Nginx configuration.
• Attempted various iframe configurations, including different sandbox and allow attributes.

Questions/Help Needed

• Is this a known issue with the Jitsi IFrame API on iOS?
• Are there any additional configurations or workarounds that could resolve this issue on iOS devices?
• Could this be related to a specific iOS restriction, and if so, how can it be addressed?

Any insights or suggestions would be greatly appreciated. Thank you!

[saghul]

The console problems are unrelated.

Try the latest stable images, we fixed iOS WebView compatibility in the last release.

[andrei-ziminov]

Thank you very much. That solved it