Zoom WebSDK for Nuxt.js

Description
I am trying to implement a Zoom meeting window where the user can automatically join, using the Zoom Web SDK

Error
I am not getting any errors in the console, but I am getting a black screen with a “0”, and it seems no content is being loaded to the zmmtg-root component

Which version?
Web SDK 1.7.6

Screenshots

Additional context
My nuxt.config.js file’s script section:

script: [
      {
        src:
          'https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver',
        body: true,
      },
      ...,
      { src: 'https://code.jquery.com/jquery-3.5.0.min.js' },
    ],

My zoom-sdk.js plugin file:

    import { ZoomMtg } from '@zoomus/websdk';
    import Vue from 'vue';

   const zoomPlugin = {
      install: function(Vue, options) {
        console.log('checkSystemRequirements');
        console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
        ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.7.6/lib', '/av');
        Vue.prototype.$zoom = ZoomMtg;
        // console.log('Zoom INIT');
      }
    };

    Vue.use(zoomPlugin);

My ZoomVideo component conneciton code:

    this.$zoom.preLoadWasm();
    this.$zoom.prepareJssdk();

    const apiKey = process.env.platform.zoom.apiKey;
    const apiSecret = process.env.platform.zoom.apiSecret;
    console.log('API KEY', apiKey, 'API SECRET', apiSecret)

    const meetConfig = {
      apiKey: apiKey,
      meetingNumber: this.meeting.number,
      userName: username,
      password: this.meeting.password, // if required
      role: 0 // 1 for host; 0 for attendee or webinar
    };

    const zoom = this.$zoom;
    const signature = zoom.generateSignature({
      meetingNumber: meetConfig.meetingNumber,
      apiKey: apiKey,
      apiSecret: apiSecret,
      role: meetConfig.role,
      success: function(res){
        console.log(res.result);
      }
    });

    console.log(meetConfig)
    zoom.init({
      leaveUrl: "https://zoom.us",
      isSupportAV: true,
      success: function() {
        console.log('INIT SUCCESS')
        const joinConfig = {
          signature: signature,
          apiKey: meetConfig.apiKey,
          meetingNumber: meetConfig.meetingNumber,
          userName: meetConfig.userName,
          leaveUrl: "https://zoom.us",
          // password optional; set by Host
          passWord: meetConfig.password,
          success: function(res){
            console.log('join meeting success:', res);
          },
          error(res) {
            console.log('ERROR:', res)
          }
        }
        console.log(joinConfig)
        zoom.join(joinConfig)
      },
      error: function(res) {
        console.log(res);
      }
    })
1 Like

I am having similar issues as well. I receive a “Uncaught ReferenceError: $ is not defined” that is related to ZoomMtg from ‘@zoomus/websdk’ package. Not sure what to do.

I had that issue. The solution was to add jQuery as a static dependency to nuxt.config.

As for my issue - Had to turn off SSR for the video component with , and make sure to check if process.client === true before importing the @zoomus/websdk package

Happy to hear you figured out the issue @bambasolutions19! :slight_smile:

Thanks for sharing the solution!

@Tokyo123, let us know if this solution works for you.

-Tommy