@zoomus/websdk

v2.18.3

Published

9 months ago

Zoom Web SDK

Downloads

36,025

0High
0Medium
0Low

THIS PACKAGE HAS MOVED

Please see the latest official package @zoom/meetingsdk, thank you!

Zoom Meeting SDK for Web

Use of this SDK is subject to our Terms of Use

The Zoom Meeting SDK embeds the Zoom Meeting and Webinar experience in a website through a highly optimized WebAssembly module.

Installation

In your frontend project, install the Meeting SDK:

$ npm install @zoomus/websdk --save

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

Usage - Component View

Zoom Meeting SDK Component View

The Component View provides the option to display the Meeting SDK in components on your page. This allows for a more flexible design.

In the component file where you want to use the 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 Meeting SDK. It will be hidden until you start or join a meeting or webinar.

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

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

let meetingSDKElement = document.getElementById('meetingSDKElement')

client.init({ zoomAppRoot: meetingSDKElement, language: 'en-US' })

Now we will start or join the meeting or webinar. Here are the required properties for the client.join() function. You can get the Meeting or Webinar number and passcode from the Zoom APIs.

| Key | Value Description | |---|---| | sdkKey | Required, your SDK Key. | | signature | Required, your SDK JWT. | | meetingNumber | Required, the Zoom Meeting or Webinar Number. | | password | Required, leave as empty string if the Meeting or Webinar only requires the waiting room. | | userName | Required, the name of the user starting or joining the Meeting or Webinar. | | userEmail | Required for Webinar, optional for Meeting, required for Meeting and Webinar if registration is required. The email of the user starting or joining the Meeting or Webinar. | | tk | Required if your Meeting or Webinar requires registration. The registrant's token. | | zak | Required if you are starting a Meeting or Webinar. The host's Zoom Access Key (ZAK). |

Then, start or join the meeting or webinar.

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

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

Usage - Client View

Zoom Meeting SDK Client View

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.

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

import { ZoomMtg } from '@zoomus/websdk'

ZoomMtg.preLoadWasm()
ZoomMtg.prepareWebSDK()

// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load('en-US')
ZoomMtg.i18n.reload('en-US')

ZoomMtg.setZoomJSLib('https://source.zoom.us/{VERSION_NUMBER}/lib', '/av')

When imported, the Meeting SDK adds new elements to the DOM to handle client overlays and accessibility elements. To manage or manipulate this DOM element within your app see this guide.

Add the following styles to the HTML page you want the Meeting SDK to live on, or index.html if you are using a single page app framework.

<head>
  <!-- For Client View -->
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/{VERSION_NUMBER}/css/bootstrap.css" />
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/{VERSION_NUMBER}/css/react-select.css" />
</head>

Replace {VERSION_NUMBER} in the code above with the latest version number.

Back in the component file we will init and start or join the meeting or webinar. Here are the required properties for the ZoomMtg.init() function.

| Key | Value Description | |---|---| | leaveUrl | Required, the URL the participant is taken to once they leave or when the meeting ends. |

Here are the required properties for the ZoomMtg.join() function. You can get the Meeting or Webinar number and passcode from the Zoom APIs.

| Key | Value Description | |---|---| | sdkKey | Required, your SDK Key. | | signature | Required, your SDK JWT. | | meetingNumber | Required, the Zoom Meeting or Webinar Number. | | passWord | Required, leave as empty string if the Meeting or Webinar only requires the waiting room. | | userName | Required, the name of the user starting or joining the Meeting or Webinar. | | userEmail | Required for Webinar, optional for Meeting, required for Meeting and Webinar if registration is required. The email of the user starting or joining the Meeting or Webinar. | | tk | Required if your Meeting or Webinar requires registration. The registrant's token. | | zak | Required if you are starting a Meeting or Webinar. The host's Zoom Access Key (ZAK). |

Then, init, and start or join the meeting or webinar.

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

    ZoomMtg.join({
      signature: signature,
      meetingNumber: meetingNumber,
      userName: userName,
      sdkKey: sdkKey,
      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, see our Meeting SDK docs.

Sample Apps

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme