# Joining Meeting never stop to load

**URL:** <https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605>\
**Category:** Web\
**Created:** [January 14, 2021, 8:08pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605 "2021-01-14T20:08:17Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![colart.pierre](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@colart.pierre](https://devforum.zoom.us/u/colart.pierre)\
**Post date:** [January 14, 2021, 8:08pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/1 "2021-01-14T20:08:18Z")

</div>

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 :

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/6/963da7b23918df264ef1792583f60bedc9d50e01.png)

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)

      }

    })    

  }

})

```

},

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [January 15, 2021, 1:26am UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/2 "2021-01-15T01:26:49Z")

</div>

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](https://marketplace.zoom.us/docs/sdk/native-sdks/web/build#specify-dependency-library), where you replace the version with the current SDK version that you’re using:

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

```

I hope that helps!

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![colart.pierre](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@colart.pierre](https://devforum.zoom.us/u/colart.pierre)\
**Post date:** [January 15, 2021, 6:24am UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/3 "2021-01-15T06:24:45Z")

</div>

Hi @MaxM ,

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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/5/5/55d482a347fa21e46dd823f78b1745c3e6015c79.png)

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

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [January 15, 2021, 10:45pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/4 "2021-01-15T22:45:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![colart.pierre](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@colart.pierre](https://devforum.zoom.us/u/colart.pierre)\
**Post date:** [January 17, 2021, 6:25pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/5 "2021-01-17T18:25:56Z")

</div>

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 :

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/7/e/7ef22573967a27c87fb2162dc963482220a89783.png)

---

<div class="post-metadata">

**Author:** ![colart.pierre](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@colart.pierre](https://devforum.zoom.us/u/colart.pierre)\
**Post date:** [January 17, 2021, 6:43pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/6 "2021-01-17T18:43:31Z")

</div>

_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: "",

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

      passWord: "", // 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](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/e/a/ea2459831f16616b5f72319491e8dd4e5edf7d96.png)

meetingId : correct tried with your local version [GitHub - zoom/sample-app-web: Zoom Web SDK Sample App](https://github.com/zoom/sample-app-web)  
api\_key and secret : correct  
passWord: is accorded for both as it is a POC  
signature: generated

SO where is my issue ☹

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [January 19, 2021, 7:21pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/7 "2021-01-19T19:21:21Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![colart.pierre](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@colart.pierre](https://devforum.zoom.us/u/colart.pierre)\
**Post date:** [January 20, 2021, 5:16am UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/8 "2021-01-20T05:16:06Z")

</div>

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 ☹

thanks for your reply

---

<div class="post-metadata">

**Author:** ![Charles\_Grey](https://avatars.discourse-cdn.com/v4/letter/c/c68b51/32.png) [@Charles\_Grey](https://devforum.zoom.us/u/Charles_Grey)\
**Post date:** [January 20, 2021, 4:36pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/9 "2021-01-20T16:36:21Z")

</div>

thanks a lot, I face this issue after getting through this post I find [a](https://basketballseekers.com/best-outdoor-basketball-shoes/) solution.

---

<div class="post-metadata">

**Author:** ![colart.pierre](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@colart.pierre](https://devforum.zoom.us/u/colart.pierre)\
**Post date:** [January 20, 2021, 9:02pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/11 "2021-01-20T21:02:26Z")

</div>

@tommy

Same issue with your solution. The room is created :

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/1/6/1634ec35949da51299182751388ab8ee375890c7.png)

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

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [January 20, 2021, 11:45pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/12 "2021-01-20T23:45:01Z")

</div>

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](https://github.com/zoom/sample-app-web).

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![colart.pierre](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@colart.pierre](https://devforum.zoom.us/u/colart.pierre)\
**Post date:** [January 21, 2021, 6:07am UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/13 "2021-01-21T06:07:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [January 21, 2021, 6:22pm UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/14 "2021-01-21T18:22:56Z")

</div>

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! 🙂

-Tommy

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [February 21, 2021, 4:23am UTC](https://devforum.zoom.us/t/joining-meeting-never-stop-to-load/40605/15 "2021-02-21T04:23:08Z")

</div>

Closed on February 21, 2021, 4:23am UTC

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