Setting the file. One moment.
Skill 147 · Build Zoom Video SDK App
Subchapter 147.9
references/ui-toolkit.mdMarkdown6 KBView on GitHub
The Video SDK UI Toolkit provides ready-to-use video components so you don’t have to build the UI from scratch. Available for Web, iOS, and Android.
| Platform | UI Toolkit | Package/Repo |
|---|---|---|
| Web | Yes | @zoom/videosdk-zoom-ui-toolkit |
| iOS | Yes | zoom/videosdk-zoom-ui-toolkit-ios (opens in a new tab) |
| Android | Yes | zoom/videosdk-uitoolkit-android-sample (opens in a new tab) |
| React Native | No | Use SDK + custom UI |
| Flutter | No | Use SDK + custom UI |
npm install @zoom/videosdk-zoom-ui-toolkit --saveimport uitoolkit from "@zoom/videosdk-zoom-ui-toolkit";
import "@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css";<link rel="stylesheet" href="https://source.zoom.us/uitoolkit/2.3.5/videosdk-zoom-ui-toolkit.css" />
<script src="https://source.zoom.us/uitoolkit/2.3.5/videosdk-zoom-ui-toolkit.min.umd.js"></script>
<script>
const uitoolkit = window.UIToolkit;
</script>Add CSS to angular.json:
"styles": [
"node_modules/@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css"
]<div id="sessionContainer"></div>import uitoolkit from "@zoom/videosdk-zoom-ui-toolkit";
import "@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css";
const config = {
videoSDKJWT: "your-jwt-token",
sessionName: "SessionA",
userName: "UserA",
sessionPasscode: "abc123",
featuresOptions: {
preview: true,
video: true,
audio: true,
share: true,
chat: true,
users: true,
settings: true,
leave: true,
},
};
const sessionContainer = document.getElementById("sessionContainer");
uitoolkit.joinSession(sessionContainer, config);Toggle components on/off via featuresOptions:
| Component | Description | Paid Plan? |
|---|---|---|
preview | Pre-session device selection, virtual background | No |
video | Video layout for sending/receiving | No |
audio | Audio button and controls | No |
share | Screen sharing | No |
chat | In-session chat | No |
users | Participant list | No |
settings | Device config, virtual background, stats | No |
viewMode | Grid/speaker view options | No |
leave | Leave/end session button | No |
invite | Invite via link | No |
theme | Theme color selection | No |
feedback | Session feedback form | No |
troubleshoot | Zoom Probe SDK troubleshooting | No |
subsession | Breakout rooms button | No |
playback | Media file playback | No |
recording | Cloud recording | Yes |
phone | Join by phone audio | Yes |
caption | Live translations | Yes |
import uitoolkit from "@zoom/videosdk-zoom-ui-toolkit";
import "@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css";
import { useEffect, useRef } from "react";
function VideoSession({ jwt, sessionName, userName }) {
const containerRef = useRef(null);
useEffect(() => {
const config = {
videoSDKJWT: jwt,
sessionName,
userName,
sessionPasscode: "abc123",
featuresOptions: {
video: true,
audio: true,
chat: true,
users: true,
leave: true,
},
};
if (containerRef.current) {
uitoolkit.joinSession(containerRef.current, config);
}
return () => {
if (containerRef.current) {
uitoolkit.closeSession(containerRef.current);
}
};
}, [jwt, sessionName, userName]);
return <div ref={containerRef} style={{ height: '600px' }} />;
}// Session events
uitoolkit.onSessionJoined(() => {
console.log("Session joined");
});
uitoolkit.onSessionClosed(() => {
console.log("Session closed");
});
// Unsubscribe
uitoolkit.offSessionJoined(callback);
uitoolkit.offSessionClosed(callback);// Hide all components
uitoolkit.hideAllComponents();
// Show/hide individual components
uitoolkit.showControlsComponent(container);
uitoolkit.hideControlsComponent(container);
uitoolkit.showChatComponent(container);
uitoolkit.hideChatComponent(container);
uitoolkit.showUsersComponent(container);
uitoolkit.hideUsersComponent(container);
uitoolkit.showSettingsComponent(container);
uitoolkit.hideSettingsComponent(container);uitoolkit.closeSession(sessionContainer);