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

Zoom Meeting SDK Sample JavaScript

11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------