"Loading..." popup when switching between view modes / activating screen sharing

Description

When sharing screen on Chrome 95 on Linux, the screen sharing works flawlessly, but a “loading…” black popup remains on the screen what disappears after clicking at another element.
Otherwise the meeting works well with all the features, that are available in web mode, is it something on our side that results in this bug? Shall we try API version 2.0.1 or is it still a known issue?

Browser Console Error

Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.
zoom-meeting-1.9.9.min.js:2 Zoom support you browser. Chrome/95.0.4638.69
zoom-meeting-1.9.9.min.js:2 You browser support below features
zoom-meeting-1.9.9.min.js:2 prepareJssdk change to prepareWebSDK
zoom-meeting-1.9.9.min.js:2 pre load wasm success: https://source.zoom.us/1.9.9/lib/av/1502_audio.encode.wasm
zoom-meeting-1.9.9.min.js:2 pre load wasm success: https://source.zoom.us/1.9.9/lib/av/1502_video.simd.wasm
zoom-meeting-1.9.9.min.js:2 [Deprecation] The ScriptProcessorNode is deprecated. Use AudioWorkletNode instead. (https://bit.ly/audio-worklet)
e @ zoom-meeting-1.9.9.min.js:2
1502_js_media.min.js:1 sharing decode fileURL: https://source.zoom.us/1.9.9/lib/av/1502_sharing_mtsimd.min.js
1502_js_media.min.js:1 https://source.zoom.us/1.9.9/lib/av/1502_video_mtsimd.min.js
1502_js_media.min.js:1 MSTF support 720p!
32c7a128-2739-4364-a355-92dcac9d58c0:1 ready to start!
32021520-289d-46e4-af3c-1b9190e1af3d:1 ready to start!
1eb15737-818e-4e4d-8c79-a81b61e0a20c:1 ready to dec video!
10ffeb38-1600-49b6-8ea2-486d89f39bc4:1 ready to dec video!
32021520-289d-46e4-af3c-1b9190e1af3d:1 JsAudioDec.js receive startMedia
32c7a128-2739-4364-a355-92dcac9d58c0:1 JsAudioDec.js receive startMedia
32c7a128-2739-4364-a355-92dcac9d58c0:1 Open_Audio_WebSocket_Connect
32021520-289d-46e4-af3c-1b9190e1af3d:1 Open_Audio_WebSocket_Connect
3acb12c7-19da-4ade-9f5f-6c2ade379376:1 Open_Sharing_WebSocket_Connect
2b277cc3-d163-48b1-a6b4-b12bfab8dc02:1 Open_Sharing_WebSocket_Connect
10ffeb38-1600-49b6-8ea2-486d89f39bc4:1 Open_Video_WebSocket_Connect
1eb15737-818e-4e4d-8c79-a81b61e0a20c:1 Open_Video_WebSocket_Connect
1eb15737-818e-4e4d-8c79-a81b61e0a20c:1 consume interval 3
1502_js_media.min.js:1 change capture resolution to 1280 720
DevTools failed to load source map: Could not load content for https://source.zoom.us/1.9.9/lib/webim.min.js.map: System error: net::ERR_BLOCKED_BY_RESPONSE
DevTools failed to load source map: Could not load content for https://source.zoom.us/1.9.9/css/bootstrap.css.map: System error: net::ERR_BLOCKED_BY_RESPONSE

Which Web Meeting SDK version?
1.9.9

Meeting SDK Code Snippets
The video call sits in an iframe:

 if (isMobileTablet()) {
          videoContainerElement.html('<a href="' + meetingMobileUrl + '">' + mobileJoinTitle + '</a>');
        }
        else {
          // https://devforum.zoom.us/t/all-modern-browsers-reject-camera-and-microphone-when-loading-through-same-origin-iframe-bug-clearly-visible-in-zoom-web-sdk-example-app/28171/5
          videoContainerElement.html('<iframe sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation" allow="microphone; camera; fullscreen;" class="h-full w-full" src="' + drupalSettings.videoMeeting.zoomFrameUrl + '?mn=' + drupalSettings.videoMeeting.meetingId + '&signature=' + drupalSettings.videoMeeting.signature + '&name=' + drupalSettings.videoMeeting.userName + '&email=&pwd=' + drupalSettings.videoMeeting.meetingPassword + '&role=' + role + '&lang=en-US&china=0&apiKey=' + drupalSettings.videoMeeting.jwtApiKey + '&leaveUrl=' + drupalSettings.videoMeeting.leaveUrl + '">');
}

The JS part inside the iframe:

window.addEventListener('DOMContentLoaded', function (event) {
  websdkready();
});

function websdkready() {
  var testTool = window.testTool;
  // get meeting args from url
  var tmpArgs = testTool.parseQuery();
  var urlParams = new URLSearchParams(window.location.search);
  var leaveUrl = urlParams.get('leaveUrl');

  var meetingConfig = {
    apiKey: tmpArgs.apiKey,
    meetingNumber: tmpArgs.mn,
    userName: (function () {
      if (tmpArgs.name) {
        try {
          return testTool.b64DecodeUnicode(tmpArgs.name);
        } catch (e) {
          return tmpArgs.name;
        }
      }
      return (
        "CDN#" +
        tmpArgs.version +
        "#" +
        testTool.detectOS() +
        "#" +
        testTool.getBrowserInfo()
      );
    })(),
    passWord: tmpArgs.pwd,
    leaveUrl: leaveUrl,
    role: parseInt(tmpArgs.role, 10),
    userEmail: (function () {
      try {
        return testTool.b64DecodeUnicode(tmpArgs.email);
      } catch (e) {
        return tmpArgs.email;
      }
    })(),
    lang: tmpArgs.lang,
    signature: tmpArgs.signature || "",
    china: tmpArgs.china === "1",
  };

  // a tool use debug mobile device
  if (testTool.isMobileDevice()) {
    vConsole = new VConsole();
  }
  if (ZoomMtg.checkSystemRequirements() === false) {
    alert("Check Zoom system requirements!");
    window.location.href = 'https://support.zoom.us/hc/en-us/articles/204003179-System-requirements-for-Zoom-Rooms';
  }

  // it's option if you want to change the WebSDK dependency link resources. setZoomJSLib must be run at first
  // ZoomMtg.setZoomJSLib("https://source.zoom.us/1.9.9/lib", "/av"); // CDN version defaul
  if (meetingConfig.china) {
    ZoomMtg.setZoomJSLib("https://jssdk.zoomus.cn/1.9.9/lib", "/av"); // china cdn option
  }
  ZoomMtg.preLoadWasm();
  ZoomMtg.prepareJssdk();
  function beginJoin(signature) {
    ZoomMtg.init({
      leaveUrl: meetingConfig.leaveUrl,
      webEndpoint: meetingConfig.webEndpoint,
      disableCORP: !window.crossOriginIsolated, // default true
      // disablePreview: false, // default false
      success: function () {
        ZoomMtg.i18n.load(meetingConfig.lang);
        ZoomMtg.i18n.reload(meetingConfig.lang);
        ZoomMtg.join({
          meetingNumber: meetingConfig.meetingNumber,
          userName: meetingConfig.userName,
          signature: signature,
          apiKey: meetingConfig.apiKey,
          userEmail: meetingConfig.userEmail,
          passWord: meetingConfig.passWord,
          error: function (res) {
            console.error(res);
          },
        });
      },
      error: function (res) {
        console.error(res);
      },
    });

  }

  beginJoin(meetingConfig.signature);
};

Screenshots

Device (please complete the following information):

But it was reproduced on Mac too.

Hey @aron_gizra,

Thank you for reaching out to the Zoom Developer Forum. Currently, the Web SDK doesn’t support being displayed in an iframe.

As a quick test, I would try the Sample Web App at the latest version (2.0.1) to see if you encounter the same issues. That app doesn’t use an iframe so it should be a good test.

You can also use that app as a reference for how to display the SDK directly on the page.

Let me know if that helps.

Thanks,
Max

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