├── README.md ├── client-view.js ├── component-view.js ├── favicon.ico ├── images ├── meetingsdk-web-client-view.gif └── meetingsdk-web-component-view.gif ├── index.html └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Zoom Meeting SDK JavaScript sample 2 | 3 | Use of this sample app is subject to our [Terms of Use](https://explore.zoom.us/en/legal/zoom-api-license-and-tou/). 4 | 5 | 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. 6 | 7 | ![Zoom Meeting SDK Client View](/images/meetingsdk-web-client-view.gif) 8 | 9 | ## Installation 10 | 11 | To get started, clone the repo: 12 | 13 | `$ git clone https://github.com/zoom/meetingsdk-javascript-sample.git` 14 | 15 | ## Setup 16 | 17 | 1. Once cloned, navigate to the `meetingsdk-javascript-sample` directory: 18 | 19 | `$ cd meetingsdk-javascript-sample` 20 | 21 | 1. Open the `meetingsdk-javascript-sample` directory in your code editor. 22 | 23 | 1. Open the `client-view.js` file, and enter values for the variables: 24 | 25 | **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`. 26 | 27 | | Variable | Description | 28 | | -----------------------|-------------| 29 | | 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) | 30 | | 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). | 31 | | meetingNumber | Required, the Zoom Meeting or webinar number. | 32 | | passWord | Optional, meeting password. Leave as empty string if the meeting does not require a password. | 33 | | role | Required, `0` to specify participant, `1` to specify host. | 34 | | userName | Required, a name for the user joining / starting the meeting / webinar. | 35 | | 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. | 36 | | 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). | 37 | | 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). | 38 | | leaveUrl | Required for Client View, the url the user is taken to once the meeting is over. | 39 | 40 | Example: 41 | 42 | ```js 43 | var authEndpoint = 'http://localhost:4000' 44 | var sdkKey = 'abc123' 45 | var meetingNumber = '123456789' 46 | var passWord = '' 47 | var role = 0 48 | var userName = 'JavaScript' 49 | var userEmail = '' 50 | var registrantToken = '' 51 | var leaveUrl = 'https://zoom.us' 52 | ``` 53 | 54 | 1. Save `client-view.js`. (Or `component-view.js` if using Component View.) 55 | 56 | ## Usage 57 | 58 | 1. Navigate to index.html in your browser ([or serve over localhost](https://www.npmjs.com/package/http-server)) and click "Join Meeting". 59 | 60 | ### Client View 61 | 62 | ![Zoom Meeting SDK Client View](/images/meetingsdk-web-client-view.gif) 63 | 64 | ### Component View 65 | 66 | ![Zoom Meeting SDK Component View](/images/meetingsdk-web-component-view.gif) 67 | 68 | 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). 69 | 70 | ## Deployment 71 | 72 | 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. 73 | 74 | ### GitHub Pages 75 | 76 | 1. Create a repo on [GitHub](https://github.com). 77 | 78 | 1. Add the remote to your project: 79 | 80 | `$ git remote add origin GITHUB_URL/GITHUB_USERNAME/GITHUB_REPO_NAME.git` 81 | 82 | 1. Git add, commit, and push your project: 83 | 84 | `$ git add -A` 85 | 86 | `$ git commit -m "deploying to github"` 87 | 88 | `$ git push origin master` 89 | 90 | 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. 91 | 92 | 1. Now your project will be deployed to https://GITHUB_USERNAME.github.io/GITHUB_REPO_NAME. 93 | 94 | ### Other Static Web Hosting 95 | 96 | 1. Deploy the directory to a static web hosting service, like an AWS S3 bucket. 97 | 98 | 99 | ## Need help? 100 | 101 | 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. 102 | -------------------------------------------------------------------------------- /client-view.js: -------------------------------------------------------------------------------- 1 | ZoomMtg.preLoadWasm() 2 | ZoomMtg.prepareWebSDK() 3 | 4 | var authEndpoint = '' 5 | var sdkKey = '' 6 | var meetingNumber = '123456789' 7 | var passWord = '' 8 | var role = 0 9 | var userName = 'JavaScript' 10 | var userEmail = '' 11 | var registrantToken = '' 12 | var zakToken = '' 13 | var leaveUrl = 'https://zoom.us' 14 | 15 | function getSignature() { 16 | fetch(authEndpoint, { 17 | method: 'POST', 18 | headers: { 19 | 'Content-Type': 'application/json' 20 | }, 21 | body: JSON.stringify({ 22 | meetingNumber: meetingNumber, 23 | role: role 24 | }) 25 | }).then((response) => { 26 | return response.json() 27 | }).then((data) => { 28 | console.log(data) 29 | startMeeting(data.signature) 30 | }).catch((error) => { 31 | console.log(error) 32 | }) 33 | } 34 | 35 | function startMeeting(signature) { 36 | 37 | document.getElementById('zmmtg-root').style.display = 'block' 38 | 39 | ZoomMtg.init({ 40 | leaveUrl: leaveUrl, 41 | patchJsMedia: true, 42 | leaveOnPageUnload: true, 43 | success: (success) => { 44 | console.log(success) 45 | ZoomMtg.join({ 46 | signature: signature, 47 | sdkKey: sdkKey, 48 | meetingNumber: meetingNumber, 49 | passWord: passWord, 50 | userName: userName, 51 | userEmail: userEmail, 52 | tk: registrantToken, 53 | zak: zakToken, 54 | success: (success) => { 55 | console.log(success) 56 | }, 57 | error: (error) => { 58 | console.log(error) 59 | }, 60 | }) 61 | }, 62 | error: (error) => { 63 | console.log(error) 64 | } 65 | }) 66 | } -------------------------------------------------------------------------------- /component-view.js: -------------------------------------------------------------------------------- 1 | const client = ZoomMtgEmbedded.createClient() 2 | 3 | let meetingSDKElement = document.getElementById('meetingSDKElement') 4 | 5 | var authEndpoint = '' 6 | var sdkKey = '' 7 | var meetingNumber = '123456789' 8 | var passWord = '' 9 | var role = 0 10 | var userName = 'JavaScript' 11 | var userEmail = '' 12 | var registrantToken = '' 13 | var zakToken = '' 14 | 15 | function getSignature() { 16 | fetch(authEndpoint, { 17 | method: 'POST', 18 | headers: { 19 | 'Content-Type': 'application/json' 20 | }, 21 | body: JSON.stringify({ 22 | meetingNumber: meetingNumber, 23 | role: role 24 | }) 25 | }).then((response) => { 26 | return response.json() 27 | }).then((data) => { 28 | console.log(data) 29 | startMeeting(data.signature) 30 | }).catch((error) => { 31 | console.log(error) 32 | }) 33 | } 34 | 35 | function startMeeting(signature) { 36 | 37 | client.init({zoomAppRoot: meetingSDKElement, language: 'en-US', patchJsMedia: true, leaveOnPageUnload: true}).then(() => { 38 | client.join({ 39 | signature: signature, 40 | sdkKey: sdkKey, 41 | meetingNumber: meetingNumber, 42 | password: passWord, 43 | userName: userName, 44 | userEmail: userEmail, 45 | tk: registrantToken, 46 | zak: zakToken 47 | }).then(() => { 48 | console.log('joined successfully') 49 | }).catch((error) => { 50 | console.log(error) 51 | }) 52 | }).catch((error) => { 53 | console.log(error) 54 | }) 55 | } 56 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoom/meetingsdk-javascript-sample/85298a394a5f3fc9673db4d1f39416d3a5f01a4c/favicon.ico -------------------------------------------------------------------------------- /images/meetingsdk-web-client-view.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoom/meetingsdk-javascript-sample/85298a394a5f3fc9673db4d1f39416d3a5f01a4c/images/meetingsdk-web-client-view.gif -------------------------------------------------------------------------------- /images/meetingsdk-web-component-view.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoom/meetingsdk-javascript-sample/85298a394a5f3fc9673db4d1f39416d3a5f01a4c/images/meetingsdk-web-component-view.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zoom Meeting SDK Sample JavaScript 6 | 7 | 8 | 9 | 10 |
11 |

Zoom Meeting SDK Sample JavaScript

12 | 13 | 14 |
15 | 16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | min-width: 0 !important; 3 | } 4 | 5 | #zmmtg-root { 6 | display: none; 7 | min-width: 0 !important; 8 | } 9 | 10 | main { 11 | width: 70%; 12 | margin: auto; 13 | text-align: center; 14 | } 15 | 16 | main button { 17 | margin-top: 20px; 18 | background-color: #2D8CFF; 19 | color: #ffffff; 20 | text-decoration: none; 21 | padding-top: 10px; 22 | padding-bottom: 10px; 23 | padding-left: 40px; 24 | padding-right: 40px; 25 | display: inline-block; 26 | border-radius: 10px; 27 | cursor: pointer; 28 | border: none; 29 | outline: none; 30 | } 31 | 32 | main button:hover { 33 | background-color: #2681F2; 34 | } 35 | --------------------------------------------------------------------------------