Zoom Meeting SDK for Web

repository·master·Indexed 43 days ago

A WebAssembly-powered SDK for embedding Zoom Meeting and Webinar experiences into web applications. Version 6.5.0 supports two integration modes: Client View for a full-page experience via ZoomMtg, and Component View for embeddable UI components via ZoomMtgEmbedded. Includes support for Zoom for Government (ZFG) configurations.

Tokens: 2.5K
Snippets: 9
Records: 10
Agent score: 6%

What's inside Zoom Meeting SDK

Compare Client View and Component View
master
The Meeting SDK offers two integration modes depending on your UI requirements:
- Client View: Provides a full-page meeting experience that is identical to the standard Zoom Web Client. Use this for a seamless, full-screen Zoom experience.
- Component View: Provides flexible, embeddable meeting components. This is designed for desktop browsers and allows you to style and position the meeting UI within your existing application design. Note: Component View is not intended for mobile environments; use Client View for mobile use cases.
https://github.com/zoom/meetingsdk-web/blob/master/README.md

Implement Component View with ZoomMtgEmbedded

master

Component View allows you to embed meeting components into a specific HTML container. You must create a client using ZoomMtgEmbedded.createClient(), provide a DOM element as the zoomAppRoot during init(), and then call join().

import ZoomMtgEmbedded from "@zoom/meetingsdk/embedded"

// 1. Create the client
const client = ZoomMtgEmbedded.createClient()

// 2. Identify the container
const meetingSDKElement = document.getElementById('meetingSDKElement')

// 3. Initialize and Join
client.init({
  zoomAppRoot: meetingSDKElement,
  language: 'en-US',
  patchJsMedia: true
}).then(() => {
  console.log('SDK initialized successfully')

  client.join({
    signature: signature,
    meetingNumber: meetingNumber,
    password: password,
    userName: userName,
    userEmail: userEmail
  }).then(() => {
    console.log('Joined meeting successfully')
  }).catch((error) => {
    console.error('Failed to join meeting:', error)
  })
}).catch((error) => {
  console.error('Failed to initialize SDK:', error})
})

Configure Zoom for Government (ZFG)

master

To use Zoom for Government, you must apply for a new SDK key at the ZFG Marketplace. You can either use a specific ZFG version of the package or configure the existing SDK to use ZFG endpoints.

// Option 1: Use ZFG-Specific Version
{
  "dependencies": {
    "@zoom/meetingsdk": "4.0.7-zfg"
  }
}

// Option 2: Configure ZFG Endpoints (Client View)
ZoomMtg.setZoomJSLib("https://source.zoomgov.com/{VERSION}/lib", "/av")
ZoomMtg.init({
  webEndpoint: "www.zoomgov.com",
  // ... other options
})

// Option 2: Configure ZFG Endpoints (Component View)
const client = ZoomMtgEmbedded.createClient()
client.init({
  assetPath: 'https://source.zoomgov.com/{VERSION}/lib/av',
  webEndpoint: "www.zoomgov.com",
  // ... other options
})

Implement Client View with ZoomMtg

master

Client View provides a full-page experience. To use it, you must import ZoomMtg, initialize the SDK with preLoadWasm() and prepareWebSDK(), call ZoomMtg.init() to configure settings, and finally call ZoomMtg.join() to enter the meeting.

import { ZoomMtg } from '@zoom/meetingsdk'

// 1. Prepare the SDK
ZoomMtg.preLoadWasm()
ZoomMtg.prepareWebSDK()

// 2. Initialize and Join
ZoomMtg.init({
  leaveUrl: 'https://yourapp.com/meeting-ended',
  patchJsMedia: true,
  success: (success) => {
    console.log('SDK initialized successfully')

    ZoomMtg.join({
      signature: signature,
      meetingNumber: meetingNumber,
      userName: userName,
      userEmail: userEmail,
      passWord: passWord,
      success: (success) => {
        console.log('Joined meeting successfully')
      },
      error: (error) => {
        console.error('Failed to join meeting:', error)
      }
    })
  },
  error: (error) => {
    console.error('Failed to initialize SDK:', error)
  }
})

Install the Zoom Meeting SDK
master
Install the Meeting SDK in your frontend project using npm.
```
npm install @zoom/meetingsdk --save
```
https://github.com/zoom/meetingsdk-web/blob/master/README.md
Configure UTF-8 encoding for the Meeting SDK
master
To prevent text or data issues, ensure your web application's entry point (index.html) includes the UTF-8 charset meta tag.
```
<meta charset="UTF-8" />
```
https://github.com/zoom/meetingsdk-web/blob/master/README.md
Install and import the Zoom Meeting SDK
master
The Zoom Meeting SDK is exported as a single module from the entrypoint. In a frontend project, you can require or import the SDK to access its core functionality for joining meetings in either Client View or Component View. The SDK is distributed as a UMD (Universal Module Definition) bundle.
```
const ZoomMtg = require('@zoom/meetingsdk');
// or if using ES modules
import ZoomMtg from '@zoom/meetingsdk';
```
https://github.com/zoom/meetingsdk-web/blob/master/index.js

Reference: ZoomMtg.join() parameters (Client View)

master

Parameters required to join a meeting in Client View. These values are typically retrieved via Zoom APIs.

| Parameter | Description |
|-----------|-------------|
| `signature` | **Required** - Your [SDK JWT](https://developers.zoom.us/docs/meeting-sdk/auth/) |
| `meetingNumber` | **Required** - The Zoom Meeting or Webinar Number |
| `userName` | **Required** - Name of the user joining the meeting |
| `passWord` | **Required** - Meeting password (empty string if only waiting room required) |
| `userEmail` | **Required for Webinars** - User email (also required for registration) |
| `tk` | **Required for Registration** - [Registrant's token](https://support.zoom.us/hc/en-us/articles/360054446052-Managing-meeting-and-webinar-registration) |
| `zak` | **Required for Starting** - Host's [Zoom Access Key (ZAK)](https://developers.zoom.us/docs/meeting-sdk/auth/#start-meetings-and-webinars-with-a-zoom-users-zak-token) |

Reference: ZoomMtg.init() parameters (Client View)
master
Parameters for initializing the Client View SDK.
```
| Parameter | Description |
|-----------|-------------|
| `leaveUrl` | **Required** - URL where participants are redirected when leaving the meeting |
```
https://github.com/zoom/meetingsdk-web/blob/master/README.md

Reference: ZoomMtgEmbedded.init() parameters (Component View)

master

Parameters for initializing the Component View SDK.

| Parameter | Description |
|-----------|-------------|
| `signature` | **Required** - Your [SDK JWT](https://developers.zoom.us/docs/meeting-sdk/auth/) |
| `meetingNumber` | **Required** - The Zoom Meeting or Webinar Number |
| `userName` | **Required** - Name of the user joining the meeting |
| `password` | **Required** - Meeting password (empty string if only waiting room required) |
| `userEmail` | **Required for Webinars** - User email (also required for registration) |
| `tk` | **Required for Registration** - [Registrant's token](https://support.zoom.us/hc/en-us/articles/360054446052-Managing-meeting-and-webinar-registration) |
| `zak` | **Required for Starting** - Host's [Zoom Access Key (ZAK)](https://developers.zoom.us/docs/meeting-sdk/auth/#start-meetings-and-webinars-with-a-zoom-users-zak-token) |