Joining Meeting never stop to load

Hi everybody,

I am trying to add the sdk client (for a poc), the idea is to push to use zoom in the company with the SDK. But when I want to create and join the room I have :

I will share my config to understand :

Using: VUEJS
install sdk: only with the npm do not know if I need more, I saw that react was include inside the module
My signature (POC) :

const apiKey = ‘MY KEY’

const apiSecret = 'MY SECRET '

const meetingNumber = 1234

const role = 1

console.log(process.env.VUE_APP_ZOOM_KEY)

const timestamp = new Date().getTime() - 30000;

const msg = Buffer.from(apiKey + apiSecret + timestamp + role).toString(

  "base64"

);

const hash = crypto

  .createHmac("sha256", apiSecret)

  .update(msg)

  .digest("base64");

const signature = Buffer.from(

  `${apiKey}.${meetingNumber}.${timestamp}.${role}.${hash}`

).toString("base64");

return res.send({ message: signature });

And I did the init :

ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

ZoomMtg.setZoomJSLib("node_modules/@zoomus/websdk/dist/lib", "/av");

const response = axios.post(`${process.env.VUE_APP_BACK_URL}/room/signature`)

this.signature = response.data

let vm = this;

ZoomMtg.init({

  leaveUrl: this.meetConfig.leaveUrl,

  isSupportAV: true,

  success: function() {

    console.log(this)

    ZoomMtg.join({

      signature: vm.signature,

      apiKey: process.env.VUE_APP_ZOOM_KEY,

      meetingNumber: 1234,

      userName: vm.meetConfig.userName,

      // password optional; set by Host

      success: (success) => {

        console.log(success)

      },

      error: (error) => {

        console.log(error)

      }

    })    

  }

})

},

Hey @colart.pierre,

Thank you for reaching out to the Zoom Developer Forum. Please try moving setZoomJSLib() before the preLoadWasm() and prepareJssdk() functions. If that doesn’t work, are you able to use the CDN method, where you replace the version with the current SDK version that you’re using:

ZoomMtg.setZoomJSLib('https://source.zoom.us/1.8.5/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

I hope that helps!

Thanks,
Max

Hi @MaxM ,

Thank you for your support, I tried what you said but :

looks like I have an issue with it. Also I receive a timeout for the room because I cannot join it

Hey @colart.pierre,

Thank you for the update and for testing that. Would you be able to provide a public git repo with the code that exhibits this issue? I’ll take a look and see if I can offer advice on how to get this working with VueJS.

Thanks,
Max

1 Like

Hi @MaxM,

I cannot share the link, it is on a gitlab hosted with permission …
I do not have the timeout but still the 403. The question is why I have it, should I use a token ?

also I have this new error :

Component js :

import { mapGetters } from "vuex";

import { ROLES } from "Constants/roles.const";

import { WS_EVENTS } from "Utils/config";

export default {

  name: "VideoConference",

  props: ["room"],

  async beforeMount() {

    if (this.meeting === null && this.isTeacher()) {

      console.log(this.room);

      await this.$store.dispatch("startMeeting", this.room);

    }

    let ZoomMtg = require("@zoomus/websdk").ZoomMtg;

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

    // ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.8.5/lib', '/av'); 
    ZoomMtg.setZoomJSLib("https://source.zoom.us/1.8.5/lib", "/av");

    ZoomMtg.preLoadWasm();

    ZoomMtg.prepareJssdk();

    let meetConfig = {

      apiKey: process.env.VUE_APP_ZOOM_KEY,

      meetingNumber: "",

      signature: "",

      leaveUrl: "https://yoursite.com/meetingEnd",

      userName: "scadra",

      userEmail: "firstname.lastname@yoursite.com",

      passWord: "az12_@", // if required

      role: 1, // 1 for host; 0 for attendee

    };

    meetConfig.meetingNumber = this.meeting.meetingId.toString();

    meetConfig.signature = await ZoomMtg.generateSignature({

      meetingNumber: meetConfig.meetingNumber,

      apiKey: process.env.VUE_APP_ZOOM_KEY,

      apiSecret: process.env.VUE_APP_ZOOM_SECRET,

      role: 1,

      success: function(res) {

        return res.result;

      },

    });

    ZoomMtg.init({

      leaveUrl: meetConfig.leaveUrl,

      isSupportAV: true,

      success: function() {

        console.log(meetConfig);

        ZoomMtg.join({

          meetingNumber: meetConfig.meetingNumber,

          userName: meetConfig.userName,

          signature: meetConfig.signature,

          apiKey: process.env.VUE_APP_ZOOM_KEY,

          passWord: meetConfig.passWord,

          success: (success) => {

            console.log(meetConfig.meetingNumber);

            console.log(success);

          },

          error: (error) => {

            console.log(meetConfig.meetingNumber);

            console.log(error);

          },

        });

      },

      error: function(res) {

        console.log(res);

      },

    });

  },

  async created() {

  },

  async mounted() {

    if (this.isTeacher()) {

      this.$store.dispatch("SET_ONLINE", true);

      this.$socket.emit(WS_EVENTS.joinConference, {

        username: this.currentUser.email,

        room: this.room,

        to: this.currentUser.email,

        teacher: true,

      });

    } else {

      this.$socket.emit(WS_EVENTS.joinConference, {

        username: this.currentUser.email,

        room: this.room,

        to: this.currentUser.email,

        teacher: false,

      });

    }

  },

  data() {

    return {

      validation: null,

    };

  },

  computed: {

    ...mapGetters(["currentUser", "meeting", "isOnline"]),

  },

  methods: {

    isTeacher() {

      return this.currentUser.roles.find((role) => role.name === ROLES.TEACHER);

    },
  }
};

template :

image

meetingId : correct tried with your local version GitHub - zoom/sample-app-web: Zoom Web SDK Sample App
api_key and secret : correct
passWord: is accorded for both as it is a POC
signature: generated

SO where is my issue :frowning:

Hey @colart.pierre ,

I think you need to move your ZoomMtg import and the prepare / preload functions to the top of your file like this:

import { ZoomMtg } from "@zoomus/websdk";

ZoomMtg.setZoomJSLib("https://source.zoom.us/1.8.5/lib", "/av");

ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

Let me know if that helps.

Thanks,
Tommy

Hi @tommy,

It changes nothing, in fact the import in this case is the same than using the way used in ES5.
So again my questions are : why the 403 responses + the error in the console ?

As it is a POC I have few times to finish it :frowning:

thanks for your reply

thanks a lot, I face this issue after getting through this post I find a solution.

@tommy

Same issue with your solution. The room is created :

But still 403 error and impossible to join the room. My time is short, how can we accelerate it, poc should be finish soon …

thanks for your reply

Hey @colart.pierre,

I’ve DM’d you a link to schedule a meeting with me if you have the time. We can go over the issues you’re encountering in that meeting. It’s also important to note that if your POC does not include using Vue.js, you may find success setting up a barebones web app from our Sample Web App.

Thanks,
Max

Hi Max, I will check and about it is important to use this technology, we cannot change it :slight_smile:

1 Like

Gotcha @colart.pierre ! We will work with you to help you get it working in Vue.js and also publish a Vue.js sample app soon! :slight_smile:

-Tommy