Stuck on "Joining Meeting..." - Web SDK: 3.8.10 (Latest)

Description
Stuck on “Joining Meeting…” while using Web SDK: 3.8.10 on Google Chrome.

Browser Console Error
None. Neither success not error is triggered during join.

Which Web Meeting SDK version?
3.8.10 (Latest)

Meeting SDK Code Snippets

Backend (Python/Flask)

payload = {'appKey': CLIENT_ID, 'sdkKey': CLIENT_ID "mn": ID, "role": 0, "iat": int(time.time()), "exp": int(time.time())+4*3600, "tokenexp": int(time.time())+4*3600}
pyjwt = PyJWT()
encoded = pyjwt.encode(payload, CLIENT_SECRET, algorithm="HS256")
return render_template('meeting.html', signature = encoded)

meeting.html

<body>
    <script src="https://source.zoom.us/3.8.10/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/3.8.10/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/3.8.10/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/3.8.10/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/3.8.10/lib/vendor/lodash.min.js"></script>

    <script src="https://source.zoom.us/zoom-meeting-3.8.10.min.js"></script>
    <head>
      <link
        type="text/css"
        rel="stylesheet"
        href="https://source.zoom.us/3.8.10/css/bootstrap.css"
      />
      <link
        type="text/css"
        rel="stylesheet"
        href="https://source.zoom.us/3.8.10/css/react-select.css"
      />
    </head>
    
    <script>
        ZoomMtg.setZoomJSLib("https://source.zoom.us/3.8.10/lib", "/av");
        // loads dependent assets
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareWebSDK();
        // loads language files, also passes any error messages to the ui
        ZoomMtg.i18n.load("en-US");
        ZoomMtg.i18n.reload("en-US");

        const SdkKey = "<My Client ID>"
        const UserName = "<Name Provided in the App>";
        const MeetingNumber = "<Meeting Number>";
        const PassWord = "<Meeting Password>";
        const LeaveUrl = "<My Leave URL>";
        console.log(MeetingNumber);
        console.log(PassWord);

        navigator.permissions
        .query(
          { name: "camera" },
          { name: "microphone" }
          // { name: 'geolocation' }
          // { name: 'notifications' }
          // { name: 'midi', sysex: false }
          // { name: 'midi', sysex: true }
          // { name: 'push', userVisibleOnly: true }
          // { name: 'push' } // without userVisibleOnly isn't supported in chrome M45, yet
        )
        .then(function (permissionStatus) {
          console.log(permissionStatus.state); // granted, denied, prompt

          permissionStatus.onchange = function () {
            console.log("Permission changed to " + this.state);
            if (this.state == "granted")
              window.location.href = "/meeting";
          };
        });

        const Signature = "{{ signature }}";
        console.log(Signature)

        ZoomMtg.init({
            //debug: true,
            disableInvite: true,
            disableReport: true,
            leaveUrl: LeaveUrl, // https://example.com/thanks-for-joining
            isSupportAV: true,
            meetingInfo: [],
            success: (success) => {
              console.log("Success init");
              ZoomMtg.join({
               //debug: true,
                appKey: SdkKey,
                sdkKey: SdkKey,
                signature: Signature, // role in SDK signature needs to be 0
                meetingNumber: MeetingNumber,
                passWord: PassWord,
                userName: UserName,
                success: (success) => {
                  console.log("Success join");
                  console.log(success);
               },
               error: (error) => {
              console.log("A" + error + " B " + error.message);
              console.log(SdkKey);
              console.log(Signature);
              console.log(MeetingNumber);
              console.log(PassWord);
              console.log(UserName);
            },
          });
        },
        error: (error) => {
          console.log("Error: " + error);
        },
    });
    </script>
</body>

Device (please complete the following information):

  • Device: Web
  • OS: Windows 11
  • Browser: Chrome

Additional context
Only init is being triggered. Neither success nor error of join is being triggered. Also, the meeting is created from the same account from by which the app is created.

@donte.zoom It will be very kind of you if you may kindly guide through the solution.

@samudraganguly002017 have you succeeded to join a meeting before?
Do share a sample of your generated token here and tag me in your response

Yes. I have succeeded joining earlier. In fact, I was using it for more than a year. The web version was 3.1.6. Now, I have upgraded it to 3.8.10 and now it is not working.

Please find the signature generated below.

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcHBLZXkiOiJyM2pSSGdMY1F6NkVsT2F6cWdfbzZnIiwic2RrS2V5IjoicjNqUkhnTGNRejZFbE9henFnX282ZyIsIm1uIjoiODQ2OTY0OTMwNDIiLCJyb2xlIjowLCJpYXQiOjE3MjcxMDg1OTMsImV4cCI6MTcyNzEyMjk5MywidG9rZW5leHAiOjE3MjcxMjI5OTN9.vgVe05LfR9NpUqqVSS9AD57fkeubB9DulIH6IBC-cSw

@samudraganguly002017 you cannot use a production client id and client secret when you have not published you application yet.

You will need to use the client id and client secret in the development tab

I tried using the development ID and Secret and it still did not work. Is it because I have not shared the authorization URL and have been trying to make my users join using ID and password only? The meeting is hosted from the same account, but the people joining are external accounts. Is there any way that they can join the meeting normally without any authorization URL?

@samudraganguly002017
You do not need to use the authorization URL for your scenario.

Could you share another sample of your token?

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcHBLZXkiOiJ0c25FbENBdlNNR3c1M0dvWWVzWERBIiwic2RrS2V5IjoidHNuRWxDQXZTTUd3NTNHb1llc1hEQSIsIm1uIjoiODQ5MDg0MTQyMjkiLCJyb2xlIjowLCJpYXQiOjE3MjcyMzQ2MjAsImV4cCI6MTcyNzI0OTAyMCwidG9rZW5leHAiOjE3MjcyNDkwMjB9.tVpR-iXboTQtdnuk8xVs6oouu8m7GThUMhK3vIo5EwA

@samudraganguly002017

Please do use the client id and client secret in your General App’s development tab.
You cannot use Server to Server Oauth app’s client ID and client Secret for SDK Auth.

Please find the updated one. Still it is not working.

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcHBLZXkiOiJHUm5jMUZ2bFRrNnpLcmk0QlNZWUhBIiwic2RrS2V5IjoiR1JuYzFGdmxUazZ6S3JpNEJTWVlIQSIsIm1uIjoiODQ5MDg0MTQyMjkiLCJyb2xlIjowLCJpYXQiOjE3MjcyMzYwNzgsImV4cCI6MTcyNzI1MDQ3OCwidG9rZW5leHAiOjE3MjcyNTA0Nzh9.u-oTaY_HcffQ11AaNy6Lyaz7cmyL4BwBRpmGJE7uSPU

@samudraganguly002017 I’ve verified that this token works ok. If you are using web SDK, make sure your meeting Number and passcode are correct

Meeting Number and Passcode are absolutely correct. By the way, the app is not reviewed. Can this be a problem?

Just for context, neither is my app reviewed, nor published. I am hosting the meeting from the same account, but trying to join the meeting with no account (just display name in Web SDK). It is stuck on Joining Meeting… with no success or error callback. I am NOT using the authorization URL and trying to join using just ID and passcode.

@samudraganguly002017 can you refer to the same application found on github? The signature is valid, try to test it with the code sample.