Build custom video calling experiences with Zoom Video SDK. The skill guides session joining, audio and video control, participant event handling, and custom interfaces, with references for web, mobile, and desktop implementations.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Reference skill for Zoom Video SDK. Use after routing to a custom-session workflow when the user needs full control over the video experience rather than an actual Zoom meeting.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Background reference for fully custom video-session products. Prefer plan-zoom-product first when the boundary between Meeting SDK and Video SDK is still unclear.
Build custom video experiences powered by Zoom's infrastructure.
join_url, or Meeting SDK join payload fields (meetingNumber, passWord).| Feature | Meeting SDK | Video SDK |
|---|---|---|
| UI | Default Zoom UI or Custom UI | Fully custom UI (you build it) |
| Experience | Zoom meetings | Video sessions |
| Branding | Limited customization | Full branding control |
| Features | Full Zoom features | Core video features |
Video SDK gives you full control over the UI:
| Option | Description |
|---|---|
| UI Toolkit | Pre-built React components (low-code) |
| Custom UI | Build your own UI using the SDK APIs |
Need help with OAuth or signatures? See the zoom-oauth skill for authentication flows.
Need pre-join diagnostics on web? Use probe-sdk before Video SDK
join()to reduce first-minute failures.
Start troubleshooting fast: Use the 5-Minute Runbook before deep debugging.
import ZoomVideo from '@zoom/videosdk';
const client = ZoomVideo.createClient();
await client.init('en-US', 'Global', { patchJsMedia: true });
await client.join(topic, signature, userName, password);
// IMPORTANT: getMediaStream() ONLY works AFTER join()
const stream = client.getMediaStream();
await stream.startVideo();
await stream.startAudio();
WARNING: Ad blockers block
source.zoom.us. Self-host the SDK to avoid issues.
# Download SDK locally
curl "https://source.zoom.us/videosdk/zoom-video-1.12.0.min.js" -o js/zoom-video-sdk.min.js
<script src="js/zoom-video-sdk.min.js"></script>
// CDN exports as WebVideoSDK, NOT ZoomVideo
// Must use .default property
const ZoomVideo = WebVideoSDK.default;
const client = ZoomVideo.createClient();
await client.init('en-US', 'Global', { patchJsMedia: true });
await client.join(topic, signature, userName, password);
// IMPORTANT: getMediaStream() ONLY works AFTER join()
const stream = client.getMediaStream();
await stream.startVideo();
await stream.startAudio();
When using <script type="module"> with CDN, SDK may not be loaded yet:
// Wait for SDK to load before using
function waitForSDK(timeout = 10000) {
return new Promise((resolve, reject) => {
if (typeof WebVideoSDK !== 'undefined') {
resolve();
return;
}
const start = Date.now();
const check = setInterval(() => {
if (typeof WebVideoSDK !== 'undefined') {
clearInterval(check);
resolve();
} else if (Date.now() - start > timeout) {
clearInterval(check);
reject(new Error('SDK failed to load'));
}
}, 100);
});
}
// Usage
await waitForSDK();
const ZoomVideo = WebVideoSDK.default;
const client = ZoomVideo.createClient();
The SDK has a strict lifecycle. Violating it causes silent failures.
1. Create client: client = ZoomVideo.createClient()
2. Initialize: await client.init('en-US', 'Global', options)
3. Join session: await client.join(topic, signature, userName, password)
4. Get stream: stream = client.getMediaStream() ← ONLY AFTER JOIN
5. Start media: await stream.startVideo() / await stream.startAudio()
Common Mistake (Silent Failure):
// ❌ WRONG: Getting stream before joining
const client = ZoomVideo.createClient();
await client.init('en-US', 'Global');
const stream = client.getMediaStream(); // Returns undefined!
await client.join(...);
// ✅ CORRECT: Get stream after joining
const client = ZoomVideo.createClient();
await client.init('en-US', 'Global');
await client.join(...);
const stream = client.getMediaStream(); // Works!
The SDK is event-driven. You must listen for events and render videos accordingly.
attachVideo() NOT renderVideo()import { VideoQuality } from '@zoom/videosdk';
// Start your camera
await stream.startVideo();
// Attach video - returns element to append to DOM
const element = await stream.attachVideo(userId, VideoQuality.Video_360P);
container.appendChild(element);
// Detach when done
await stream.detachVideo(userId);
// When other participant's video turns on/off
client.on('peer-video-state-change', async (payload) => {
const { action, userId } = payload;
if (action === 'Start') {
const el = await stream.attachVideo(userId, VideoQuality.Video_360P);
container.appendChild(el);
} else {
await stream.detachVideo(userId);
}
});
// When participants join/leave
client.on('user-added', (payload) => { /* check bVideoOn */ });
client.on('user-removed', (payload) => { stream.detachVideo(payload.userId); });
See web/references/web.md for complete event handling patterns.
| Concept | Description |
|---|---|
| Session | Video session (not a meeting) |
| Topic | Session identifier (any string you choose) |
| Signature | JWT for authorization |
| MediaStream | Audio/video stream control |
Important: Video SDK sessions are created just-in-time, not in advance.
| Aspect | Video SDK | Meeting SDK |
|---|---|---|
| Pre-creation | NOT required | Create meeting via API first |
| Session start | First participant joins with topic | Join existing meeting ID |
| Topic | Any string (you define it) | Meeting ID from API |
| Scheduling | N/A - sessions are ad-hoc | Meetings can be scheduled |
topic string join the same session// Session is created on-the-fly when first user joins
// Any string can be the topic - it becomes the session identifier
await client.join('my-custom-session-123', signature, 'User Name');
// Other participants join the SAME session by using the SAME topic
await client.join('my-custom-session-123', signature, 'Another User');
The signature endpoint must be accessible from your frontend without CORS issues.
Option 1: Same-Origin Proxy (Recommended)
# Nginx config
location /api/ {
proxy_pass http://YOUR_BACKEND_HOST:3005/api/;
proxy_http_version 1.1;
proxy_set_header Host $host;
}
// Frontend uses relative URL (same origin)
const response = await fetch('/api/signature', { ... });
Option 2: CORS Configuration
// Express.js backend
const cors = require('cors');
app.use(cors({
origin: ['https://your-domain.com'],
credentials: true
}));
WARNING: Mixed content (HTTPS page → HTTP API) will be blocked by browsers.
| Use Case | Description |
|---|---|
| Video SDK BYOS (Bring Your Own Storage) | Save recordings directly to your S3 bucket |
Video SDK feature - Zoom saves cloud recordings directly to your Amazon S3 bucket. No downloading required.
Official docs: https://developers.zoom.us/docs/build/storage/
Prerequisites:
Authentication options:
S3 path structure:
Buckets/{bucketName}/cmr/byos/{YYYY}/{MM}/{DD}/{GUID}/cmr_byos/
Key benefits:
Setup location: Developer Portal → Account Settings → General → Communications Content Storage Location
See ../general/use-cases/video-sdk-bring-your-own-storage.md for complete setup guide.
| Type | Repository | Stars |
|---|---|---|
| Web | videosdk-web-sample | 137 |
| Web NPM | videosdk-web | 56 |
| Auth | videosdk-auth-endpoint-sample | 23 |
| UI Toolkit Web | videosdk-zoom-ui-toolkit-web | 17 |
| UI Toolkit React | videosdk-zoom-ui-toolkit-react-sample | 17 |
| Next.js | videosdk-nextjs-quickstart | 16 |
| Telehealth | VideoSDK-Web-Telehealth | 11 |
| Linux | videosdk-linux-raw-recording-sample | - |
Full list: See general/references/community-repos.md
.env keys and where to find each value.아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Review a design or web page against WCAG 2.1 AA, an accessibility standard. Organize findings on contrast, keyboard access, forms, and screen reader behavior, with severity levels and practical recommendations for fixes.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build a single brief on an existing customer using available sales records, emails, documents, call notes, and internal chat. Understand the current situation, key contacts, recent discussions, and gaps that may need attention.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build or refresh a strategic customer account plan from sales records, emails, and meeting transcripts. Organize goals, stakeholders, growth opportunities, risks, and dated actions into a document, then sync approved highlights to the customer relationship management system.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Research prospective companies and contacts, check existing customer records, and assess fit against your ideal customer profile. Receive a sourced brief covering recent developments, likely priorities, outreach talking points, and a suggested next step.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Research sales accounts using Common Room data to summarize company details, buying signals, ownership, and key contacts. Answer specific questions directly or prepare a broader briefing with evidence-based next steps, clearly identifying missing information.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Score and group accounts by customer fit and engagement, such as recent contact and open sales opportunities. Identify where to focus sales effort, choose next actions, and spot promising accounts with neglected outreach or missing information.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.