Video SDK UI Toolkit

Prebuilt Zoom Video UI samples

Vanilla JavaScript, Simple, and React starter pages using the local Zoom Video SDK UI Toolkit bundle and the Node token service at nodejs.asdc.cc/video.

Project notes

Live demos

OriginalGeneric dashboard container. EducationCram school and tutoring shell. HealthcareTelemedicine dashboard shell. Real estateProperty tour dashboard shell. SimpleMinimal join/start UI Toolkit demo. ReactReact 18 boilerplate build.

Code samples

HTML shell

<head>
  <link rel="stylesheet" href="./videosdk-ui-toolkit/dist/videosdk-ui-toolkit.css">
  <script src="./videosdk-ui-toolkit/index.js" type="module"></script>
</head>
<body>
  <button id="joinSessionBtn" type="button">Join session</button>
  <div id="sessionContainer"></div>
</body>

Session script

import uitoolkit from './videosdk-ui-toolkit/index.js';

const sessionContainer = document.getElementById('sessionContainer');
const joinSessionButton = document.getElementById('joinSessionBtn');

joinSessionButton.addEventListener('click', () => {
  const params = new URLSearchParams(window.location.search);
  const config = {
    videoSDKJWT: params.get('jwt') || '',
    sessionName: params.get('sessionName') || 'webchun6871',
    userName: params.get('userName') || 'chun',
    sessionPasscode: params.get('sessionPasscode') || '12345678',
    features: ['video', 'audio', 'share', 'chat', 'users', 'settings'],
  };

  uitoolkit.joinSession(sessionContainer, config);
});

Package commands

# Local bundle used by these static demos:
./videosdk-ui-toolkit/index.js
./videosdk-ui-toolkit/dist/videosdk-ui-toolkit.css

# NPM package for the React boilerplate:
npm install @zoom/videosdk-ui-toolkit --save