Integrate SDK into your app


Before using the Video SDK, you must:

  • Get an SDK key and secret for authentication. Login to the Zoom Marketplace and Create a SDK App to get SDK keys and secrets.
  • Have a camera and a microphone to use.
  • Have a backend service to provide the Video SDK token. See Generate Signature for details.

You can install the SDK into your project using npm, or download the package directly from the marketplace. See below for details.

Before you get started

For optimized Web SDK performance on Chrome, enable origin trials for SharedArrayBuffers in non-isolated pages on Desktop platforms and WebCodecs.

See the Mozilla Developer Network (MDN) Web Docs for SharedArrayBuffers and the web.dev article, Video processing with WebCodecs, for details.

NPM

Follow the steps below to use npm.

  1. Install the Zoom Video SDK package.
npm install @zoom/videosdk --save
  1. Import the module into your project.
import ZoomVideo from '@zoom/videosdk';
const client = ZoomVideo.createClient();
  1. Initialize the client. To initialize the client, you can use the Zoom Video SDK CDN or self-host the assets.

    • The Video SDK relies on optimized web worker and web assembly modules to handle audio, video, and screen streaming.
    • These modules must be loaded before you can use the SDK.
    • We provide these as assets in the included node_modules/@zoom/videosdk/dist/lib folder or from our CDN.

Zoom Video SDK CDN

To use the CDN, use the Global string:

const client = ZoomVideo.createClient();
client.init('en-US', 'Global');

Self-hosted

The following directory in node_modules must be accessible in your url path: node_modules/@zoom/videosdk/dist/lib

For example, you could place the lib directory in your projects public assets directory, or use webpack’s copy plugin to copy it to the public directory when starting the server.

You can test it by navigating to one of the included files: http://localhost:9999/assets/lib/webim.min.js

Example with webpack copy plugin

// Example webpack config:
{
  ... other configuration
  plugins:[
    new CopyWebpackPlugin({
      patterns:[
        from:'node_modules/@zoom/videosdk/dist/lib',
        to:'dest/zoom-libs' // The destination folder, which you can rename as you wish
      ]
    })
  ]
}
// ...
// Inside your project's class:
const client = ZoomVideo.createClient();
client.init('en-US', 'path to the zoom-libs');

Download from Marketplace or Developer portal

While the Video SDK also includes a working demo app, you may prefer incorporating the SDK into your own project. Follow the steps below to do so.

  1. Copy the SDK package from the @zoom/videosdk folder in the demo app to your project.

  2. Import the module inside your project. Import from the local path. For example, if located at the project root:

import ZoomVideo from '@zoom/videosdk';
const client = ZoomVideo.createClient();
  1. Host the dependent assets so that they are accessible to your project and initialize the client with them. For example, when the user navigates to yourapp.example.com/dest/zoom-libs/file.js in the browser, it should display the javascript file and not return a 404. Here’s an example if you’re using a webpack configuration.
// Example webpack config
{
  ... other configuration
  plugins:[
    new CopyWebpackPlugin({
      patterns:[
        from:'@zoom/videosdk/dist/lib',
        to:'dest/zoom-libs' // The dest folder
      ]
    })
  ]
}

// Inside your project's class:
const client = ZoomVideo.createClient();
client.init('en-US', 'path to zoom-libs');

Starting and joining a session

Create and join a session from within your app. See below for an example.

Note that the order of operations is very important. Look-up JavaScript Promises to learn more about how to do this.

import ZoomVideo from '@zoom/videosdk';
// ...
const client = ZoomVideo.createClient();
await client.init('en-US', 'path to zoom-libs');
await client.join(topic, signature, name, password);
// ...