@zoomus/websdk

Zoom Web SDK

Usage no npm install needed!

<script type="module">
  import zoomusWebsdk from 'https://cdn.skypack.dev/@zoomus/websdk';
</script>

README

Zoom Web SDK

Use of this SDK is subject to our Terms of Use

Open Source Software (OSS) Attribution

Starting from version 1.9.1, an OSS attribution file (oss_attribution.txt) will be provided in each release. Some licenses for OSS contained in our products give you the right to access the source code under said license. You may obtain a copy of source code for the relevant OSS via the following link: https://zoom.us/opensource/source. Please obtain independent legal advice or counsel to determine your responsibility to make source code available under any specific OSS project.

About

The Zoom Web Meeting SDK NPM package is for implementing the Zoom Meeting Web SDK with a frontend framework like React or Angular that uses webpack / babel.

There are now two views to choose from, Component, and Client.

NOTE: Please read how to improve Web SDK performance in Chrome.

Installation

In your frontend project, install the Web SDK:

$ npm install @zoomus/websdk --save

Use Component View

Usage

In the component file where you want to use the Web Meeting SDK, import ZoomMtgEmbedded and create the client.

import ZoomMtgEmbedded from "@zoomus/websdk/embedded";

const client = ZoomMtgEmbedded.createClient();

In the HTML file, set an id attribute on the HTML element where you want to render the Web Meeting SDK. It will be hidden until you start or join a meeting.

<div id=”meetingSDKElement”>
   <!-- Zoom Meeting SDK Rendered Here -->
</div>

Back in the JavaScript file, init the SDK with the HTML element above:

let meetingSDKElement = document.getElementById('meetingSDKElement');

client.init({
  debug: true,
  zoomAppRoot: meetingSDKElement,
  language: 'en-US',
  customize: {
    meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
    toolbar: {
      buttons: [
        {
          text: 'Custom Button',
          className: 'CustomButton',
          onClick: () => {
            console.log('custom button');
          }
        }
      ]
    }
  }
});

Here are the required properties for the client.join() function. You can get the Meeting Number and password from the Zoom Meeting APIs.

Parameter Description
apiKey Required, your Zoom JWT App API Key.
signature Required, your signature. Instructions here.
meetingNumber Required, the Zoom Meeting number.
password Requried, leave as empty string if the meeting only requires the waiting room.
userName Required, the name of the user starting or joining the meeting.
userEmail Optional, the email of the user starting or joining the meeting.

Then, join the meeting.

client.join({
    apiKey: apiKey,
    signature: signature,
    meetingNumber: meetingNumber,
    password: password,
    userName: userName
})

For the full list of features and event listeners, as well as additional guides, please see our Meeting SDK docs.

Use Client View

Usage

In the component file where you want to use the Web SDK, import ZoomMtg and call the preLoadWasm() and prepareJssdk() functions.

import { ZoomMtg } from '@zoomus/websdk';

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

NOTE: The following directory (already in node_modules) must be accessible in your url path:

  • node_modules/@zoomus/websdk/dist/lib/

Or, you can set a custom path to the Web SDK's lib directory using:

ZoomMtg.setZoomJSLib('http://localhost:9999/custom/path/to/lib/', '/av')

NOTE: The following files (already in node_modules) must be globally accessible (equivalent of link and script tag in index.html):

  • node_modules/@zoomus/websdk/dist/css/bootstrap.css
  • node_modules/@zoomus/websdk/dist/css/react-select.css

Set the config variables (reference below):

// setup your signautre endpoint here: https://github.com/zoom/websdk-sample-signature-node.js
var signatureEndpoint = 'http://localhost:4000'
var apiKey = 'JWT_API_KEY'
var meetingNumber = 123456789
var role = 0
var leaveUrl = 'http://localhost:9999'
var userName = 'WebSDK'
var userEmail = ''
var passWord = ''

Config variables reference:

Variable Description
signatureEndpoint Required, the endpoint url that returns a signature. Get a signature endpoint here.
apiKey Required, your Zoom JWT App API Key.
meetingNumber The Zoom meeting / webinar number.
role Required, 0 to join the meeting / webinar, 1 to start the meeting.
leaveUrl Required, the URL the user is taken to once the meeting is over.
userName Required, A name for the user joining / starting the meeting / webinar.
userEmail Optional, the user joining / starting the meeting / webinar.
passWord Optional, meeting password. Leave as empty string if the meeting does not require a password.

Generate the meeting signature to authenticate, instructions here.

var signature = 'eHUzSlBhQV9SSlcyLTlsNV9IQWFMQS4xMjM0NTY3ODkuMTU4MzE2OTUzODc3My4wLkJMNEtiM3FINGx5ZzA1MUZtbGJOcGtPRnlFQS9lQUR2bGllVzJNNGZJeWs9'

Then init, and join the meeting.

ZoomMtg.init({
  leaveUrl: leaveUrl,
  isSupportAV: true,
  success: (success) => {
    console.log(success)

    ZoomMtg.join({
      signature: signature,
      meetingNumber: meetingNumber,
      userName: userName,
      apiKey: apiKey,
      userEmail: userEmail,
      passWord: passWord,
      success: (success) => {
        console.log(success)
      },
      error: (error) => {
        console.log(error)
      }
    })

  },
  error: (error) => {
    console.log(error)
  }
})

For the full list of features and event listeners, as well as additional guides, please see our Meeting SDK docs.

Sample App

Checkout the Zoom Web SDK Sample App, and the Simple Signature Setup Sample App.

Need help?

If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.