Zoom web SDK stuck on 'Joining Meeting'

Question

I am trying to integrate the Zoom Web SDK onto my React App, I went through their documentation and followed the steps of their Sample App, but however - When I try to join A meeting from my App, It is stuck on Joining Meeting. as you can see from the image below. My code is as follows

import { ZoomMtg } from '@zoomus/websdk';
ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();
ZoomMtg.setZoomJSLib('node_modules/@zoomus/websdk/dist/lib', '/av');

`

       ZoomMtg.init({
            leaveUrl: <my-url>,
            isSupportAV: true,
            success: (success) => {
           
              ZoomMtg.join({
                signature: <signature-from-api>,
                meetingNumber: <meeting-number>,
                userName: <my-username>,
                apiKey: <my-apiKey>,
                userEmail: <my-email>,
                passWord: <mypassword>,
                role: 0,
              
                success: (success) => {
                  console.log(success);
                },
                error: (error) => {
                  console.log(error);
                }
              })
           
            },
            error: (error) => {
              console.log(error)
            }
          }) `

Answer 1

Please inspect the page and check for any errors in the network tab. The following can be an issue:

1. meetingNumber - your meeting number is not correct. Try giving a personal meeting number without any space.
2. signature- It better to generate a signature from the backend https://marketplace.zoom.us/docs/sdk/native-sdks/web/build/signature .Signature may not be your issue right now but if you have multiple participants, there is a high chance you will get time out or other issue.

Answer 2

I finally managed to solve this issue, it appears that the issue was caused by the role property on ZoomMtg.join object, after removing it, the issue was solved and I was able to join meetings.