WebSDK Nuxt Integration - no errors stuck at 'Joining Meeting'

dan7 · June 25, 2021, 6:59pm

I have installed the SDK (from module) and can get the integration as far as joining a meeting but it then sticks at ‘Joining a Meeting’ and I get no console errors.

I’m using 1.9.6 loaded via NPM - it looks as though .join isn’t firing as I don’t get a response from my success callback - does anyone know what may be causing this?

I’ve popped my component code below and a sample signature for reference if anyine can give some guidance on what might be the issue?

<template>
  <div>
    <div id="zmmtg-root"></div>
    <v-btn @click="getSignature">Launch Zoom</v-btn>
  </div>
</template>

<script>
import ZoomServices from "@/Services/ZoomServices";

export default {
  mounted() {
    this.zoomInit();
  },
  data() {
    return {
      apiKey: "***removed***",
      leaveUrl: "http://localhost:3000",
      meetingNumber: "***removed***",
      passWord: "",
      role: 0,
      userEmail: "***removed***",
      userName: "Dan",
    };
  },
  methods: {
    zoomInit() {
      this.$zoom.preLoadWasm();
      this.$zoom.prepareWebSDK();
      //loads language files, also passes any error messages to the ui
      // this.$zoom.i18n.load("en-US");
      // this.$zoom.i18n.reload("en-US");
      // this.$zoom.inMeetingServiceListener("onUserJoin", (data) => {
      //   console.log("inMeetingServiceListener onUserJoin", data);
      // });
    },
    getSignature() {
      const meeting = {
        meetingNumber: this.meetingNumber,
        role: this.role,
      };
      ZoomServices.getSignature(meeting)
        .then((res) => {
          console.log(res.data.signature);
          this.startMeeting(res.data.signature);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    startMeeting(signature) {

      const self = this;

      self.$zoom.init({
        leaveUrl: this.leaveUrl,
        isSupportAV: true,
        debug: true,

        success: () => {
          self.$zoom.join({
            apiKey: self.apiKey,
            signature: signature,
            meetingNumber: self.meetingNumber,
            userName: self.userName,
            leaveUrl: self.leaveUrl,
            passWord: self.passWord,
            success: (success) => {
              console.log(success);
            },
            error: (error) => {
              console.log(error);
            },
          });

          //console.log('joinConfig', joinConfig);
        },
        error: function (res) {
          console.log(res);
        },
      });
    },
  },
};
</script>

Signature = [REDACTED]

MaxM · June 25, 2021, 10:24pm

Hey @dan7,

Thank you for reaching out to the Zoom Developer Forum. So far, it looks like you have everything set up correctly. From what I can tell, you’re basing this off our Sample Vue.js App - is that accurate?

Looks like there were some small changes if so. You might want to test with the default codebase just to see if the issue is there too.

Specifically, like you mentioned, the issue is likely related to using the local version of the package. I’ve definitely seen issue with that in the past due to how Webpack works with Vue.

Try importing dependencies via CDN:

github.com

zoom/websdk-sample-vuejs/blob/3dae3b80cfb6dae79419a5c29b4f614688116de7/public/index.html#L18-L23

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

Let me know if that helps.

Thanks,
Max

dan7 · June 26, 2021, 10:51am

@MaxM thank you for your speedy response!

I have refactored the app to import via CDN (see below as an update) I can still only get as far as the ‘Joining Meeting’ screen.

The ZoomMtg is working fine as I can check supported, I appear to be able to init but join either isn’t firing or is firing but isn’t working and isn’t returning an error?

I’ve added isShowJoiningErrorDialog:true to init and still get no errors. From debugging, everything in the console reads fine and it runs through to END but still just sites at ‘Joining Meeting’

I’ve used a valid meeting ID and password and tried a personal meeting room and passcode - both give the same result.

Any ideas?

ZoomWindow.vue (component)

<template>
  <div>
    <div id="zmmtg-root"></div>
    <v-btn @click="getSignature">Launch Zoom</v-btn>
  </div>
</template>

<script>
import ZoomServices from "@/Services/ZoomServices";

export default {
  mounted() {
    console.log(window.ZoomMtg);
    
    this.zoom = window.ZoomMtg;
    console.log('checkSystemRequirements');
    console.log(JSON.stringify(this.zoom.checkSystemRequirements()));
    this.zoom.setZoomJSLib('https://source.zoom.us/1.9.6/lib', '/av');
    this.zoomInit();
  },
  data() {
    return {
      apiKey: "removed",
      leaveUrl: "removed",
      meetingNumber: "removed",
      passWord: "removed",
      role: 0,
      userEmail: "removed",
      userName: "Dan",
      zoom: null
    };
  },
  methods: {
    zoomInit() {
      this.zoom.preLoadWasm();
      this.zoom.prepareWebSDK();
    },
    getSignature() {
      const meeting = {
        meetingNumber: this.meetingNumber,
        role: this.role,
      };
      ZoomServices.getSignature(meeting)
        .then((res) => {
          console.log(res.data.signature);
          this.startMeeting(res.data.signature);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    startMeeting(signature) {

      const self = this;

      self.zoom.init({
        leaveUrl: self.leaveUrl,
        isSupportAV: true,
        debug: true,
        isShowJoiningErrorDialog: true,

        success: () => {
          console.log('Zoom initialised successfully');
          self.zoom.join({
            apiKey: self.apiKey,
            signature: signature,
            meetingNumber: self.meetingNumber,
            userName: self.userName,
            leaveUrl: self.leaveUrl,
            passWord: self.passWord,
            success: () => {
              console.log('joined successfully!');
            },
            error: (error) => {
              console.log('There has been an error joining', error);
            },
          });
        },
        error: function (res) {
          console.log(res);
        },
      });
    },
  },
};
</script>

Example signature MXI1WTJfT0JST2FvV3RRbmFDdnhFUS4yNjI5OTczMTg0LjE2MjQ3MDQzMTk4MDYuMC5Wb0NIS3NIdm9pRFVwS1RqL1d4dXFmbmw1TEZ4dnlWMTk2dmpIVVhDMUVzPQ==

dan7 · June 26, 2021, 11:00am

Could it be a signature issue? testing the exact same flow I can get as far as ‘Joining Meeting’ by replacing my signature with an empty string…

Is there some way to be able to test a signatures validity?

dan7 · June 27, 2021, 10:46am

@MaxM I’ve made some progress - I’ve refactored again, introduced some setTimeouts to space out the stages of adding Zoom CDN scripts, adding this.zoom.preLoadWasm() and this.zoom.prepareWebSDK(), and the .join method but now I get a ‘join invalid parameter !!!’ error in the console.

I’ll post my current setup below, but I’ve tried he following to troubleshoot:

I am using a valid JWT app for my key and secret
I am using a personal meeting ID and allowed people to join anytime
I have made my meetingNumber an int instead of a string
tried by using the node signature generator and the generateSignature method on the ZoomMtg object
Removed role from the joinConfig

I’m stumped if Im honest and I’m rapidly running out of time.

Any ideas would be great - as mentioned before I feel the only explanation is a signature issue but I cant find a way to check a signatures validity?

<template>
  <div>
    <div id="zmmtg-root"></div>
    <v-btn @click="getSignature">Launch Zoom</v-btn>
  </div>
</template>

<script>
import ZoomServices from "@/Services/ZoomServices";

export default {
  mounted() {
    const script = document.createElement("script");
    script.src = "https://source.zoom.us/zoom-meeting-1.9.6.min.js";
    document.getElementsByTagName("head")[0].appendChild(script);
    setTimeout(() => {
      console.log(window.ZoomMtg);
      this.zoom = window.ZoomMtg;
    }, 300);
  },
  data() {
    return {
      apiKey: "removed",
      apiSecret: "removed",
      leaveUrl: "removed",
      meetingNumber: removed,
      passWord: "",
      role: 0,
      userEmail: "removed",
      userName: "removed",
      zoom: null,
    };
  },
  methods: {
    zoomInit() {
      setTimeout(() => {
        this.zoom.preLoadWasm();
        this.zoom.prepareWebSDK();
      }, 400);
      setTimeout(() => {
        console.log(JSON.stringify(this.zoom.checkSystemRequirements()));
        this.zoom.setZoomJSLib("https://source.zoom.us/1.9.6/lib", "/av");
      }, 800);
    },
    getSignature() {
      const meeting = {
        meetingNumber: this.meetingNumber,
        role: this.role,
      };

      ZoomServices.getSignature(meeting)
        .then((res) => {
          console.log("server sig", res.data.signature);
          this.startMeeting(res.data.signature);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    startMeeting(signature) {
      const self = this;

      self.zoom.init({
        leaveUrl: self.leaveUrl,
        isSupportAV: true,
        debug: true,
        isShowJoiningErrorDialog: true,

        success: () => {
          const joinConfig = {
            apiKey: self.apiKey,
            signature: signature,
            meetingNumber: self.meetingNumber,
            userName: self.userName,
            leaveUrl: self.leaveUrl,
            passWord: self.passWord,
            success: function (res) {
              console.log(res);
            },
            error: function (res) {
              console.log(res);
            },
          };

          console.log("Zoom initialised successfully");
          console.log("sig passed to init", signature);
          console.log("joinConfig", joinConfig);
          setTimeout(() => {
            self.zoom.join(joinConfig);
          }, 1000);
        },
        error: function (res) {
          console.log(res);
        },
      });
    },
  },
  watch: {
    zoom: function () {
      this.zoomInit();
    },
  },
};
</script>

dan7 · June 27, 2021, 12:01pm

Fixed it, I had declared leaveUrl: self.leaveUrl inside join() as well as init() which was throwing off the process.

It now completes through and joins a meeting as expected.

FYI, the process for adding the websdk is not similar at all to the vue starter (they have different architectures that share a common underlying lifecycle) it would be worthwhile adding a new start app for nuxt - I’m happy to assist as I now have one using the npm package and one using cdn.

MaxM · June 28, 2021, 11:23pm

Hey @dan7,

Awesome! I’m really happy to hear that you got it figured out. You’re right, a Nuxt.js sample app would be really useful! I know that they use completely different structures but I’ve only dabbled with Nuxt.js.

If you’re able to provide a public git repo that we can use as a reference that would be much appreciated and would definitely expedite the process of creating the sample. Thank you so much for offering!

I’ll check with my team to see if we would be able to fork your repo so that you would have credit on Github.

Thanks for being part of what makes this community awesome!

Thanks,
Max

MaxM · June 30, 2021, 9:51pm

@dan7 Thanks for your patience!

While we aren’t able to fork your copy, our team does agree that we should have a Nuxt.js sample app and that using your code as a reference would be a great help! We’re working on better ways to give credit on the Developer Forum but I’ll make sure that you get credit for your contribution.

Max

system · July 31, 2021, 7:52am

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
On starting meeting in component view web sdk Keeps loading with message "joining meeting" and display no error in console Web	2	107	December 16, 2023
ZoomMtg.join returns false - no error - no joining Web	7	1635	August 21, 2020
Stuck on Joining Meeting ......SDK version 2.18.0 Meeting SDK	3	234	November 21, 2023
Zoom web SDK stuck on 'Joining Meeting' Web	2	1348	January 9, 2021
Zoom WebSDK for Nuxt.js Web	9	2217	August 12, 2020

WebSDK Nuxt Integration - no errors stuck at 'Joining Meeting'

Related Topics