Zoom Web SDK UI not displayed after upgrade to v1.8.5

Description
The Zoom UI was working fine for v1.7.10. When I upgraded the SDK version to latest 1.8.5, The UI stopped working, nothing is displayed on the screen.
Downgraded again to 1.7.10 and it is working fine. All APIs are working.

Error
No error message shown in console.

Which version?
1.8.5

Device (please complete the following information):

  • Device: MacBook Pro
  • OS: MacOS BigSur 11.1
  • Version: Zoom SDK 1.8.5
  • Browser: Chrome

@tommy

1 Like

Hey @nilesh.bunde,

Thank you for reaching out to the Zoom Developer Forum. Are you seeing any errors in the browser console? Please share them if so. If not, are you able to share a public git repo demonstrating the issue?

Thanks,
Max

Hi @MaxM, Thanks for the reply.
I didn’t see any errors in console. Here is some code snippet. I’ll check if I can share the code in git with you.

this.zoomService
  .getSignatureForZoom(this.meetConfig)
  .subscribe((signature) => {
    
    this.signature = signature;
    const meetingConfig = {
      meetingNumber: this.meetConfig.meetingNumber,
      userName: this.meetConfig.userName,
      signature: this.signature,
      apiKey: this.meetConfig.apiKey,
      userEmail: '',
      passWord:
        typeof this.meetConfig.passWord === 'undefined'
          ? ''
          : this.meetConfig.passWord,
      success: (res) => {
        document.getElementById('welkin-patient-name').remove();
      },
      error: onFailure('Failed to join call after creating it'),
    };
    ZoomMtg.init({
      leaveUrl: this.meetConfig.leaveUrl,
      isSupportAV: true,
      debug: false, //optional
      isSupportChat: false,
      isSupportNonverbal: false,
      success: (res) => {
        ZoomMtg.join(meetingConfig);
      },
      error: onFailure('Failed to create Zoom call'),
    });
  }, onFailure('Failed to get signature to initiate call with'));

All 3 onFailure() functions are getting executed
Also I wonder if it is related to JQuery dependency?
I was checking the websdk-sample-angular

Commit:

Here tommy has removed JQuery dependency, but in out project we have used JQuery. Please let me know if that is the case.

Hey @nilesh.bunde,

Thank you for the update. Good catch! That’s correct, the latest version of the SDK (1.8.5) no longer requires jQuery as a dependency. Please try removing that and testing with a setup that’s closer to the sample app implementation to see if that resolves your issues. I’m not seeing anything in your code that would be causing this otherwise.

Thanks,
Max

Hi @MaxM,
I removed JQuery dependency from the code, but the issue is still there. I also tried updating Angular to the latest version v11.

Hey @nilesh.bunde,

Can you try checking your Z Index on your site. I wonder if the Web SDK is running in the background of your site since the jQuery logic has been update.

Try giving the Web SDK root element a z-index of 1000.

Let me know if that helps.

Thanks,
Tommy

Hi @tommy
I have already tried that before. UI is still not loaded. In SDK v1.7.10 when starting a video call, zoom starts loading its library files but in the latest version, these files are not getting loaded.

Here are the logs for Latest version if that is helpful
Console


Network tab

Did you resolve this problem?
I faced also problem.

No, Not yet :frowning:


Can you pls contact with developer team? :slight_smile:
I’m going to contact with them.
I should resolve this problem assp.

sorry I didn’t get which developer team?
If you are facing issue regarding adding language json.
eg. GET http://localhost:4200/node_modules/@zoomus/websdk/dist/lib/lang/en-US.json 404 (Not Found)
You can add ZoomMtg.i18n.load('en-US'); and it will work.

Ref. websdk/README.md at master · zoom/websdk · GitHub

Hey @mtroz310 , @nilesh.bunde ,

Checkout this thread on the language path issue:

Let me know if that helps! :slight_smile:

Thanks,
Tommy

Hi @tommy,
I tried this fix but it is still not working. I don’t think this is related with lang. The code execution is not reaching in success method of
ZoomMtg.init({ success: (res) => {
I was able to load en-US
See this screenshot

Hey @nilesh.bunde ,

If the ZoomMtg.init function is not being called, please ensure you have called the preload functions before hand, example (lines 7 and 8):

Thanks,
Tommy

Hi @tommy,
I tried this solution but it is still not working. I tried adding

ZoomMtg.setZoomJSLib('https://source.zoom.us/1.8.5/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

in ngOnInit and constructor as well. It is getting loaded as shown in the console screenshot in above comment.
[Zoom Web SDK UI not displayed after upgrade to v1.8.5 - #8 by nilesh.bunde]

ZoomMtg.init function is getting called but it immediately goes to onFailure('Failed to get signature to initiate call with'));

Hey @nilesh.bunde,

Anyway you can provide your code in a github repo, or a sample repo with the issue so we can take a look?

Thanks,
Tommy

Hi @tommy,

I’m on the same engineering team as @nilesh.bunde - thanks so much for your help with this issue so far.

Here is a sample repo which we have created, starting from the Zoom sample repo and adding enough of our code to demonstrate the issue with Create Meeting.

All of our changes are in the most recent commit in this repo.

Can you please provide more troubleshooting support? This is still an active issue for us as our integration is not useable.

I’d be happy to provide more information or answer any questions as needed.

Thanks again,
Rey

Thanks @rey.katz ,

I will take a look and see what issues I find! :slight_smile:

-Tommy

1 Like

Hi @tommy,
Thank you so much for the help you offered over video call.

I watched the recording, It was very informative.

I implemented the changes suggested and tested the APP, but unfortunately it is still not working.

  1. move ZoomMtg.preLoadWasm(); and ZoomMtg.prepareJssdk();
    i. Moved these right after imports
    ii. Libraries are getting loaded as expected but the meeting UI is not loaded

    pre load wasm success: https://source.zoom.us/1.8.5/lib/av/6206_audio.encode.wasm
    pre load wasm success: https://source.zoom.us/1.8.6/lib/av/6290_video.decode.wasm

    iii. So I don’t think this is the problem, We have’d tried this before as well

  2. Use CSS to hide/show the #zmmtg-root element instead of javascript.
    i. Tried using Show/Hide using CSS display: none/block

  3. If there are two copies of the Web SDK
    i. We are using CDN only

  4. #zmmtg-root element has a large enough z-index
    i. Tried with z-index > 1500
    ii. Also tried removing our UI completely

  5. Problem with Angular 11?
    i. We were previously using Angular 8 (Didn’t work for latest SDK), we updated to Angular 11 (Staging) to check if the problem is resolved but no luck with Angular 11 as well

  6. (Staging and Prod) on the same page, try disabling one of those apps
    i. I disabled other APPs except staging but still it’s not working for Staging
    ii. I don’t think it is related with having two APPs running on same page since on Local we have only one APP running but it’s not working for the latest SDK

Tried removing plugins which we have used, Also tried removing our UI completely and directly call createZoomMeeting to avoid any CSS or UI overlapping related problems but it is still not loading their UI.

Hey @nilesh.bunde ,

Happy to hear the meeting was helpful!

Are you using two different versions? That could also cause some issues.

I can help debug in the repo shared above, is that still a good example of the issue you are facing?

Thanks,
Tommy