https://github.com/zoom/meetingsdk-vuejs-sample
Use the Zoom Meeting SDK in Vue.js
https://github.com/zoom/meetingsdk-vuejs-sample
sample-app
Last synced: 8 months ago
JSON representation
Use the Zoom Meeting SDK in Vue.js
- Host: GitHub
- URL: https://github.com/zoom/meetingsdk-vuejs-sample
- Owner: zoom
- License: other
- Created: 2021-03-08T19:11:46.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-04-17T18:57:53.000Z (11 months ago)
- Last Synced: 2025-04-18T08:54:40.222Z (11 months ago)
- Topics: sample-app
- Language: Vue
- Homepage:
- Size: 3.73 MB
- Stars: 41
- Watchers: 8
- Forks: 18
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Zoom Meeting SDK Vue.js sample
Use of this sample app is subject to our [Terms of Use](https://explore.zoom.us/en/legal/zoom-api-license-and-tou/).
---
**NOTE:** This sample app has been updated to use [Vue 3 since Vue ended support for Vue 2 on Dec 31, 2023](https://vuejs.org/guide/introduction.html).
---
This repo is a [Vue.js](https://vuejs.org/) app generated via [Create Vue, the official Vue project scaffolding tool](https://vuejs.org/guide/quick-start.html#creating-a-vue-application), that uses the [Zoom Meeting SDK](https://developers.zoom.us/docs/meeting-sdk/web/) to start and join Zoom meetings and webinars.
## Installation
To get started, clone the repo:
`$ git clone https://github.com/zoom/meetingsdk-vuejs-sample.git`
## Setup
1. Once cloned, navigate to the `meetingsdk-vuejs-sample` directory:
`$ cd meetingsdk-vuejs-sample`
1. Then install the dependencies:
`$ npm install`
1. Open the `meetingsdk-vuejs-sample` directory in your code editor.
1. Open the `src/components/HelloWorld.vue` file, and enter values for the variables:
**NEW:** To use the [Component View](https://developers.zoom.us/docs/meeting-sdk/web/component-view/), replace `HelloWorld.vue` with `HelloWorldNew.vue`. (The `leaveUrl` is not needed). Also, uncomment the Component View CSS tags and comment out the Client View CSS in `index.html`.
| Variable | Description |
| -----------------------|-------------|
| authEndpoint | Required, your Meeting SDK auth endpoint that securely generates a Meeting SDK JWT. [Get a Meeting SDK auth endpoint here.](https://github.com/zoom/meetingsdk-sample-signature-node.js) |
| sdkKey | Required, your Zoom Meeting SDK Key or Client ID for Meeting SDK app type's created after February 11, 2023. [You can get yours here](https://developers.zoom.us/docs/meeting-sdk/developer-accounts/#get-meeting-sdk-credentials). |
| meetingNumber | Required, the Zoom Meeting or webinar number. |
| passWord | Optional, meeting password. Leave as empty string if the meeting does not require a password. |
| role | Required, `0` to specify participant, `1` to specify host. |
| userName | Required, a name for the user joining / starting the meeting / webinar. |
| userEmail | Required for Webinar, optional for Meeting, required for meeting and webinar if [registration is required](https://support.zoom.us/hc/en-us/articles/360054446052-Managing-meeting-and-webinar-registration). The email of the user starting or joining the meeting / webinar. |
| registrantToken | Required if your [meeting](https://developers.zoom.us/docs/meeting-sdk/web/client-view/meetings/#join-meeting-with-registration-required) or [webinar](https://developers.zoom.us/docs/meeting-sdk/web/client-view/webinars/#join-webinar-with-registration-required) requires [registration](https://support.zoom.us/hc/en-us/articles/360054446052-Managing-meeting-and-webinar-registration). |
| zakToken | Required to start meetings or webinars on external Zoom user's behalf, the [authorized Zoom user's ZAK token](https://developers.zoom.us/docs/meeting-sdk/auth/#start-meetings-and-webinars-with-a-zoom-users-zak-token). The ZAK can also be used to join as an [authenticated participant](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0063837). |
| leaveUrl | Required for Client View, the url the user is taken to once the meeting is over. |
Example:
```js
var authEndpoint = 'http://localhost:4000'
var sdkKey = 'abc123'
var meetingNumber = '123456789'
var passWord = ''
var role = 0
var userName = 'Vue.js'
var userEmail = ''
var registrantToken = ''
var zakToken = ''
var leaveUrl = 'http://localhost:5173'
```
1. Save `HelloWorld.vue`.
1. Run the app:
`$ npm run dev`
## Usage
1. Navigate to http://localhost:5173 and click "Join Meeting".
### Client View
### Component View
Learn more about [Gallery View requirements](https://developers.zoom.us/docs/meeting-sdk/web/gallery-view/) and [see more product screenshots](https://developers.zoom.us/docs/meeting-sdk/web/gallery-view/#how-views-look-with-and-without-sharedarraybuffer).
## Deployment
The Vue.js Sample App can be easily deployed to [GitHub Pages](#github-pages), or [another static web hosting service](#other-static-web-hosting), like an AWS S3 bucket.
### GitHub Pages
1. Create a repo on [GitHub](https://github.com).
1. Add the remote to your project:
`$ git remote add origin GITHUB_URL/GITHUB_USERNAME/GITHUB_REPO_NAME.git`
1. Open the `vite.config.js` file and replace the `base` value of `/` with your GitHub repo name surrounded by slashes like this: `/GITHUB_REPO_NAME/`.
1. Build your project:
`$ npm run build`
1. Rename the `dist` folder to `docs`
1. Git add, commit, and push your project:
`$ git add -A`
`$ git commit -m "deploying to github"`
`$ git push origin master`
1. On GitHub, in your repo, navigate to the "settings" page, scroll down to the "GitHub Pages" section, and choose the "master branch /docs folder" for the source.
1. Now your project will be deployed to https://GITHUB_USERNAME.github.io/GITHUB_REPO_NAME.
### Other Static Web Hosting
1. Build your project:
`$ npm run build`
1. Deploy the complied `/dist` directory to a static web hosting service, like an AWS S3 bucket.
### Advanced Deployment
For more advanced instructions on deployment, [see the Vue.js Deployment docs](https://vitejs.dev/guide/static-deploy.html).
## Need help?
If you're looking for help, try [Developer Support](https://devsupport.zoom.us) or our [Developer Forum](https://devforum.zoom.us). Priority support is also available with [Premier Developer Support](https://explore.zoom.us/docs/en-us/developer-support-plans.html) plans.