The meeting number is wrong - Vue 2 - Typescript - SDK-Version 1.9.1

Description
The Basic Problem is, that i get an error response saying “The meeting number is wrong”. It is not. What did i do and why am i sure that it is not wrong?

First of all, i tested your Local Sample Web App with the same Meeting-Number, Password, Api-Key and Api-Secret. That setup works, therefore the meeting number can not be wrong.

I followed your Documentation on how to create an App (https://marketplace.zoom.us/docs/sdk/native-sdks/web/build). In my App i therefore inserted the following lines into the <head> tag of my index.html

<!-- import local css for #zmmtg-root -->
<link type="text/css" rel="stylesheet" href="node_modules/@zoomus/websdk/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="node_modules/@zoomus/websdk/dist/css/react-select.css" />

Since it is a Vue-Project, i created an component that is rendered when the app is started. The important part is in the script tag, therefore i only post this part:

<script lang="ts">
import Vue from "vue";
import { ZoomMtg } from "@zoomus/websdk";

export default Vue.extend({
  data() {
    return {
      text: "Kevins workbench",
      buttonText: "print"
    };
  },
  created() {
    // this should probably go into the main.ts
    ZoomMtg.setZoomJSLib("node_modules/@zoomus/websdk/dist/lib", "/av");

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

    const meetConfig = {
      apiKey: "<my-key>",
      china: false,
      lang: "en-US",
      leaveUrl: "http://localhost:8082",
      meetingNumber: "<my-meeting-number>",
      passWord: "<my-password>",
      role: 0,
      userName: "Mc Testman",
      userEmail: ""
    };

    this.getSignature(meetConfig);
  },
  methods: {
    printMeeting(): void {
      const zoomMeeting = document.getElementById("zmmtg-root");
      console.log(zoomMeeting);
    },
    getSignature(meetConfig: {
      apiKey: string;
      meetingNumber: string;
      leaveUrl: string;
      userName: string;
      userEmail: string;
      passWord: string;
      role: number;
    }): void {
      // eslint-disable-next-line no-void
      void fetch("<my-heroku-url>", {
        method: "POST",
        body: JSON.stringify({ meetingData: meetConfig })
      })
        .then((result) => result.text())
        .then((response) => {
          const realResponse = JSON.parse(response) as { signature: string };
          console.log(`meetingNumber: ${meetConfig.meetingNumber}`);
          ZoomMtg.init({
            leaveUrl: meetConfig.leaveUrl,
            isSupportAV: true,
            success: function () {
              ZoomMtg.join({
                meetingNumber: meetConfig.meetingNumber,
                userName: meetConfig.userName,
                signature: realResponse.signature,
                apiKey: meetConfig.apiKey,
                userEmail: meetConfig.userEmail,
                // password optional; set by Host
                passWord: meetConfig.passWord,
                success: (res: string) => {
                  console.log("join meeting success");
                  console.log("get attendeelist");
                  ZoomMtg.getAttendeeslist({});
                  ZoomMtg.getCurrentUser({
                    success: function (res: { result: { currentUser: string } }) {
                      console.log("success getCurrentUser", res.result.currentUser);
                    }
                  });
                },
                error(res: string) {
                  console.log(res);
                }
              });
            }
          });
        });
    }
  }
});
</script>

Error

{
  "method": "join",
  "status": false,
  "result": "The meeting number is wrong.",
  "errorCode": 3706
}

Which Web Client SDK version?
1.9.1

To Reproduce(If applicable)

  1. start an heroku signature creator server, just like you describe in your documentation
  2. Create an vue2 typescript project
  3. put the important css lines into the index.html
  4. create a component that has in its script tag the upper code
  5. replace <my-key>, <my-meeting-number>,<my-password> and <my-heroku-url> with sample values
  6. start the app (by npm serve or something familiar)
  7. open it in firefox, open the console and see the error message

Screenshots
If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

  • Device: Macbook Pro
  • OS: macOS Big Sur Version 11.2.3
  • Browser: Firefox
  • Browser Version 87.0

Additional context
no additional context

It would be very nice to hear from you.

Regards,
Kevin

By the help of some other topics here, I figured out that I should probably decode the siganture to see if it holds the correct values. Turns out it didn’t and that the code from the docs was misleading. To be exact the fetch command was the wrong one

void fetch("<my-heroku-url>", {
    method: "POST",
    body: JSON.stringify({ meetingData: meetConfig })
  })

Instead of this, one should call it like

void fetch("<my-heroku-url>", {
    method: "POST",
    body: JSON.stringify({ meetingNumber: meetConfig.meetingNumber, role: meetConfig.role })
    headers: {
        "Content-Type": "application/json"
    }
  })

this at least leads the signature to be correctly created. Anyway this fix wasn’t enough. Luckily I found the vue-sample-app that shows how to use the Web-SDK in Vue: GitHub - zoom/websdk-sample-vuejs: Use the Zoom Web SDK in a Vue.js App

Since we are using typescript in our project I still needed to adjust some code in the main.js. My biggest problem was how to add ZoomMtg as property to my Vue-Component. I found a lead on how to do this in this stackoverflow post: vuejs2 - How to access Vue prototype property from typescript component - Stack Overflow

I also needed to declare an adjusted Interface for Window. How to do this was explained here: reactjs - TypeScript error: Property 'X' does not exist on type 'Window' - Stack Overflow

Using all of this I was able to join a meeting from my app. I still need to figure out how to custumize the client in terms of its size. But as far as I can tell from other topics here, one needs to do some CSS voodoo to achieve this.

Anyway I wanted to drop all of this here, so it hopefully helps someone that tackles the same problem.

Hey @kevin.just,

Thank you for reaching out to the Zoom Developer Forum. I really appreciate that you provided the solution that worked for you here.

I created the Sample Vue.js App based on our other Sample Apps. I know it certainly doesn’t cover all use cases so it’s great to have this kind of information documented on the forum.

Currently, the Web SDK doesn’t support customization or resizing. This is something we are working to offer in a future release. For now, as you mentioned, you can use custom CSS or JS to resize the Web SDK but you’ll want to carefully test to confirm this doesn’t introduce any issues.

Thanks,
Max

1 Like