Black Screen With No Errors on Nuxt JS App

Description
I’ve installed "@zoomus/websdk": "^1.9.1", on Vue/Nuxt JS App and configured zoom-sdk.js on nuxt.config.js file with client mode (No SSR).

In My meetings.vue file:

<template>

  <div class="meeting">

    <div class="container-zoom">

      <ZoomFrame :nickname="nickname" :meetingId="meetingId" :password="password" />

    </div>

  </div>

</template>

<script>

import ZoomFrame from "~/components/Zoom/ZoomFrame.vue";

export default {

  name: "app",

  data: function () {

    return {

      nickname: "My Nick Name",

      meetingId: "MY MEETING ID",

      password: "MEETING PASSWORD",

    };

  },

  components: {

    ZoomFrame,

  },

};

</script>

<style scoped>

.container-zoom {

  width: 70%;

  height: 100%;

}

</style>

In My ZoomFrame.vue file:

<template>

  <div>

    <div id="zmmtg-root"></div>

    <div id="aria-notify-area"></div>

  </div>

</template>

<script>

export default {

  props:['nickname','meetingId','password'],

  created() {

    const meetConfig = this.$MeetingCfg(this.meetingId, this.nickname, this.password);

    const ZoomMtg = this.$ZoomMtg;

    // Generate Signature function

    const signature = ZoomMtg.generateSignature({

      meetingNumber: meetConfig.meetingNumber,

      apiKey: meetConfig.apiKey,

      apiSecret: meetConfig.apiSecret,

      role: meetConfig.role,

      success: function (res) {

        // eslint-disable-next-line

        console.log("success signature: " + res.result);

      },

    });

    // join function

    ZoomMtg.init({

      leaveUrl: "https://zoom.us",

      isSupportAV: true,

      success: () => {

        ZoomMtg.join({

          meetingNumber: meetConfig.meetingNumber,

          userName: meetConfig.userName,

          signature: signature,

          apiKey: meetConfig.apiKey,

          userEmail: "spotverge1@gmail.com",

          passWord: meetConfig.passWord,

          success: function (res) {

            // eslint-disable-next-line

            console.log("join meeting success");

          },

          error: function (res) {

            // eslint-disable-next-line

            console.log(res);

          },

        });

      },

      error: function (res) {

        // eslint-disable-next-line

        console.log(res);

      },

    });

  },

};

</script>

Finally, in my zoom-sdk.js file:

import JQuery from "JQuery";

var $=JQuery;

const { ZoomMtg } = require("@zoomus/websdk");

// what variable you hook into Vue's prototype will be available on ANY vue component

import Vue from "vue";

console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

// CDN version default

ZoomMtg.setZoomJSLib("https://dmogdx0jrul3u.cloudfront.net/1.9.1/lib", "/av");


ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

const MeetingCfg = (meetingId, nickname, password) => ({

  apiKey: "MY_API_KEY",

  apiSecret: "MY_API_SECRET",

  meetingNumber: meetingId,

  userName: nickname,

  passWord: password,

  leaveUrl: "https://zoom.us",

  role: 0

});

Vue.prototype.$ZoomMtg = ZoomMtg;

Vue.prototype.$MeetingCfg = MeetingCfg;

Error
The application starts loading indicator that shows “Joining Meeting” and then returns the black screen with no errors. However, I get the following warning in console:

DevTools failed to load SourceMap: Could not load content for https://dmogdx0jrul3u.cloudfront.net/1.9.1/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Which Web Client SDK version?
1.9.1

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Visit website URL
  2. Meeting Id, Nickname and Password were already defined by the backend
  3. Wait for it to connect
  4. See black screen with no errors

Screenshots

Device:

  • Device: [PC (1366x768 resolution)]
  • OS: [Windows 10]
  • Browser: [Chrome]
  • Browser Version [Version 91.0.4464.5 (Official Build) dev (64-bit)]

Additional context
In network requests, the following URL https://zoom.us/api/v1/wc/info?meetingNumber=9.... results in the response containing errorCode: 0.

Hey @sdriyaz712,

Thank you for reaching out to the Zoom Developer Forum. This can happen if the Web SDK dependencies aren’t imported correctly.

While I understand the structure of a Nuxt.js project is different, we do have a Sample Vue.js App which should serve as a reference for how you can implement the Web SDK with a Vue app.

Let me know if that helps. If not, are you able to share a public git repo with your code? I can advise further using that.

Thanks,
Max

Hi @MaxM, Thanks a lot for your response and reference. As mentioned, I created the code based on the sample vue app.

However, the screen is stuck forever at “Joining Meeting” loading indicator. I’ve added the public git repo here as requested.

I hope this would be resolved as soon as possible. Thanks again :slightly_smiling_face:

Hey @sdriyaz712,

Thank you for the update. Please confirm that the Sample App that you based your implementation off of is the same as what I linked above. I mention this because I’m seeing some notable differences:

  1. You are importing the Web SDK using the Local NPM version whereas the Sample Vue.js App uses the CDN method:
  1. You import jQuery which is not required by the Web SDK and is not included in the Sample App
  1. You’re using a different method to import AV libraries from the CDN (JS file vs integrating with Vue lifecycle):
  1. You have Meetings.vue, ZoomFrame.vue and zoom-sdk.js which are not included with the Sample Vue.js App

Let me know if that helps.

Thanks,
Max