Unable to init meeting

Description
I’m experiencing the same issue as this post, where after generateSignature() is called and returns a signature, init() runs but calls neither success() nor error(); nothing happens.

Error
There is no error that outputs. When I set debug: true in the init config object, this prints in the console:

audioPanelAlwaysOpen: false
debug: true
disableCallOut: false
disableInvite: false
disableJoinAudio: undefined
disableRecord: false
leaveUrl: "http://localhost:3000/dossier"
showMeetingHeader: true

Which version?
1.7.0

All on latest Firefox and Chrome versions

Code
Since this is proprietary software, I can’t post the full source code, but can post snippets. I’m working in a react application and in my index file, I do the following:

import '@zoomus/websdk/dist/css/bootstrap.css';
import '@zoomus/websdk/dist/css/react-select.css';
import { ZoomMtg } from '@zoomus/websdk';

Here’s the code I define in a class elsewhere

generateSignature = () => {
        return new Promise((resolve, reject) => {
            ZoomMtg.generateSignature({
                meetingNumber: xxxxxxxxxx, // normally an int of the meeting ID
                apiKey: zoomSdkLaunchKey(),
                apiSecret: zoomSdkLaunchSecretKey(),
                role: 0,
                success(res) {
                    resolve(res.result);
                },
                error(err) {
                    reject(err);
                }
            });
        });
    }

    initMeeting = (signature) => {
        return new Promise((resolve, reject) => {
            ZoomMtg.init({
                debug: true,
                leaveUrl: 'http://localhost:3000/post-meeting-page',
                isSupportAV: true,
                success() {
                    resolve(signature);
                },
                error(res) {
                    reject(res);
                }
            });
        });
    };

    joinMeeting = (signature) => {
        return new Promise((resolve, reject) => {
            ZoomMtg.join(
                {
                    meetingNumber: xxxxxxxxxx,
                    userName: 'John',
                    signature,
                    apiKey: zoomSdkLaunchKey(),
                    userEmail: 'john@example.com',
                    success() {
                        resolve();
                    },
                    error(res) {
                        reject(res);
                    }
                }
            );
        });
    }

I call those methods via the following:

zoomService.generateSignature()
      .then(res => zoomService.initMeeting(res))
      .then(res => zoomService.joinMeeting(res))
      .then(res => {
        $('#zmmtg-root').show();
      }).catch(err => {
        console.log(err);
      });

The reason for that last $('#zmmtg-root').show(); is because I hide it in index.js initially:

$("#zmmtg-root").hide();

Just so the rest of the rendered UI can be visible.

Additional notes
I’ve tried my API key/secret in the sample app and used a valid meeting ID and it did launch the client successfully. I’m stumped as to why this isn’t working. I didn’t include any additional tags or ones in my index.html file; I simply following the guide by including an import { ZoomMtg } from '@zoomus/websdk'; at index.js

Assistance would be greatly appreciated.

Hey @jvall,

Can you try passing in a param for the success function on the ZoomMtg.init function and see if you get a response:

initMeeting = (signature) => {
        return new Promise((resolve, reject) => {
            ZoomMtg.init({
                debug: true,
                leaveUrl: 'http://localhost:3000/post-meeting-page',
                isSupportAV: true,
                success(data) {
                    console.log(data)
                    resolve(signature);
                },
                error(res) {
                    reject(res);
                }
            });
        });
    };

Thanks,
Tommy

Thanks for the reply @tommy, unfortunately I didn’t get a response with the code sample you provided. Same result as before.

Hey @jvall,

Can you confirm the init function is being called?

Thanks,
Tommy

@tommy yes, I set breakpoints and can confirm init() is being called.

I tried unminifying as much of the Zoom SDK as I could and even stepped into its init() function. It’s definitely being called but it’s still hard to make sense of it since the source is pretty blackboxed.

Hey @jvall,

I wonder if the promise chain is messing things up. Can you implement the Init and Join functions similar to the Sample App?

ZoomMtg.init({
  debug: true,
  leaveUrl: 'http://localhost:3000/post-meeting-page',
  isSupportAV: true,
  success() {
    ZoomMtg.join({
      meetingNumber: xxxxxxxxxx,
      userName: 'John',
      signature,
      apiKey: zoomSdkLaunchKey(),
      userEmail: 'john@example.com',
      success() {
        resolve();
      },
      error(res) {
        reject(res);
      }
    });
  },
  error(res) {
    reject(res);
  }
});

Thanks,
Tommy

Still the same result. I copy-and-pasted the nested-style code from the sample app and init still doesn’t hit the breakpoints on success or error.

Hey @jvall,

Try adding these following lines after importing ZoomMtg:

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

And here is the a sample react Web SDK app:

Thanks,
Tommy

Hi, jvall. Did you find any resolution to this? I’m experiencing the same issue in a React app I’m working on. Hope your help

Hey @qiumeihui,

Please provide more details about your issue.

Make sure to include the following lines:

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

Thanks,
Tommy

What ended up solving it was calling those two lines that Tommy posted and then including all of the required assets via the CDN

The information contained in this E-mail message and its attachments is privileged and/or confidential, and may be protected from disclosure. Please be aware that any other use, printing, copying, disclosure or dissemination of this communication may be subject
to legal restriction or sanction.

Hey @jvall,

Glad using the CDN solved the issue! :slight_smile:

Thanks,
Tommy

Hey @tommy.
I’m sure use the following lines:

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/1.7.0/lib', '/av');

But When the function ZoomMtg.init() executes, it directly jumps out and there are no errors here. I want to know what causes the init function to jump out.

Thanks,
Qiumeihui

Hey @qiumeihui,

Are there any errors in the browser console?

Can you try having the setZoomJSLib function first?

ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/1.7.0/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

Thanks,
Tommy

@tommy Hey tommy.
I find a strange phenomenon here.
I used Web SDK in React.

  openLive() {
        ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/1.7.0/lib', '/av');
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareJssdk();
        //  chinese
        $.i18n.reload('zh-CN');

        const meetConfigs = {
            apiKey: API_KEY,
            apiSecret: API_SECRET,
            meetingNumber: 5616998717,
            role: 0, // 0 to join the meeting,  1 to start the meeting
            leaveUrl: '', 
            userName: 'test WebSDK', 
        };

        const signature = ZoomMtg.generateSignature({
            meetingNumber: meetConfigs.meetingNumber,
            apiKey: meetConfigs.apiKey,
            apiSecret: meetConfigs.apiSecret,
            role: meetConfigs.role,
            success(res) {
                console.log(res.result);
            },
        });

        ZoomMtg.init({
            debug: true, // optional
            leaveUrl: '', // required
            isSupportAV: true, // optional,
            success: () => {
                console.log('init success!!!!');
                ZoomMtg.join({
                    signature,
                    meetingNumber: meetConfigs.meetingNumber,
                    userName: meetConfigs.userName,
                    userEmail: '',
                    passWord: '',
                    apiKey: meetConfigs.apiKey,
                    success(res) {
                        console.log(res);
                    },
                    error: error => {
                        console.log(error);
                    },
                });
            },
            error: error => {
                console.log(error);
            },
        });
    }

When I use the code in the componentDidMount method of some components, the init method can execute normally and successfully join the meeting, but when used in the componentDidMount method of some components, the init method will directly jump It has been executed and no errors are printed. I want to know if this good and bad phenomenon is related to the execution time node of componentDidMount and the loading order of the dependency js library of the Web SDK

Hey @qiumeihui,

Did you mean to say a different method? What is the difference between the two scenarios?

Thanks,
Tommy

Hey @tommy.
In React, I used the Zoomtg.init method in componentDidmount of different components, but some of them succeeded and some failed. I don’t know if this is related to the order of the React life cycle mount.

Thanks,
Qiumeihui

Hey @qiumeihui,

I am guessing this is due to the Zoommtg.init being called before the resources load.

Maybe add a few second timeout to see if that fixes the issue.

Thanks,
Tommy

Hey @tommy .
I put the Zoomtg.init method in setTimeout, it working now.
Thank you very much for your suggestions. :grin:

Thanks,
Qiumeihui

2 Likes

Glad that worked! :slight_smile:

Happy to help!

Thanks,
Tommy

1 Like