https://github.com/zoom/meetingsdk-javascript-sample
Use the Zoom Meeting SDK in (vanilla) JavaScript
https://github.com/zoom/meetingsdk-javascript-sample
sample-app
Last synced: 8 months ago
JSON representation
Use the Zoom Meeting SDK in (vanilla) JavaScript
- Host: GitHub
- URL: https://github.com/zoom/meetingsdk-javascript-sample
- Owner: zoom
- Created: 2022-03-11T03:11:08.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2025-04-17T18:58:21.000Z (11 months ago)
- Last Synced: 2025-04-18T08:54:19.391Z (11 months ago)
- Topics: sample-app
- Language: JavaScript
- Homepage:
- Size: 2.8 MB
- Stars: 35
- Watchers: 2
- Forks: 16
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Zoom Meeting SDK JavaScript sample
Use of this sample app is subject to our [Terms of Use](https://explore.zoom.us/en/legal/zoom-api-license-and-tou/).
This repo is an HTML / CSS / JavaScript website 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-javascript-sample.git`
## Setup
1. Once cloned, navigate to the `meetingsdk-javascript-sample` directory:
`$ cd meetingsdk-javascript-sample`
1. Open the `meetingsdk-javascript-sample` directory in your code editor.
1. Open the `client-view.js` file, and enter values for the variables:
**NEW:** To use the [Component View](https://developers.zoom.us/docs/meeting-sdk/web/component-view/), replace `client-view.js` with `component-view.js`. (The `leaveUrl` is not needed) Also, uncomment the Component View CSS and JavaScript tags and comment out the Client View CSS and JavaScript tags 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 = 'JavaScript'
var userEmail = ''
var registrantToken = ''
var leaveUrl = 'https://zoom.us'
```
1. Save `client-view.js`. (Or `component-view.js` if using Component View.)
## Usage
1. Navigate to index.html in your browser ([or serve over localhost](https://www.npmjs.com/package/http-server)) 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 JavaScript 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. 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 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. Deploy the directory to a static web hosting service, like an AWS S3 bucket.
## 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.