Zoom Meeting SDK web sample
Use of this sample app is subject to our Terms of Use.
The Zoom Meeting SDK for web embeds the Zoom Meeting and Zoom Webinar experiences on a webpage through a highly optimized WebAssembly module.
To get started, clone the repo:
$ git clone https://github.com/zoom/sample-app-web.git
Once cloned, navigate to the sample-app-web/CDN
directory for the Client View CDN sample, or sample-app-web/Local
for the Client View NPM sample, or sample-app-web/Components
for the Component View NPM sample:
$ cd sample-app-web/CDN
or $ cd sample-app-web/Local
or $ cd sample-app-web/Components
Then install the dependencies:
$ npm install
Open the directory in your code editor.
Open the sample-app-web/CDN/js/index.js
or sample-app-web/Local/js/index.js
or sample-app-web/Components/public/tools/nav.js
file respectively, and insert your Zoom Meeting SDK Key and Secret or Client ID and Client Secret for Meeting SDK app type's created after February 11, 2023, found on the App Credentials page in the Zoom App Marketplace:
Key | Value Description |
---|---|
CLIENT_ID |
Your Client ID or SDK Key. Required. |
CLIENT_SECRET |
Your Client Secret or SDK Secret. Required. |
Example:
var CLIENT_ID = "YOUR_CLIENT_ID_OR_SDK_KEY"
var CLIENT_SECRET = "YOUR_CLIENT_SECRET_OR_SDK_SECRET"
Reminder to not publish this sample app as is. Replace the Meeting SDK JWT generator with a backend Meeting SDK JWT generator to keep your SDK Secret safe.
Save index.js
or nav.js
respectively.
Run the app:
$ npm start
Navigate to http://localhost:9999 for the CDN
or
Local
sample, or http://localhost:3000 for the Components
sample. Then, enter in a Meeting or Webinar number and passcode, choose host or attendee (participant), and, click "join".
The Client View provides the option to display the Meeting SDK as a full page. This allows for a familiar Zoom Meeting experience because the Client View is the same as the Zoom Web Client, except it lives inside your own web page.
If you are using Nodejs 16, please use npm install --force
to proceed with the installation.
The Component View provides the option to display the Meeting SDK in components on your page. This allows for a more flexible design.
Learn more about Gallery View requirements and see more product screenshots.
For the full list of features and event listeners, as well as additional guides, see our Meeting SDK docs.
If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.