Video SDK Web UI Toolkit is open source

The Zoom Video SDK UI Toolkit is a prebuilt video chat user interface powered by the Zoom Video SDK. The UI Toolkit enables you to start using a core set of Video SDK features in your app with very little code.

Thanks to valuable community feedback, the Video SDK UI Toolkit for Web is now open-source! This change empowers you to seamlessly integrate video experiences into your products, offering limitless possibilities for customization. In this blog post, we’ll guide you through setting up the UI Toolkit for local development. We'd love community contributions to the project.

Prerequisites

  • Node & NPM LTS
  • Zoom Video SDK Account

The source code for the Web UI Toolkit can be found on the Zoom GitHub. If you just want to use the UI Toolkit in your app, we publish releases to NPM. You can get started with the UI Toolkit Sample App.

Setup

  1. Clone the UI Toolkit repo:
git clone https://github.com/zoom/videosdk-ui-toolkit-web.git
  1. Navigate to the videosdk-ui-toolkit-web directory:
cd videosdk-ui-toolkit-web
  1. In the src/config directory, copy the devTemplate.ts file and create a dev.ts file for entering your credentials:
cp src/config/devTemplate.ts src/config/dev.ts
  1. Enter your Video SDK Key and Secret and save your changes:
let devConfig = {
    sdkKey: "your-sdk-key",
    sdkSecret: "your-sdk-secret",
    webEndpoint: "zoom.us",
};

The dev.ts file contains sensitive credentials and is already in .gitignore. Never commit this file to version control.

  1. Install the dependencies and run the application:
npm i && npm run dev

You can open http://localhost:5001/ in a browser to view the app.

Project structure and app flow

The Web UI Toolkit is built with React. The repo contains a Vite project to build and run the UI Toolkit. The Vite entry point is the index.html file in the root directory. The html file imports the src/main.tsx file which mounts the React App, and sets up a react-redux store. The React app renders the default component from src/index.tsx.

The app uses credentials from the src/config/dev.ts file we created earlier. The src/uikit/index.tsx file contains the public API and the src/uikit/UIToolkit.tsx file is the main component that renders the UI Toolkit from the src/App.tsx component.

Note: By default, the dev environment app auto-clicks the Join Session button to join the session. In index.tsx, you can comment out lines 323-331 to disable this behavior.

Build and deploy

Use this command to build the app for distribution:

npm run build

This generates a distTmp folder that can be copied to an external project and deployed via CDN.

We'll continue to look for community feedback and suggestions to grow and improve your Video SDK experience. If there's a feature you'd like to see, please let us know on the Zoom Developer Forum or open a pull request!