Integrate Web-SDK with vue-project

giangthse62424 · October 7, 2020, 7:19am

I have trouble in integrating zoom web sdk with Vue project.
I follow the zoom documents in intergrating through sdk but keep getting [$ is not defined] error
I can make zoom web sdk work smoothly by include script of zoom globally in index.html (through CDN) but, I can not when including it in a vue component

Moreover, I have some questions about destroy zoom frame, everytime we receive responses from zoom web sdk, it can be shown through zoom frame, but I want to show actively through my modals. but I don’t know how to destroy the zoom frame, or showing message through my site, because zoom frame may overlap my site
Below is the way I want to show error message

section.zoom-item //- Overlay Mask to prevent embedded zoom player being clicked .overlay-mask

//- Spinner
.loading-mask(v-if="!errorMessage")
spinner(size=“8em”)

//- Main Player
.zoom-iframe(v-if="!errorMessage" :class="{show: loading}")
zoom-frame(:nickname=“username” :meetingId=“meetingNumber” :password=“password” @error=“showingError”)

.messages-wrapper(v-show=“errorMessage”)
h1 {{ errorMessage }}
p(v-if=“errorMessage”) {{ decodeURIComponent(item.url) }}

will.zoom · October 9, 2020, 3:54pm

Hey @giangthse62424,

Thanks for reaching out, happy to help.

In regards to the ‘not defined’ error you’re seeing, can you provide some additional details (browser console errors, screenshot), as well as your full code snippet or a link to your repo? I’m happy to take a closer look, and this will help me to debug.

As for your inquiry on the Zoom Frame, are you referring to iFraming the SDK? If so, I should note that this is not officially supported, and we recommend implementing the Web SDK in its entirety, outside of any iFrames.

Thanks,
Will

giangthse62424 · October 12, 2020, 9:01am

Hi Will. Thanks so much for your reply. I’m currently fixing the error

And about the second question, the thing I really want to focus on is the ability of auto-generating zmmtg-root

to init zoom. Is there any way for us to append zmmtg-root

into a specific tag?

One more thing that is there any chance for us to disable showing options bar from zoom, I just want to show video and audio only from zoom

Best regards,
John Halliwell

will.zoom · October 13, 2020, 7:04pm

Hey @giangthse62424,

to init zoom. Is there any way for us to append zmmtg-root into a specific tag?

Are you referring to an HTML tag or something else?

One more thing that is there any chance for us to disable showing options bar from zoom, I just want to show video and audio only from zoom

While you can’t remove the entire options bar, you can hide certain things like the participants/invite button (see this post).

You can also consider hiding some of these with custom CSS, if you wish.

Let me know if this helps!

Best,
Will

giangthse62424 · October 14, 2020, 2:42am

Yes, now zmmtg-root append to body. But I want to append to a specific HTML tag, like a div

giangthse62424 · October 14, 2020, 3:12pm

And do we have any Event Listener or something like that for listening End Meeting event?
I tried but found nothing about that

giangthse62424 · October 14, 2020, 4:53pm

The above image is the error that I’ve got when integrating into my project. I have a zoom component and another component that is rendered continuously.

giangthse62424 · October 14, 2020, 4:53pm

Seem like this error happens when I’m removing Zmmtg-root tag in before destroy hook and rerender the zoom component

tommy · October 15, 2020, 10:37pm

Hey @giangthse62424,

The Zmmtg-root is created and appended automatically. If you remove it, you will run into issues.

You can however, use CSS to hide and show it when you would like, take the Angular sample app for example:

github.com

zoom/websdk-sample-angular/blob/master/src/styles.css#L7


/* You can add global styles to this file, and also import other style files */

html, body {
  min-width: 0 !important;
}

#zmmtg-root {
  display: none;
}

github.com

zoom/websdk-sample-angular/blob/master/src/app/app.component.ts#L53


    } else {
      console.log(data)
    }
  }).catch((error) => {
    console.log(error)
  })
}

startMeeting(signature) {

  document.getElementById('zmmtg-root').style.display = 'block'

  ZoomMtg.init({
    leaveUrl: this.leaveUrl,
    isSupportAV: true,
    success: (success) => {
      console.log(success)

      ZoomMtg.join({
        signature: signature,
        meetingNumber: this.meetingNumber,

As for the event listener, we do have the inMeetingServiceListener, you can read more about it here:

Please let me know if you are running into any other issues.

Thanks,
Tommy

giangthse62424 · October 16, 2020, 6:51am

Hi @tommy, This error comes from when rerendering the component which imports zoom SDK, although it runs well in the first time render

giangthse62424 · October 19, 2020, 4:58pm

Hi @tommy, lately, I see Zoom up to date info about Zoom Fully Customizable SDK, I don’t know really well the differences between the Zoom Web SDK and Zoom Fully Customizable SDK?
One more thing: I want to build an app that supports users who can just only show active zoom meetings on their web browser like a TV show. What’s the best thing for this idea to keep the session of accessing zoom meetings without reaching API limit when users can turn on/turn off multiple times
In other words, is there any chance for us to get streaming data from zoom meetings instantly (when the user provides meeting id and password)

tommy · October 20, 2020, 8:05pm

Hey @giangthse62424,

The Web SDK is not designed to be re-rendered, and could have issues.

Here are the differences

https://marketplace.zoom.us/docs/sdk#comparing-zoom-sdks

Great question, have you considered embedding a live stream of the meeting on the site?

Thanks,
Tommy

system · November 20, 2020, 6:05am

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

Topic		Replies	Views
Zoom for Nuxt JS (Vue JS) Web	13	6378	August 21, 2020
Zoom meeting sdk error while integration with Vue js Web sdk	2	367	July 1, 2023
Vue component and web SDK error: ERR_CERT_COMMON_NAME_INVALID Web	4	491	September 20, 2020
Stuck integrating web sdk with Vue.js Web	2	1239	January 20, 2022
Vue.js with Web SDK Integration is not working Web	4	1272	August 21, 2020

Integrate Web-SDK with vue-project

Related Topics