[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M718KTMWYSPCG0V0QK32PSAC":3,"skill-same:01M718KTMWYSPCG0V0QK32PSAC":146},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":6,"ownerHtmlUrl":59,"ownerBlogUrl":60,"ownerDescription":6,"updatedAt":61,"install":62,"resources":75},"01M718KTMWYSPCG0V0QK32PSAC","video-sdk\u002Fweb",null,"Zoom Video SDK for Web - JavaScript\u002FTypeScript integration for browser-based video sessions, real-time communication, screen sharing, recording, and live transcription","anthropics\u002Fknowledge-work-plugins","anthropics","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F76263028?v=4","01M697XGDPXJAVQ8391V2BCYTE","Anthropic","01M7188MPC48111TN566QNQE3X",35463,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"video sdk","video sdk web","web","sdk","Video","false","integration","sharing","state","peer","zoom","custom","sessions","for","live","typescript","screen","change","time","recording","2026-11-10 10:12:30",false,"---\nname: video-sdk\u002Fweb\ndescription: \"Zoom Video SDK for Web - JavaScript\u002FTypeScript integration for browser-based video sessions, real-time communication, screen sharing, recording, and live transcription\"\nuser-invocable: false\ntriggers:\n  - \"video sdk web\"\n  - \"custom video web\"\n  - \"attachvideo\"\n  - \"peer-video-state-change\"\n  - \"web videosdk\"\n---\n\n# Zoom Video SDK - Web Development\n\nExpert guidance for developing with the Zoom Video SDK on Web. This SDK enables custom video applications in the browser with real-time video\u002Faudio, screen sharing, cloud recording, live streaming, chat, and live transcription.\n\nThis skill is for **custom video sessions**, not embedded Zoom meetings.\nIf the user wants a custom UI for a real Zoom meeting, route to\n[..\u002F..\u002Fmeeting-sdk\u002Fweb\u002Fcomponent-view\u002FSKILL.md](..\u002F..\u002Fmeeting-sdk\u002Fweb\u002Fcomponent-view\u002FSKILL.md).\n\n**Official Documentation**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002F\n**API Reference**: https:\u002F\u002Fmarketplacefront.zoom.us\u002Fsdk\u002Fcustom\u002Fweb\u002Fmodules.html\n**Sample Repository**: https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-web-sample\n\n## Quick Links\n\n**New to Video SDK? Follow this path:**\n\n1. **[SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md)** - Universal 3-step pattern for ANY feature\n2. **[Session Join Pattern](examples\u002Fsession-join-pattern.md)** - Complete working code to join a session\n3. **[Video Rendering](examples\u002Fvideo-rendering.md)** - Display video with attachVideo()\n4. **[Event Handling](examples\u002Fevent-handling.md)** - Required events for video\u002Faudio\n\n**Reference:**\n- **[Singleton Hierarchy](concepts\u002Fsingleton-hierarchy.md)** - 4-level SDK navigation map\n- **[API Reference](references\u002Fweb-reference.md)** - Methods, events, error codes\n- **[SKILL.md](SKILL.md)** - Complete documentation navigation\n- **[..\u002F..\u002Fprobe-sdk\u002FSKILL.md](..\u002F..\u002Fprobe-sdk\u002FSKILL.md)** - Optional browser\u002Fdevice\u002Fnetwork readiness diagnostics before join\n\n**Having issues?**\n- Video not showing → [Video Rendering](examples\u002Fvideo-rendering.md) (use attachVideo, not renderVideo)\n- getMediaStream() returns undefined → Call AFTER join() completes\n- Quick diagnostics → [Common Issues](troubleshooting\u002Fcommon-issues.md)\n\n## SDK Overview\n\nThe Zoom Video SDK for Web is a JavaScript library that provides:\n- **Session Management**: Join\u002Fleave video SDK sessions\n- **Video\u002FAudio**: Start\u002Fstop camera and microphone\n- **Screen Sharing**: Share screens or browser tabs\n- **Cloud Recording**: Record sessions to Zoom cloud\n- **Live Streaming**: Stream to RTMP endpoints\n- **Chat**: In-session messaging\n- **Command Channel**: Custom command messaging\n- **Live Transcription**: Real-time speech-to-text\n- **Subsessions**: Breakout room support\n- **Whiteboard**: Collaborative whiteboard features\n- **Virtual Background**: Blur or custom image backgrounds\n\n## Prerequisites\n\n### System Requirements\n\n- **Modern Browser**: Chrome 80+, Firefox 75+, Safari 14+, Edge 80+\n- **Video SDK Credentials**: SDK Key and Secret from [Marketplace](https:\u002F\u002Fmarketplace.zoom.us\u002F)\n- **JWT Token**: Server-side generated signature\n\n### Browser Feature Requirements\n\n```javascript\n\u002F\u002F Check browser compatibility before init\nconst compatibility = ZoomVideo.checkSystemRequirements();\nconsole.log('Audio:', compatibility.audio);\nconsole.log('Video:', compatibility.video);\nconsole.log('Screen:', compatibility.screen);\n\n\u002F\u002F Check feature support\nconst features = ZoomVideo.checkFeatureRequirements();\nconsole.log('Supported:', features.supportFeatures);\nconsole.log('Unsupported:', features.unSupportFeatures);\n```\n\n### Optional Pre-Join Diagnostics (Recommended for Reliability)\n\nUse Probe SDK as a readiness gate before `client.join(...)` when you need to reduce failed starts:\n\n1. Run diagnostics with [..\u002F..\u002Fprobe-sdk\u002FSKILL.md](..\u002F..\u002Fprobe-sdk\u002FSKILL.md).\n2. Evaluate policy (`allow`, `warn`, `block`).\n3. Start Video SDK join only when policy allows.\n\nCross-skill flow: [..\u002F..\u002Fgeneral\u002Fuse-cases\u002Fprobe-sdk-preflight-readiness-gate.md](..\u002F..\u002Fgeneral\u002Fuse-cases\u002Fprobe-sdk-preflight-readiness-gate.md)\n\n## Installation\n\n### NPM (Recommended)\n\n```bash\nnpm install @zoom\u002Fvideosdk\n```\n\n```javascript\nimport ZoomVideo from '@zoom\u002Fvideosdk';\n```\n\n### CDN (Fallback Strategy Recommended)\n\n> **Note**: Some networks\u002Fad blockers can block `source.zoom.us`. If you see flaky loads, first try allowlisting the domain in your environment. If needed, consider a fallback (mirror\u002Fself-host) only if it's permitted for your use case and you can keep versions in sync.\n\n```bash\n# Download SDK locally\ncurl \"https:\u002F\u002Fsource.zoom.us\u002Fvideosdk\u002Fzoom-video-2.3.12.min.js\" -o public\u002Fjs\u002Fzoom-video-sdk.min.js\n```\n\n```html\n\u003C!-- Use local copy instead of CDN -->\n\u003Cscript src=\"js\u002Fzoom-video-sdk.min.js\">\u003C\u002Fscript>\n```\n\n```javascript\n\u002F\u002F CDN exports as WebVideoSDK, NOT ZoomVideo\nconst ZoomVideo = WebVideoSDK.default;\n```\n\n## Quick Start\n\n```javascript\nimport ZoomVideo from '@zoom\u002Fvideosdk';\n\n\u002F\u002F 1. Create client (singleton - returns same instance)\nconst client = ZoomVideo.createClient();\n\n\u002F\u002F 2. Initialize SDK\nawait client.init('en-US', 'Global', { patchJsMedia: true });\n\n\u002F\u002F 3. Join session\nawait client.join(topic, signature, userName, password);\n\n\u002F\u002F 4. CRITICAL: Get stream AFTER join\nconst stream = client.getMediaStream();\n\n\u002F\u002F 5. Start media\nawait stream.startVideo();\nawait stream.startAudio();\n\n\u002F\u002F 6. Attach video to DOM\nconst videoElement = await stream.attachVideo(userId, VideoQuality.Video_360P);\ndocument.getElementById('video-container').appendChild(videoElement);\n```\n\n## SDK Lifecycle (CRITICAL ORDER)\n\nThe SDK has a strict lifecycle. Violating it causes **silent failures**.\n\n```\n1. Create client:     client = ZoomVideo.createClient()\n2. Initialize:        await client.init('en-US', 'Global', options)\n3. Join session:      await client.join(topic, signature, userName, password)\n4. Get stream:        stream = client.getMediaStream()  ← ONLY AFTER JOIN\n5. Start media:       await stream.startVideo() \u002F await stream.startAudio()\n```\n\n**Common Mistake:**\n\n```javascript\n\u002F\u002F WRONG: Getting stream before joining\nconst stream = client.getMediaStream();  \u002F\u002F Returns undefined!\nawait client.join(...);\n\n\u002F\u002F CORRECT: Get stream after joining\nawait client.join(...);\nconst stream = client.getMediaStream();  \u002F\u002F Works!\n```\n\n## Critical Gotchas and Best Practices\n\n### getMediaStream() ONLY Works After join()\n\nThe #1 issue that causes video\u002Faudio to fail:\n\n```javascript\n\u002F\u002F WRONG\nconst stream = client.getMediaStream();  \u002F\u002F undefined!\nawait client.join(...);\n\n\u002F\u002F CORRECT\nawait client.join(...);\nconst stream = client.getMediaStream();  \u002F\u002F Works\n```\n\n### Use attachVideo() NOT renderVideo()\n\n`renderVideo()` is **deprecated**. Use `attachVideo()` which returns a VideoPlayer element:\n\n```javascript\nimport { VideoQuality } from '@zoom\u002Fvideosdk';\n\n\u002F\u002F CORRECT: attachVideo returns element to append\nconst videoElement = await stream.attachVideo(userId, VideoQuality.Video_360P);\ndocument.getElementById('video-container').appendChild(videoElement);\n\n\u002F\u002F WRONG: renderVideo is deprecated\nawait stream.renderVideo(canvas, userId, ...);  \u002F\u002F Don't use!\n```\n\n### Video Rendering is Event-Driven (CRITICAL)\n\nYou MUST listen for events to properly render participant videos:\n\n```javascript\n\u002F\u002F When another participant's video state changes\nclient.on('peer-video-state-change', async (payload) => {\n  const { action, userId } = payload;\n  \n  if (action === 'Start') {\n    \u002F\u002F Participant turned on video - attach it\n    const element = await stream.attachVideo(userId, VideoQuality.Video_360P);\n    container.appendChild(element);\n  } else if (action === 'Stop') {\n    \u002F\u002F Participant turned off video - detach it\n    await stream.detachVideo(userId);\n  }\n});\n\n\u002F\u002F When participants join\u002Fleave\nclient.on('user-added', (payload) => {\n  \u002F\u002F New participant joined - check if their video is on\n  const users = client.getAllUser();\n  \u002F\u002F Render videos for users with bVideoOn === true\n});\n\nclient.on('user-removed', (payload) => {\n  \u002F\u002F Participant left - clean up their video element\n  stream.detachVideo(payload[0].userId);\n});\n```\n\n### Peer Video on Mid-Session Join\n\n**Existing participants' videos won't auto-render when you join mid-session.**\n\n```javascript\n\u002F\u002F After joining, render existing participants' videos\nconst renderExistingVideos = async () => {\n  await new Promise(resolve => setTimeout(resolve, 500));\n  \n  const users = client.getAllUser();\n  const currentUserId = client.getCurrentUserInfo().userId;\n  \n  for (const user of users) {\n    if (user.bVideoOn && user.userId !== currentUserId) {\n      const element = await stream.attachVideo(user.userId, VideoQuality.Video_360P);\n      document.getElementById(`video-${user.userId}`).appendChild(element);\n    }\n  }\n};\n```\n\n### CDN Race Condition with ES Modules\n\nWhen using `\u003Cscript type=\"module\">` with CDN, the SDK may not be loaded yet:\n\n```javascript\nfunction waitForSDK(timeout = 10000) {\n  return new Promise((resolve, reject) => {\n    if (typeof WebVideoSDK !== 'undefined') {\n      resolve();\n      return;\n    }\n    const start = Date.now();\n    const check = setInterval(() => {\n      if (typeof WebVideoSDK !== 'undefined') {\n        clearInterval(check);\n        resolve();\n      } else if (Date.now() - start > timeout) {\n        clearInterval(check);\n        reject(new Error('SDK failed to load'));\n      }\n    }, 100);\n  });\n}\n\nawait waitForSDK();\nconst ZoomVideo = WebVideoSDK.default;\n```\n\n### SharedArrayBuffer for HD Video\n\nFor optimal performance and HD video, configure these headers on your server:\n\n```\nCross-Origin-Opener-Policy: same-origin\nCross-Origin-Embedder-Policy: require-corp\n```\n\n**Note:** As of v1.11.2, SharedArrayBuffer is elective (not strictly required).\n\n### Check HD Capability Before Enabling\n\n```javascript\nconst stream = client.getMediaStream();\n\n\u002F\u002F Check if 720p is supported\nconst hdSupported = stream.isSupportHDVideo();\n\n\u002F\u002F Get maximum video quality\nconst maxQuality = stream.getVideoMaxQuality();\n\u002F\u002F 0=90P, 1=180P, 2=360P, 3=720P, 4=1080P\n\n\u002F\u002F Start video with HD\nif (hdSupported) {\n  await stream.startVideo({ hd: true });\n}\n```\n\n### Screen Share Rendering Mode Check\n\n```javascript\nconst stream = client.getMediaStream();\n\n\u002F\u002F Check which element type to use\nif (stream.isStartShareScreenWithVideoElement()) {\n  \u002F\u002F Use video element\n  const video = document.getElementById('share-video');\n  await stream.startShareScreen(video as unknown as HTMLCanvasElement);\n} else {\n  \u002F\u002F Use canvas element\n  const canvas = document.getElementById('share-canvas');\n  await stream.startShareScreen(canvas);\n}\n```\n\n## Key Features\n\n### Video Quality Enum\n\n```javascript\nimport { VideoQuality } from '@zoom\u002Fvideosdk';\n\nVideoQuality.Video_90P   \u002F\u002F 0\nVideoQuality.Video_180P  \u002F\u002F 1\nVideoQuality.Video_360P  \u002F\u002F 2 (recommended for most cases)\nVideoQuality.Video_720P  \u002F\u002F 3\nVideoQuality.Video_1080P \u002F\u002F 4\n```\n\n### Virtual Backgrounds\n\n```javascript\nconst stream = client.getMediaStream();\n\n\u002F\u002F Always check support first\nif (stream.isSupportVirtualBackground()) {\n  \u002F\u002F Blur background\n  await stream.updateVirtualBackgroundImage('blur');\n  \n  \u002F\u002F Custom image background\n  await stream.updateVirtualBackgroundImage('https:\u002F\u002Fexample.com\u002Fbg.jpg');\n  \n  \u002F\u002F Remove virtual background\n  await stream.updateVirtualBackgroundImage(undefined);\n}\n```\n\n### Video Processor (Custom Effects)\n\nThe `VideoProcessor` class allows you to intercept and modify video frames:\n\n```javascript\n\u002F\u002F video-processor-worker.js\nclass MyVideoProcessor extends VideoProcessor {\n  processFrame(input, output) {\n    const ctx = output.getContext('2d');\n    ctx.drawImage(input, 0, 0);\n    \n    \u002F\u002F Add overlay\n    ctx.fillStyle = 'white';\n    ctx.font = '24px Arial';\n    ctx.fillText('Live', 20, 40);\n    \n    return true;\n  }\n}\n```\n\n### WebRTC Mode\n\nEnable WebRTC mode for direct peer-to-peer streaming with HD video support:\n\n```javascript\nawait client.init('en-US', 'Global', {\n  patchJsMedia: true,\n  webrtc: true  \u002F\u002F Enable WebRTC mode\n});\n```\n\n## Feature Clients\n\nAccess specialized clients from the VideoClient:\n\n| Client | Access Method | Purpose |\n|--------|---------------|---------|\n| **Stream** | `client.getMediaStream()` | Video, audio, screen share, devices |\n| **Chat** | `client.getChatClient()` | Send\u002Freceive messages |\n| **Command** | `client.getCommandClient()` | Custom commands (reactions, etc.) |\n| **Recording** | `client.getRecordingClient()` | Cloud recording control |\n| **Transcription** | `client.getLiveTranscriptionClient()` | Live captions |\n| **LiveStream** | `client.getLiveStreamClient()` | RTMP streaming |\n| **Subsession** | `client.getSubsessionClient()` | Breakout rooms |\n| **Whiteboard** | `client.getWhiteboardClient()` | Collaborative whiteboard |\n\n## Common Tasks\n\n### Start\u002FStop Video\n\n```javascript\nawait stream.startVideo();\nawait stream.stopVideo();\n```\n\n### Start\u002FStop Audio\n\n```javascript\nawait stream.startAudio();\nawait stream.muteAudio();\nawait stream.unmuteAudio();\nawait stream.stopAudio();\n```\n\n### Switch Devices\n\n```javascript\n\u002F\u002F Get available devices\nconst cameras = stream.getCameraList();\nconst mics = stream.getMicList();\nconst speakers = stream.getSpeakerList();\n\n\u002F\u002F Switch devices\nawait stream.switchCamera(cameraId);\nawait stream.switchMicrophone(micId);\nawait stream.switchSpeaker(speakerId);\n```\n\n### Screen Sharing\n\n```javascript\n\u002F\u002F Start sharing\nawait stream.startShareScreen(canvas);\n\n\u002F\u002F Stop sharing\nawait stream.stopShareScreen();\n\n\u002F\u002F Receive share\nclient.on('active-share-change', async (payload) => {\n  if (payload.state === 'Active') {\n    await stream.startShareView(canvas, payload.userId);\n  } else {\n    await stream.stopShareView();\n  }\n});\n```\n\n### Chat\n\n```javascript\nconst chatClient = client.getChatClient();\n\n\u002F\u002F Send to everyone\nawait chatClient.send('Hello, everyone!');\n\n\u002F\u002F Send to specific user\nawait chatClient.sendToUser(userId, 'Private message');\n\n\u002F\u002F Receive messages\nclient.on('chat-on-message', (payload) => {\n  console.log(`${payload.sender.name}: ${payload.message}`);\n});\n```\n\n### Recording (Host Only)\n\n```javascript\nconst recordingClient = client.getRecordingClient();\n\nawait recordingClient.startCloudRecording();\nawait recordingClient.stopCloudRecording();\n\nclient.on('recording-change', (payload) => {\n  console.log('Recording status:', payload.state);\n});\n```\n\n### Leave\u002FEnd Session\n\n```javascript\n\u002F\u002F Leave session (others stay)\nawait client.leave();\n\n\u002F\u002F End session for ALL participants (host only)\nawait client.leave(true);\n```\n\n## Error Handling\n\n### Common Join Errors\n\n| Error | Cause | Solution |\n|-------|-------|----------|\n| `Invalid signature` | JWT expired or malformed | Generate new signature |\n| `Session does not exist` | Host hasn't started yet | Show \"waiting\" message, retry |\n| `Permission denied` | User denied camera\u002Fmic | Request permission again |\n\n### Example Error Handler\n\n```javascript\ntry {\n  await client.join(topic, signature, userName, password);\n} catch (error) {\n  if (error.reason?.includes('signature')) {\n    \u002F\u002F Regenerate signature and retry\n  } else if (error.reason?.includes('Session')) {\n    \u002F\u002F Show \"Waiting for host...\" and poll\n  } else if (error.reason?.includes('Permission')) {\n    \u002F\u002F Guide user to enable permissions\n  }\n  console.error('Join failed:', error);\n}\n```\n\n## Browser Compatibility\n\n| Feature | Chrome | Firefox | Safari | Edge |\n|---------|--------|---------|--------|------|\n| Video | 80+ | 75+ | 14+ | 80+ |\n| Audio | 80+ | 75+ | 14+ | 80+ |\n| Screen Share | 80+ | 75+ | 15+ | 80+ |\n| Virtual BG | 80+ | 90+ | - | 80+ |\n\n**Safari Notes:**\n- Virtual background not supported\n- Screen sharing requires macOS 15+\n\n## CORS Errors (Telemetry)\n\n**CORS errors to `log-external-gateway.zoom.us` are harmless.**\n\nThese are caused by COOP\u002FCOEP headers blocking telemetry requests. They don't affect SDK functionality.\n\n## Complete Documentation Library\n\n### Core Concepts\n- **[SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md)** - Universal 3-step pattern for ANY feature\n- **[Singleton Hierarchy](concepts\u002Fsingleton-hierarchy.md)** - 4-level navigation guide\n\n### Complete Examples\n- **[Session Join Pattern](examples\u002Fsession-join-pattern.md)** - JWT auth + session join with full code\n- **[Video Rendering](examples\u002Fvideo-rendering.md)** - attachVideo() patterns\n- **[Screen Share](examples\u002Fscreen-share.md)** - Send and receive screen shares\n- **[Event Handling](examples\u002Fevent-handling.md)** - Required events\n- **[Chat](examples\u002Fchat.md)** - In-session messaging\n- **[Recording](examples\u002Frecording.md)** - Cloud recording control\n- **[Transcription](examples\u002Ftranscription.md)** - Live captions\n\n### Framework Integrations\n- **[React Hooks](examples\u002Freact-hooks.md)** - Official @zoom\u002Fvideosdk-react library\n- **[Framework Integrations](examples\u002Fframework-integrations.md)** - Next.js, Vue\u002FNuxt patterns\n\n### Troubleshooting\n- **[Common Issues](troubleshooting\u002Fcommon-issues.md)** - Quick diagnostics & error codes\n\n### References\n- **[API Reference](references\u002Fweb-reference.md)** - Complete method signatures\n- **[Events Reference](references\u002Fevents-reference.md)** - All event types\n- **[SKILL.md](SKILL.md)** - Complete navigation guide\n\n## Official Sample Repositories\n\n| Type | Repository |\n|------|------------|\n| Web Sample | [videosdk-web-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-web-sample) |\n| React SDK | [videosdk-react](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-react) |\n| Next.js | [videosdk-nextjs-quickstart](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-nextjs-quickstart) |\n| Vue\u002FNuxt | [videosdk-vue-nuxt-quickstart](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-vue-nuxt-quickstart) |\n| Auth Endpoint | [videosdk-auth-endpoint-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-auth-endpoint-sample) |\n| UI Toolkit | [videosdk-zoom-ui-toolkit-react-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-react-sample) |\n\n## Resources\n\n- **Official Docs**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002F\n- **API Reference**: https:\u002F\u002Fmarketplacefront.zoom.us\u002Fsdk\u002Fcustom\u002Fweb\u002Fmodules.html\n- **Dev Forum**: https:\u002F\u002Fdevforum.zoom.us\u002F\n- **GitHub Samples**: https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-web-sample\n\n---\n\n**Need help?** Start with [SKILL.md](SKILL.md) for complete navigation.\n\n\n## Merged from video-sdk\u002Fweb\u002FSKILL.md\n\n# Zoom Video SDK Web - Complete Documentation Index\n\n## Quick Start Path\n\n**If you're new to the SDK, follow this order:**\n\n1. **Read the architecture pattern** → [concepts\u002Fsdk-architecture-pattern.md](concepts\u002Fsdk-architecture-pattern.md)\n   - Universal formula: Create Client → Init → Join → Get Stream → Use\n   - Once you understand this, you can implement any feature\n\n2. **Implement session join** → [examples\u002Fsession-join-pattern.md](examples\u002Fsession-join-pattern.md)\n   - Complete working JWT + session join code\n\n3. **Listen to events** → [examples\u002Fevent-handling.md](examples\u002Fevent-handling.md)\n   - **CRITICAL**: The SDK is event-driven, you must listen for events\n\n4. **Implement video** → [examples\u002Fvideo-rendering.md](examples\u002Fvideo-rendering.md)\n   - Use attachVideo(), NOT renderVideo()\n\n5. **Troubleshoot any issues** → [troubleshooting\u002Fcommon-issues.md](troubleshooting\u002Fcommon-issues.md)\n   - Quick diagnostic checklist\n   - Error code tables\n\n---\n\n## Documentation Structure\n\n```\nvideo-sdk\u002Fweb\u002F\n├── SKILL.md                           # Main skill overview\n├── SKILL.md                           # This file - navigation guide\n│\n├── concepts\u002F                          # Core architectural patterns\n│   ├── sdk-architecture-pattern.md   # Universal formula for ANY feature\n│   └── singleton-hierarchy.md        # 4-level navigation guide\n│\n├── examples\u002F                          # Complete working code\n│   ├── session-join-pattern.md       # JWT auth + session join\n│   ├── video-rendering.md            # attachVideo() patterns\n│   ├── screen-share.md               # Send and receive screen shares\n│   ├── event-handling.md             # Required events\n│   ├── chat.md                       # Chat implementation\n│   ├── command-channel.md            # Command channel messaging\n│   ├── recording.md                  # Cloud recording control\n│   ├── transcription.md              # Live transcription\u002Fcaptions\n│   ├── react-hooks.md                # Official @zoom\u002Fvideosdk-react library\n│   └── framework-integrations.md     # Next.js, Vue\u002FNuxt, ZFG patterns\n│\n├── troubleshooting\u002F                   # Problem solving guides\n│   └── common-issues.md              # Quick diagnostic workflow\n│\n└── references\u002F                        # Reference documentation\n    ├── web-reference.md              # API hierarchy, methods, error codes\n    └── events-reference.md           # All event types\n```\n\n---\n\n## By Use Case\n\n### I want to build a video app\n1. [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md) - Understand the pattern\n2. [Session Join Pattern](examples\u002Fsession-join-pattern.md) - Join sessions\n3. [Video Rendering](examples\u002Fvideo-rendering.md) - Display video\n4. [Event Handling](examples\u002Fevent-handling.md) - Listen for video events\n\n### I'm getting runtime errors\n1. [Common Issues](troubleshooting\u002Fcommon-issues.md) - Error code tables\n2. \"getMediaStream() is undefined\" → Call AFTER join() completes\n\n### I want to receive screen shares\n1. [Screen Share](examples\u002Fscreen-share.md) - startShareView() patterns\n2. [Event Handling](examples\u002Fevent-handling.md) - active-share-change event\n\n### I want to send screen shares\n1. [Screen Share](examples\u002Fscreen-share.md) - startShareScreen() patterns\n2. Check isStartShareScreenWithVideoElement() for element type\n\n### I want to use chat\n1. [Chat](examples\u002Fchat.md) - Send\u002Freceive messages\n2. getChatClient() for ChatClient access\n\n### I want to record sessions\n1. [Recording](examples\u002Frecording.md) - Cloud recording (host only)\n2. getRecordingClient() for RecordingClient access\n\n### I want to use live transcription\n1. [Transcription](examples\u002Ftranscription.md) - Enable live captions\n2. getLiveTranscriptionClient() for LiveTranscriptionClient access\n\n### I want to use command channel\n1. [Command Channel](examples\u002Fcommand-channel.md) - Custom signaling between participants\n2. Must call getCommandClient() AFTER join()\n\n### I want to implement a specific feature\n1. [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md) - **START HERE!**\n2. [Singleton Hierarchy](concepts\u002Fsingleton-hierarchy.md) - Navigate to the feature\n3. [API Reference](references\u002Fweb-reference.md) - Method signatures\n\n### I'm using React\n1. [React Hooks](examples\u002Freact-hooks.md) - Official @zoom\u002Fvideosdk-react library\n2. Provides hooks: useSession, useSessionUsers, useVideoState, useAudioState\n3. Pre-built components: VideoPlayerComponent, ScreenSharePlayerComponent\n\n### I'm using Next.js or Vue\u002FNuxt\n1. [Framework Integrations](examples\u002Fframework-integrations.md) - SSR considerations\n2. Server-side JWT generation patterns\n3. Client-side only SDK usage\n\n---\n\n## Most Critical Documents\n\n### 1. SDK Architecture Pattern (MASTER DOCUMENT)\n**[concepts\u002Fsdk-architecture-pattern.md](concepts\u002Fsdk-architecture-pattern.md)**\n\nThe universal 5-step pattern:\n1. Create client\n2. Initialize SDK\n3. Join session\n4. Get stream\n5. Use features + listen to events\n\n### 2. Common Issues (MOST COMMON PROBLEMS)\n**[troubleshooting\u002Fcommon-issues.md](troubleshooting\u002Fcommon-issues.md)**\n\nCommon issues:\n- getMediaStream() returns undefined\n- Video not displaying\n- renderVideo() deprecated\n\n### 3. Singleton Hierarchy (NAVIGATION MAP)\n**[concepts\u002Fsingleton-hierarchy.md](concepts\u002Fsingleton-hierarchy.md)**\n\n4-level deep navigation showing how to reach every feature.\n\n---\n\n## Key Learnings\n\n### Critical Discoveries:\n\n1. **getMediaStream() ONLY works after join()**\n   - The stream object is not available until session is joined\n   - See: [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md)\n\n2. **Use attachVideo() NOT renderVideo()**\n   - renderVideo() is deprecated\n   - attachVideo() returns a VideoPlayer element to append to DOM\n   - See: [Video Rendering](examples\u002Fvideo-rendering.md)\n\n3. **The SDK is Event-Driven**\n   - You MUST listen for events to render participant videos\n   - key events: peer-video-state-change, user-added, user-removed\n   - See: [Event Handling](examples\u002Fevent-handling.md)\n\n4. **Peer Videos on Mid-Session Join**\n   - Existing participants' videos won't auto-render\n   - Must manually iterate getAllUser() and attachVideo()\n   - See: [Video Rendering](examples\u002Fvideo-rendering.md)\n\n5. **CDN vs NPM**\n   - CDN exports as `WebVideoSDK.default`, not `ZoomVideo`\n   - Some networks\u002Fad blockers may block `source.zoom.us` - allowlist or use a permitted fallback strategy\n   - See: [Session Join Pattern](examples\u002Fsession-join-pattern.md)\n\n6. **SharedArrayBuffer for HD**\n   - Required for 720p\u002F1080p video\n   - Need COOP\u002FCOEP headers on server\n   - Check with `stream.isSupportHDVideo()`\n\n7. **Screen Share Element Type**\n   - Check `isStartShareScreenWithVideoElement()` for correct element type\n   - See: [Screen Share](examples\u002Fscreen-share.md)\n\n8. **Command Channel Setup Order**\n   - Must call getCommandClient() AFTER client.join()\n   - Register listeners AFTER join, not before\n   - Web uses getCommandClient() not getCmdChannel()\n   - See: [Command Channel](examples\u002Fcommand-channel.md)\n\n9. **Command Channel is Session-Scoped**\n   - Does NOT span across different sessions\n   - Both sender and receiver must be in the same session\n\n---\n\n## Quick Reference\n\n### \"getMediaStream() returns undefined\"\n→ Call AFTER join() completes\n\n### \"Video not showing\"\n→ [Video Rendering](examples\u002Fvideo-rendering.md) - Use attachVideo(), check events\n\n### \"renderVideo() doesn't work\"\n→ [Video Rendering](examples\u002Fvideo-rendering.md) - Use attachVideo() instead\n\n### \"How do I implement [feature]?\"\n→ [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md)\n\n### \"How do I navigate to [client]?\"\n→ [Singleton Hierarchy](concepts\u002Fsingleton-hierarchy.md)\n\n### \"What error code means what?\"\n→ [Common Issues](troubleshooting\u002Fcommon-issues.md)\n\n---\n\n## Document Version\n\nBased on **Zoom Video SDK for Web v2.3.x**\n\n---\n\n**Happy coding!**\n\nRemember: The [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md) is your key to unlocking the entire SDK. Read it first!\n\n## Operations\n\n- [RUNBOOK.md](RUNBOOK.md) - 5-minute preflight and debugging checklist.\n","# Zoom Video SDK - Web Development\n\nExpert guidance for developing with the Zoom Video SDK on Web. This SDK enables custom video applications in the browser with real-time video\u002Faudio, screen sharing, cloud recording, live streaming, chat, and live transcription.\n\nThis skill is for **custom video sessions**, not embedded Zoom meetings.\nIf the user wants a custom UI for a real Zoom meeting, route to\n[..\u002F..\u002Fmeeting-sdk\u002Fweb\u002Fcomponent-view\u002FSKILL.md](..\u002F..\u002Fmeeting-sdk\u002Fweb\u002Fcomponent-view\u002FSKILL.md).\n\n**Official Documentation**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002F\n**API Reference**: https:\u002F\u002Fmarketplacefront.zoom.us\u002Fsdk\u002Fcustom\u002Fweb\u002Fmodules.html\n**Sample Repository**: https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-web-sample\n\n## Quick Links\n\n**New to Video SDK? Follow this path:**\n\n1. **[SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md)** - Universal 3-step pattern for ANY feature\n2. **[Session Join Pattern](examples\u002Fsession-join-pattern.md)** - Complete working code to join a session\n3. **[Video Rendering](examples\u002Fvideo-rendering.md)** - Display video with attachVideo()\n4. **[Event Handling](examples\u002Fevent-handling.md)** - Required events for video\u002Faudio\n\n**Reference:**\n- **[Singleton Hierarchy](concepts\u002Fsingleton-hierarchy.md)** - 4-level SDK navigation map\n- **[API Reference](references\u002Fweb-reference.md)** - Methods, events, error codes\n- **[SKILL.md](SKILL.md)** - Complete documentation navigation\n- **[..\u002F..\u002Fprobe-sdk\u002FSKILL.md](..\u002F..\u002Fprobe-sdk\u002FSKILL.md)** - Optional browser\u002Fdevice\u002Fnetwork readiness diagnostics before join\n\n**Having issues?**\n- Video not showing → [Video Rendering](examples\u002Fvideo-rendering.md) (use attachVideo, not renderVideo)\n- getMediaStream() returns undefined → Call AFTER join() completes\n- Quick diagnostics → [Common Issues](troubleshooting\u002Fcommon-issues.md)\n\n## SDK Overview\n\nThe Zoom Video SDK for Web is a JavaScript library that provides:\n- **Session Management**: Join\u002Fleave video SDK sessions\n- **Video\u002FAudio**: Start\u002Fstop camera and microphone\n- **Screen Sharing**: Share screens or browser tabs\n- **Cloud Recording**: Record sessions to Zoom cloud\n- **Live Streaming**: Stream to RTMP endpoints\n- **Chat**: In-session messaging\n- **Command Channel**: Custom command messaging\n- **Live Transcription**: Real-time speech-to-text\n- **Subsessions**: Breakout room support\n- **Whiteboard**: Collaborative whiteboard features\n- **Virtual Background**: Blur or custom image backgrounds\n\n## Prerequisites\n\n### System Requirements\n\n- **Modern Browser**: Chrome 80+, Firefox 75+, Safari 14+, Edge 80+\n- **Video SDK Credentials**: SDK Key and Secret from [Marketplace](https:\u002F\u002Fmarketplace.zoom.us\u002F)\n- **JWT Token**: Server-side generated signature\n\n### Browser Feature Requirements\n\n```javascript\n\u002F\u002F Check browser compatibility before init\nconst compatibility = ZoomVideo.checkSystemRequirements();\nconsole.log('Audio:', compatibility.audio);\nconsole.log('Video:', compatibility.video);\nconsole.log('Screen:', compatibility.screen);\n\n\u002F\u002F Check feature support\nconst features = ZoomVideo.checkFeatureRequirements();\nconsole.log('Supported:', features.supportFeatures);\nconsole.log('Unsupported:', features.unSupportFeatures);\n```\n\n### Optional Pre-Join Diagnostics (Recommended for Reliability)\n\nUse Probe SDK as a readiness gate before `client.join(...)` when you need to reduce failed starts:\n\n1. Run diagnostics with [..\u002F..\u002Fprobe-sdk\u002FSKILL.md](..\u002F..\u002Fprobe-sdk\u002FSKILL.md).\n2. Evaluate policy (`allow`, `warn`, `block`).\n3. Start Video SDK join only when policy allows.\n\nCross-skill flow: [..\u002F..\u002Fgeneral\u002Fuse-cases\u002Fprobe-sdk-preflight-readiness-gate.md](..\u002F..\u002Fgeneral\u002Fuse-cases\u002Fprobe-sdk-preflight-readiness-gate.md)\n\n## Installation\n\n### NPM (Recommended)\n\n```bash\nnpm install @zoom\u002Fvideosdk\n```\n\n```javascript\nimport ZoomVideo from '@zoom\u002Fvideosdk';\n```\n\n### CDN (Fallback Strategy Recommended)\n\n> **Note**: Some networks\u002Fad blockers can block `source.zoom.us`. If you see flaky loads, first try allowlisting the domain in your environment. If needed, consider a fallback (mirror\u002Fself-host) only if it's permitted for your use case and you can keep versions in sync.\n\n```bash\n# Download SDK locally\ncurl \"https:\u002F\u002Fsource.zoom.us\u002Fvideosdk\u002Fzoom-video-2.3.12.min.js\" -o public\u002Fjs\u002Fzoom-video-sdk.min.js\n```\n\n```html\n\u003C!-- Use local copy instead of CDN -->\n\u003Cscript src=\"js\u002Fzoom-video-sdk.min.js\">\u003C\u002Fscript>\n```\n\n```javascript\n\u002F\u002F CDN exports as WebVideoSDK, NOT ZoomVideo\nconst ZoomVideo = WebVideoSDK.default;\n```\n\n## Quick Start\n\n```javascript\nimport ZoomVideo from '@zoom\u002Fvideosdk';\n\n\u002F\u002F 1. Create client (singleton - returns same instance)\nconst client = ZoomVideo.createClient();\n\n\u002F\u002F 2. Initialize SDK\nawait client.init('en-US', 'Global', { patchJsMedia: true });\n\n\u002F\u002F 3. Join session\nawait client.join(topic, signature, userName, password);\n\n\u002F\u002F 4. CRITICAL: Get stream AFTER join\nconst stream = client.getMediaStream();\n\n\u002F\u002F 5. Start media\nawait stream.startVideo();\nawait stream.startAudio();\n\n\u002F\u002F 6. Attach video to DOM\nconst videoElement = await stream.attachVideo(userId, VideoQuality.Video_360P);\ndocument.getElementById('video-container').appendChild(videoElement);\n```\n\n## SDK Lifecycle (CRITICAL ORDER)\n\nThe SDK has a strict lifecycle. Violating it causes **silent failures**.\n\n```\n1. Create client:     client = ZoomVideo.createClient()\n2. Initialize:        await client.init('en-US', 'Global', options)\n3. Join session:      await client.join(topic, signature, userName, password)\n4. Get stream:        stream = client.getMediaStream()  ← ONLY AFTER JOIN\n5. Start media:       await stream.startVideo() \u002F await stream.startAudio()\n```\n\n**Common Mistake:**\n\n```javascript\n\u002F\u002F WRONG: Getting stream before joining\nconst stream = client.getMediaStream();  \u002F\u002F Returns undefined!\nawait client.join(...);\n\n\u002F\u002F CORRECT: Get stream after joining\nawait client.join(...);\nconst stream = client.getMediaStream();  \u002F\u002F Works!\n```\n\n## Critical Gotchas and Best Practices\n\n### getMediaStream() ONLY Works After join()\n\nThe #1 issue that causes video\u002Faudio to fail:\n\n```javascript\n\u002F\u002F WRONG\nconst stream = client.getMediaStream();  \u002F\u002F undefined!\nawait client.join(...);\n\n\u002F\u002F CORRECT\nawait client.join(...);\nconst stream = client.getMediaStream();  \u002F\u002F Works\n```\n\n### Use attachVideo() NOT renderVideo()\n\n`renderVideo()` is **deprecated**. Use `attachVideo()` which returns a VideoPlayer element:\n\n```javascript\nimport { VideoQuality } from '@zoom\u002Fvideosdk';\n\n\u002F\u002F CORRECT: attachVideo returns element to append\nconst videoElement = await stream.attachVideo(userId, VideoQuality.Video_360P);\ndocument.getElementById('video-container').appendChild(videoElement);\n\n\u002F\u002F WRONG: renderVideo is deprecated\nawait stream.renderVideo(canvas, userId, ...);  \u002F\u002F Don't use!\n```\n\n### Video Rendering is Event-Driven (CRITICAL)\n\nYou MUST listen for events to properly render participant videos:\n\n```javascript\n\u002F\u002F When another participant's video state changes\nclient.on('peer-video-state-change', async (payload) => {\n  const { action, userId } = payload;\n  \n  if (action === 'Start') {\n    \u002F\u002F Participant turned on video - attach it\n    const element = await stream.attachVideo(userId, VideoQuality.Video_360P);\n    container.appendChild(element);\n  } else if (action === 'Stop') {\n    \u002F\u002F Participant turned off video - detach it\n    await stream.detachVideo(userId);\n  }\n});\n\n\u002F\u002F When participants join\u002Fleave\nclient.on('user-added', (payload) => {\n  \u002F\u002F New participant joined - check if their video is on\n  const users = client.getAllUser();\n  \u002F\u002F Render videos for users with bVideoOn === true\n});\n\nclient.on('user-removed', (payload) => {\n  \u002F\u002F Participant left - clean up their video element\n  stream.detachVideo(payload[0].userId);\n});\n```\n\n### Peer Video on Mid-Session Join\n\n**Existing participants' videos won't auto-render when you join mid-session.**\n\n```javascript\n\u002F\u002F After joining, render existing participants' videos\nconst renderExistingVideos = async () => {\n  await new Promise(resolve => setTimeout(resolve, 500));\n  \n  const users = client.getAllUser();\n  const currentUserId = client.getCurrentUserInfo().userId;\n  \n  for (const user of users) {\n    if (user.bVideoOn && user.userId !== currentUserId) {\n      const element = await stream.attachVideo(user.userId, VideoQuality.Video_360P);\n      document.getElementById(`video-${user.userId}`).appendChild(element);\n    }\n  }\n};\n```\n\n### CDN Race Condition with ES Modules\n\nWhen using `\u003Cscript type=\"module\">` with CDN, the SDK may not be loaded yet:\n\n```javascript\nfunction waitForSDK(timeout = 10000) {\n  return new Promise((resolve, reject) => {\n    if (typeof WebVideoSDK !== 'undefined') {\n      resolve();\n      return;\n    }\n    const start = Date.now();\n    const check = setInterval(() => {\n      if (typeof WebVideoSDK !== 'undefined') {\n        clearInterval(check);\n        resolve();\n      } else if (Date.now() - start > timeout) {\n        clearInterval(check);\n        reject(new Error('SDK failed to load'));\n      }\n    }, 100);\n  });\n}\n\nawait waitForSDK();\nconst ZoomVideo = WebVideoSDK.default;\n```\n\n### SharedArrayBuffer for HD Video\n\nFor optimal performance and HD video, configure these headers on your server:\n\n```\nCross-Origin-Opener-Policy: same-origin\nCross-Origin-Embedder-Policy: require-corp\n```\n\n**Note:** As of v1.11.2, SharedArrayBuffer is elective (not strictly required).\n\n### Check HD Capability Before Enabling\n\n```javascript\nconst stream = client.getMediaStream();\n\n\u002F\u002F Check if 720p is supported\nconst hdSupported = stream.isSupportHDVideo();\n\n\u002F\u002F Get maximum video quality\nconst maxQuality = stream.getVideoMaxQuality();\n\u002F\u002F 0=90P, 1=180P, 2=360P, 3=720P, 4=1080P\n\n\u002F\u002F Start video with HD\nif (hdSupported) {\n  await stream.startVideo({ hd: true });\n}\n```\n\n### Screen Share Rendering Mode Check\n\n```javascript\nconst stream = client.getMediaStream();\n\n\u002F\u002F Check which element type to use\nif (stream.isStartShareScreenWithVideoElement()) {\n  \u002F\u002F Use video element\n  const video = document.getElementById('share-video');\n  await stream.startShareScreen(video as unknown as HTMLCanvasElement);\n} else {\n  \u002F\u002F Use canvas element\n  const canvas = document.getElementById('share-canvas');\n  await stream.startShareScreen(canvas);\n}\n```\n\n## Key Features\n\n### Video Quality Enum\n\n```javascript\nimport { VideoQuality } from '@zoom\u002Fvideosdk';\n\nVideoQuality.Video_90P   \u002F\u002F 0\nVideoQuality.Video_180P  \u002F\u002F 1\nVideoQuality.Video_360P  \u002F\u002F 2 (recommended for most cases)\nVideoQuality.Video_720P  \u002F\u002F 3\nVideoQuality.Video_1080P \u002F\u002F 4\n```\n\n### Virtual Backgrounds\n\n```javascript\nconst stream = client.getMediaStream();\n\n\u002F\u002F Always check support first\nif (stream.isSupportVirtualBackground()) {\n  \u002F\u002F Blur background\n  await stream.updateVirtualBackgroundImage('blur');\n  \n  \u002F\u002F Custom image background\n  await stream.updateVirtualBackgroundImage('https:\u002F\u002Fexample.com\u002Fbg.jpg');\n  \n  \u002F\u002F Remove virtual background\n  await stream.updateVirtualBackgroundImage(undefined);\n}\n```\n\n### Video Processor (Custom Effects)\n\nThe `VideoProcessor` class allows you to intercept and modify video frames:\n\n```javascript\n\u002F\u002F video-processor-worker.js\nclass MyVideoProcessor extends VideoProcessor {\n  processFrame(input, output) {\n    const ctx = output.getContext('2d');\n    ctx.drawImage(input, 0, 0);\n    \n    \u002F\u002F Add overlay\n    ctx.fillStyle = 'white';\n    ctx.font = '24px Arial';\n    ctx.fillText('Live', 20, 40);\n    \n    return true;\n  }\n}\n```\n\n### WebRTC Mode\n\nEnable WebRTC mode for direct peer-to-peer streaming with HD video support:\n\n```javascript\nawait client.init('en-US', 'Global', {\n  patchJsMedia: true,\n  webrtc: true  \u002F\u002F Enable WebRTC mode\n});\n```\n\n## Feature Clients\n\nAccess specialized clients from the VideoClient:\n\n| Client | Access Method | Purpose |\n|--------|---------------|---------|\n| **Stream** | `client.getMediaStream()` | Video, audio, screen share, devices |\n| **Chat** | `client.getChatClient()` | Send\u002Freceive messages |\n| **Command** | `client.getCommandClient()` | Custom commands (reactions, etc.) |\n| **Recording** | `client.getRecordingClient()` | Cloud recording control |\n| **Transcription** | `client.getLiveTranscriptionClient()` | Live captions |\n| **LiveStream** | `client.getLiveStreamClient()` | RTMP streaming |\n| **Subsession** | `client.getSubsessionClient()` | Breakout rooms |\n| **Whiteboard** | `client.getWhiteboardClient()` | Collaborative whiteboard |\n\n## Common Tasks\n\n### Start\u002FStop Video\n\n```javascript\nawait stream.startVideo();\nawait stream.stopVideo();\n```\n\n### Start\u002FStop Audio\n\n```javascript\nawait stream.startAudio();\nawait stream.muteAudio();\nawait stream.unmuteAudio();\nawait stream.stopAudio();\n```\n\n### Switch Devices\n\n```javascript\n\u002F\u002F Get available devices\nconst cameras = stream.getCameraList();\nconst mics = stream.getMicList();\nconst speakers = stream.getSpeakerList();\n\n\u002F\u002F Switch devices\nawait stream.switchCamera(cameraId);\nawait stream.switchMicrophone(micId);\nawait stream.switchSpeaker(speakerId);\n```\n\n### Screen Sharing\n\n```javascript\n\u002F\u002F Start sharing\nawait stream.startShareScreen(canvas);\n\n\u002F\u002F Stop sharing\nawait stream.stopShareScreen();\n\n\u002F\u002F Receive share\nclient.on('active-share-change', async (payload) => {\n  if (payload.state === 'Active') {\n    await stream.startShareView(canvas, payload.userId);\n  } else {\n    await stream.stopShareView();\n  }\n});\n```\n\n### Chat\n\n```javascript\nconst chatClient = client.getChatClient();\n\n\u002F\u002F Send to everyone\nawait chatClient.send('Hello, everyone!');\n\n\u002F\u002F Send to specific user\nawait chatClient.sendToUser(userId, 'Private message');\n\n\u002F\u002F Receive messages\nclient.on('chat-on-message', (payload) => {\n  console.log(`${payload.sender.name}: ${payload.message}`);\n});\n```\n\n### Recording (Host Only)\n\n```javascript\nconst recordingClient = client.getRecordingClient();\n\nawait recordingClient.startCloudRecording();\nawait recordingClient.stopCloudRecording();\n\nclient.on('recording-change', (payload) => {\n  console.log('Recording status:', payload.state);\n});\n```\n\n### Leave\u002FEnd Session\n\n```javascript\n\u002F\u002F Leave session (others stay)\nawait client.leave();\n\n\u002F\u002F End session for ALL participants (host only)\nawait client.leave(true);\n```\n\n## Error Handling\n\n### Common Join Errors\n\n| Error | Cause | Solution |\n|-------|-------|----------|\n| `Invalid signature` | JWT expired or malformed | Generate new signature |\n| `Session does not exist` | Host hasn't started yet | Show \"waiting\" message, retry |\n| `Permission denied` | User denied camera\u002Fmic | Request permission again |\n\n### Example Error Handler\n\n```javascript\ntry {\n  await client.join(topic, signature, userName, password);\n} catch (error) {\n  if (error.reason?.includes('signature')) {\n    \u002F\u002F Regenerate signature and retry\n  } else if (error.reason?.includes('Session')) {\n    \u002F\u002F Show \"Waiting for host...\" and poll\n  } else if (error.reason?.includes('Permission')) {\n    \u002F\u002F Guide user to enable permissions\n  }\n  console.error('Join failed:', error);\n}\n```\n\n## Browser Compatibility\n\n| Feature | Chrome | Firefox | Safari | Edge |\n|---------|--------|---------|--------|------|\n| Video | 80+ | 75+ | 14+ | 80+ |\n| Audio | 80+ | 75+ | 14+ | 80+ |\n| Screen Share | 80+ | 75+ | 15+ | 80+ |\n| Virtual BG | 80+ | 90+ | - | 80+ |\n\n**Safari Notes:**\n- Virtual background not supported\n- Screen sharing requires macOS 15+\n\n## CORS Errors (Telemetry)\n\n**CORS errors to `log-external-gateway.zoom.us` are harmless.**\n\nThese are caused by COOP\u002FCOEP headers blocking telemetry requests. They don't affect SDK functionality.\n\n## Complete Documentation Library\n\n### Core Concepts\n- **[SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md)** - Universal 3-step pattern for ANY feature\n- **[Singleton Hierarchy](concepts\u002Fsingleton-hierarchy.md)** - 4-level navigation guide\n\n### Complete Examples\n- **[Session Join Pattern](examples\u002Fsession-join-pattern.md)** - JWT auth + session join with full code\n- **[Video Rendering](examples\u002Fvideo-rendering.md)** - attachVideo() patterns\n- **[Screen Share](examples\u002Fscreen-share.md)** - Send and receive screen shares\n- **[Event Handling](examples\u002Fevent-handling.md)** - Required events\n- **[Chat](examples\u002Fchat.md)** - In-session messaging\n- **[Recording](examples\u002Frecording.md)** - Cloud recording control\n- **[Transcription](examples\u002Ftranscription.md)** - Live captions\n\n### Framework Integrations\n- **[React Hooks](examples\u002Freact-hooks.md)** - Official @zoom\u002Fvideosdk-react library\n- **[Framework Integrations](examples\u002Fframework-integrations.md)** - Next.js, Vue\u002FNuxt patterns\n\n### Troubleshooting\n- **[Common Issues](troubleshooting\u002Fcommon-issues.md)** - Quick diagnostics & error codes\n\n### References\n- **[API Reference](references\u002Fweb-reference.md)** - Complete method signatures\n- **[Events Reference](references\u002Fevents-reference.md)** - All event types\n- **[SKILL.md](SKILL.md)** - Complete navigation guide\n\n## Official Sample Repositories\n\n| Type | Repository |\n|------|------------|\n| Web Sample | [videosdk-web-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-web-sample) |\n| React SDK | [videosdk-react](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-react) |\n| Next.js | [videosdk-nextjs-quickstart](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-nextjs-quickstart) |\n| Vue\u002FNuxt | [videosdk-vue-nuxt-quickstart](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-vue-nuxt-quickstart) |\n| Auth Endpoint | [videosdk-auth-endpoint-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-auth-endpoint-sample) |\n| UI Toolkit | [videosdk-zoom-ui-toolkit-react-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-react-sample) |\n\n## Resources\n\n- **Official Docs**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002F\n- **API Reference**: https:\u002F\u002Fmarketplacefront.zoom.us\u002Fsdk\u002Fcustom\u002Fweb\u002Fmodules.html\n- **Dev Forum**: https:\u002F\u002Fdevforum.zoom.us\u002F\n- **GitHub Samples**: https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-web-sample\n\n---\n\n**Need help?** Start with [SKILL.md](SKILL.md) for complete navigation.\n\n\n## Merged from video-sdk\u002Fweb\u002FSKILL.md\n\n# Zoom Video SDK Web - Complete Documentation Index\n\n## Quick Start Path\n\n**If you're new to the SDK, follow this order:**\n\n1. **Read the architecture pattern** → [concepts\u002Fsdk-architecture-pattern.md](concepts\u002Fsdk-architecture-pattern.md)\n   - Universal formula: Create Client → Init → Join → Get Stream → Use\n   - Once you understand this, you can implement any feature\n\n2. **Implement session join** → [examples\u002Fsession-join-pattern.md](examples\u002Fsession-join-pattern.md)\n   - Complete working JWT + session join code\n\n3. **Listen to events** → [examples\u002Fevent-handling.md](examples\u002Fevent-handling.md)\n   - **CRITICAL**: The SDK is event-driven, you must listen for events\n\n4. **Implement video** → [examples\u002Fvideo-rendering.md](examples\u002Fvideo-rendering.md)\n   - Use attachVideo(), NOT renderVideo()\n\n5. **Troubleshoot any issues** → [troubleshooting\u002Fcommon-issues.md](troubleshooting\u002Fcommon-issues.md)\n   - Quick diagnostic checklist\n   - Error code tables\n\n---\n\n## Documentation Structure\n\n```\nvideo-sdk\u002Fweb\u002F\n├── SKILL.md                           # Main skill overview\n├── SKILL.md                           # This file - navigation guide\n│\n├── concepts\u002F                          # Core architectural patterns\n│   ├── sdk-architecture-pattern.md   # Universal formula for ANY feature\n│   └── singleton-hierarchy.md        # 4-level navigation guide\n│\n├── examples\u002F                          # Complete working code\n│   ├── session-join-pattern.md       # JWT auth + session join\n│   ├── video-rendering.md            # attachVideo() patterns\n│   ├── screen-share.md               # Send and receive screen shares\n│   ├── event-handling.md             # Required events\n│   ├── chat.md                       # Chat implementation\n│   ├── command-channel.md            # Command channel messaging\n│   ├── recording.md                  # Cloud recording control\n│   ├── transcription.md              # Live transcription\u002Fcaptions\n│   ├── react-hooks.md                # Official @zoom\u002Fvideosdk-react library\n│   └── framework-integrations.md     # Next.js, Vue\u002FNuxt, ZFG patterns\n│\n├── troubleshooting\u002F                   # Problem solving guides\n│   └── common-issues.md              # Quick diagnostic workflow\n│\n└── references\u002F                        # Reference documentation\n    ├── web-reference.md              # API hierarchy, methods, error codes\n    └── events-reference.md           # All event types\n```\n\n---\n\n## By Use Case\n\n### I want to build a video app\n1. [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md) - Understand the pattern\n2. [Session Join Pattern](examples\u002Fsession-join-pattern.md) - Join sessions\n3. [Video Rendering](examples\u002Fvideo-rendering.md) - Display video\n4. [Event Handling](examples\u002Fevent-handling.md) - Listen for video events\n\n### I'm getting runtime errors\n1. [Common Issues](troubleshooting\u002Fcommon-issues.md) - Error code tables\n2. \"getMediaStream() is undefined\" → Call AFTER join() completes\n\n### I want to receive screen shares\n1. [Screen Share](examples\u002Fscreen-share.md) - startShareView() patterns\n2. [Event Handling](examples\u002Fevent-handling.md) - active-share-change event\n\n### I want to send screen shares\n1. [Screen Share](examples\u002Fscreen-share.md) - startShareScreen() patterns\n2. Check isStartShareScreenWithVideoElement() for element type\n\n### I want to use chat\n1. [Chat](examples\u002Fchat.md) - Send\u002Freceive messages\n2. getChatClient() for ChatClient access\n\n### I want to record sessions\n1. [Recording](examples\u002Frecording.md) - Cloud recording (host only)\n2. getRecordingClient() for RecordingClient access\n\n### I want to use live transcription\n1. [Transcription](examples\u002Ftranscription.md) - Enable live captions\n2. getLiveTranscriptionClient() for LiveTranscriptionClient access\n\n### I want to use command channel\n1. [Command Channel](examples\u002Fcommand-channel.md) - Custom signaling between participants\n2. Must call getCommandClient() AFTER join()\n\n### I want to implement a specific feature\n1. [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md) - **START HERE!**\n2. [Singleton Hierarchy](concepts\u002Fsingleton-hierarchy.md) - Navigate to the feature\n3. [API Reference](references\u002Fweb-reference.md) - Method signatures\n\n### I'm using React\n1. [React Hooks](examples\u002Freact-hooks.md) - Official @zoom\u002Fvideosdk-react library\n2. Provides hooks: useSession, useSessionUsers, useVideoState, useAudioState\n3. Pre-built components: VideoPlayerComponent, ScreenSharePlayerComponent\n\n### I'm using Next.js or Vue\u002FNuxt\n1. [Framework Integrations](examples\u002Fframework-integrations.md) - SSR considerations\n2. Server-side JWT generation patterns\n3. Client-side only SDK usage\n\n---\n\n## Most Critical Documents\n\n### 1. SDK Architecture Pattern (MASTER DOCUMENT)\n**[concepts\u002Fsdk-architecture-pattern.md](concepts\u002Fsdk-architecture-pattern.md)**\n\nThe universal 5-step pattern:\n1. Create client\n2. Initialize SDK\n3. Join session\n4. Get stream\n5. Use features + listen to events\n\n### 2. Common Issues (MOST COMMON PROBLEMS)\n**[troubleshooting\u002Fcommon-issues.md](troubleshooting\u002Fcommon-issues.md)**\n\nCommon issues:\n- getMediaStream() returns undefined\n- Video not displaying\n- renderVideo() deprecated\n\n### 3. Singleton Hierarchy (NAVIGATION MAP)\n**[concepts\u002Fsingleton-hierarchy.md](concepts\u002Fsingleton-hierarchy.md)**\n\n4-level deep navigation showing how to reach every feature.\n\n---\n\n## Key Learnings\n\n### Critical Discoveries:\n\n1. **getMediaStream() ONLY works after join()**\n   - The stream object is not available until session is joined\n   - See: [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md)\n\n2. **Use attachVideo() NOT renderVideo()**\n   - renderVideo() is deprecated\n   - attachVideo() returns a VideoPlayer element to append to DOM\n   - See: [Video Rendering](examples\u002Fvideo-rendering.md)\n\n3. **The SDK is Event-Driven**\n   - You MUST listen for events to render participant videos\n   - key events: peer-video-state-change, user-added, user-removed\n   - See: [Event Handling](examples\u002Fevent-handling.md)\n\n4. **Peer Videos on Mid-Session Join**\n   - Existing participants' videos won't auto-render\n   - Must manually iterate getAllUser() and attachVideo()\n   - See: [Video Rendering](examples\u002Fvideo-rendering.md)\n\n5. **CDN vs NPM**\n   - CDN exports as `WebVideoSDK.default`, not `ZoomVideo`\n   - Some networks\u002Fad blockers may block `source.zoom.us` - allowlist or use a permitted fallback strategy\n   - See: [Session Join Pattern](examples\u002Fsession-join-pattern.md)\n\n6. **SharedArrayBuffer for HD**\n   - Required for 720p\u002F1080p video\n   - Need COOP\u002FCOEP headers on server\n   - Check with `stream.isSupportHDVideo()`\n\n7. **Screen Share Element Type**\n   - Check `isStartShareScreenWithVideoElement()` for correct element type\n   - See: [Screen Share](examples\u002Fscreen-share.md)\n\n8. **Command Channel Setup Order**\n   - Must call getCommandClient() AFTER client.join()\n   - Register listeners AFTER join, not before\n   - Web uses getCommandClient() not getCmdChannel()\n   - See: [Command Channel](examples\u002Fcommand-channel.md)\n\n9. **Command Channel is Session-Scoped**\n   - Does NOT span across different sessions\n   - Both sender and receiver must be in the same session\n\n---\n\n## Quick Reference\n\n### \"getMediaStream() returns undefined\"\n→ Call AFTER join() completes\n\n### \"Video not showing\"\n→ [Video Rendering](examples\u002Fvideo-rendering.md) - Use attachVideo(), check events\n\n### \"renderVideo() doesn't work\"\n→ [Video Rendering](examples\u002Fvideo-rendering.md) - Use attachVideo() instead\n\n### \"How do I implement [feature]?\"\n→ [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md)\n\n### \"How do I navigate to [client]?\"\n→ [Singleton Hierarchy](concepts\u002Fsingleton-hierarchy.md)\n\n### \"What error code means what?\"\n→ [Common Issues](troubleshooting\u002Fcommon-issues.md)\n\n---\n\n## Document Version\n\nBased on **Zoom Video SDK for Web v2.3.x**\n\n---\n\n**Happy coding!**\n\nRemember: The [SDK Architecture Pattern](concepts\u002Fsdk-architecture-pattern.md) is your key to unlocking the entire SDK. Read it first!\n\n## Operations\n\n- [RUNBOOK.md](RUNBOOK.md) - 5-minute preflight and debugging checklist.\n",{"name":5,"triggers":49,"description":7,"user-invocable":45},[25,50,51,52,53],"custom video web","attachvideo","peer-video-state-change","web videosdk","main","e605d8ddbfb688da57dfaaceebd93f12a64ef1d3","partner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb",3926,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins","https:\u002F\u002Fgithub.com\u002Fanthropics","https:\u002F\u002Fanthropic.com","2026-11-11 15:25:16",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add anthropics\u002Fknowledge-work-plugins --skill video-sdk\u002Fweb",{"tool":68,"command":69},"bunx","bunx skills add anthropics\u002Fknowledge-work-plugins --skill video-sdk\u002Fweb",{"tool":71,"command":72},"pnpm","pnpm dlx skills add anthropics\u002Fknowledge-work-plugins --skill video-sdk\u002Fweb","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002FSKILL.md",true,[76,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142],{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"concepts\u002Fsdk-architecture-pattern.md","REFERENCE","参考文档",8547,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fconcepts\u002Fsdk-architecture-pattern.md",{"path":83,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":84,"sourceHtmlUrl":85},"concepts\u002Fsingleton-hierarchy.md",19327,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fconcepts\u002Fsingleton-hierarchy.md",{"path":87,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":88,"sourceHtmlUrl":89},"examples\u002Fchat.md",12278,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Fchat.md",{"path":91,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":92,"sourceHtmlUrl":93},"examples\u002Fcommand-channel.md",7320,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Fcommand-channel.md",{"path":95,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":96,"sourceHtmlUrl":97},"examples\u002Fevent-handling.md",14408,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Fevent-handling.md",{"path":99,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":100,"sourceHtmlUrl":101},"examples\u002Fframework-integrations.md",11097,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Fframework-integrations.md",{"path":103,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":104,"sourceHtmlUrl":105},"examples\u002Freact-hooks.md",10048,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Freact-hooks.md",{"path":107,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":108,"sourceHtmlUrl":109},"examples\u002Frecording.md",10599,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Frecording.md",{"path":111,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":112,"sourceHtmlUrl":113},"examples\u002Fscreen-share.md",12349,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Fscreen-share.md",{"path":115,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":116,"sourceHtmlUrl":117},"examples\u002Fsession-join-pattern.md",10441,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Fsession-join-pattern.md",{"path":119,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":120,"sourceHtmlUrl":121},"examples\u002Ftranscription.md",14219,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Ftranscription.md",{"path":123,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":124,"sourceHtmlUrl":125},"examples\u002Fvideo-rendering.md",10229,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Fexamples\u002Fvideo-rendering.md",{"path":127,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":128,"sourceHtmlUrl":129},"references\u002Fevents-reference.md",13158,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Freferences\u002Fevents-reference.md",{"path":131,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":132,"sourceHtmlUrl":133},"references\u002Fweb-reference.md",15916,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Freferences\u002Fweb-reference.md",{"path":135,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":136,"sourceHtmlUrl":137},"references\u002Fweb.md",26780,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Freferences\u002Fweb.md",{"path":139,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":140,"sourceHtmlUrl":141},"RUNBOOK.md",2513,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002FRUNBOOK.md",{"path":143,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":144,"sourceHtmlUrl":145},"troubleshooting\u002Fcommon-issues.md",11213,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fvideo-sdk\u002Fweb\u002Ftroubleshooting\u002Fcommon-issues.md",[147,174,199,221,249,275],{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":153,"publishedAt":44},"01M718Y97HCGW12Q53PSJDY03W","ticket-deflector","Reads a forwarded customer email or ticket, pulls order and refund status from a payments connector (PayPal, Square, or Stripe) or Shopify, account history from the CRM, and open tickets from a support desk (Zoho Desk), drafts a tone-matched reply in the owner's writing voice, and can issue a refund through the payments connector with explicit owner approval. With Shopify connected it also runs a proactive order-triage mode that surfaces orders needing attention — unfulfilled past the promised window, payment problems, pending refunds, stuck shipments — and drafts the next action for each before the customer has to ask. Use when the user says \"draft a response,\" \"answer this customer,\" \"where's my order,\" \"I want a refund,\" \"check my orders,\" or \"anything about to blow up.\"","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Fticket-deflector\u002FSKILL.md",[],[154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173],"ticket","ticket deflector","mode","up","payments","open","writing","when","workflow","ask","Connector","text","mail","window","next","customer","support","crm","past","read",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":180,"publishedAt":44},"01M718Y55HFAN5705ME5VEDZ9K","tax-season-organizer","Prepares tax-season materials for the owner's accountant, not tax advice. US federal tax; a non-US business gets its closed-books packet instead. Two modes: (1) quarterly estimated tax from YTD net income in the ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books); (2) year-end 1099 prep, scanning the ledger, PayPal, and Stripe for contractors paid over USD 600 into a 1099-NEC list with missing W-9 flags.\nAny tax request routes first to \u002Ftax-prep, which confirms the books are closed and reconciled before running this skill. Use this skill directly only when the owner says the period's books are already closed: \"books are closed, now do the 1099s,\" \"run the quarterly estimate off the closed numbers,\" or \"just the contractor W-9 list.\"","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Ftax-season-organizer\u002FSKILL.md",[],[181,182,183,184,185,186,187,188,189,190,161,191,192,193,194,195,173,196,197,198],"tax season organizer","tax","us federal","which","netsuite","paid","end","usd","only","now","books","xero","scanning","run","request","flags","list","stripe",{"skillNo":200,"name":201,"nameZh":6,"description":202,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":203,"categories":204,"keywords":205,"publishedAt":44},"01M718Y13VVPHDD9NTDBVFJ2AZ","tax-prep","Prepares tax materials as a two-link chain — month-end-prep confirms the books are closed and reconciled first, then tax-season-organizer calculates the quarterly estimated payment or builds the year-end 1099-NEC list and accountant packet from those closed numbers. Requires a ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books); uses Gusto, PayPal, and Stripe when connected, else CSV upload. US federal tax math; a non-US business gets the closed-books packet. Prep material for a CPA, never tax advice, nothing filed. Trigger on \"quarterly taxes,\" \"estimated tax payment,\" \"how much should I set aside,\" \"1099s,\" \"1099-NEC,\" \"W-9s,\" \"year-end tax prep,\" \"get my books ready for my accountant,\" any phrasing that suggests a tax deadline is coming, or a question about net profit or YTD income that sounds like worry about a tax bill. An owner who says the period's books are already closed routes to tax-season-organizer directly.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Ftax-prep\u002FSKILL.md",[],[206,182,207,208,183,209,210,185,211,212,213,214,215,37,216,187,217,218,219,220],"tax prep","prep","SET","as","ready","never","zoho books","get","chain","profit","trigger","material","question","paypal","business",{"skillNo":222,"name":223,"nameZh":6,"description":224,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":225,"categories":226,"keywords":232,"publishedAt":44},"01M718XWTWQZ01GYSG9T8RW8TW","speed-to-lead","Makes sure no inbound lead goes unanswered. Watches web forms, the shared inbox, and the CRM for new inquiries, qualifies each one against the owner's criteria, drafts a reply in the owner's voice with real meeting times for the owner to approve and send, routes anything hot to a human right away, and logs the whole thing to the CRM. Never sends on its own. Built to run on a schedule so overnight inquiries are drafted and sorted by morning, and works from forwarded or pasted inquiries when no connector is available. Use this whenever the owner is worried about inbound leads or response time — including phrasings like \"leads are going cold,\" \"did anyone answer that inquiry,\" \"I keep missing form submissions,\" \"nothing falls through the cracks,\" \"handle my inbound,\" \"respond to this lead,\" or \"we lose people because nobody gets back fast enough.\" Reach for it for a single unanswered inquiry as readily as for a standing setup.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Fspeed-to-lead\u002FSKILL.md",[227],{"categoryNo":228,"categoryName":229,"taxonomyType":230,"taxonomyTypeDesc":231},"01JBSEEDCAT000000000000034","行政与办公人员","PROFESSION","适用职业",[233,234,235,236,237,238,211,42,239,240,241,242,243,244,161,245,246,164,247,248],"speed to lead","lead","speed","shared","back","cold","inbox","send","respond","new","web forms","people","schedule","logs","sure","human",{"skillNo":250,"name":251,"nameZh":6,"description":252,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":253,"categories":254,"keywords":258,"publishedAt":44},"01M718XQYMN1KY3TPS33967FK0","social-content-engine","Runs the owner's content operation as a standing thing rather than a one-off: keeps a rolling posting calendar, learns the owner's voice, generates on-brand Canva graphics, writes captions that sound like them, repurposes one asset into every channel format, and stages posts for approval instead of publishing on its own. Pulls product photos and prices from Shopify when connected; with no connectors, drafts the calendar and asset briefs for manual posting. Use this whenever the owner talks about posting, content, or social — including \"I need to post more,\" \"we've gone quiet on Instagram,\" \"what should we post this month,\" \"make the content,\" \"give me a month of posts,\" \"write this in my voice,\" \"repurpose this,\" or \"set up our content calendar.\" Reach for it for a single post as readily as for a full quarter. One handoff: a finished, approved campaign brief goes to canva-creator; this skill owns the standing operation.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Fsocial-content-engine\u002FSKILL.md",[255],{"categoryNo":256,"categoryName":257,"taxonomyType":230,"taxonomyTypeDesc":231},"01JBSEEDCAT000000000000036","内容创作者",[259,260,261,262,263,264,208,265,266,267,268,157,269,161,270,271,272,173,273,274],"social","social content engine","engine","content engine","social content","content","brief","posts","Captions","prices","campaign","me","product","calendar","write","drafts",{"skillNo":276,"name":277,"nameZh":6,"description":278,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":279,"categories":280,"keywords":281,"publishedAt":44},"01M718XMPJVH0EVRVP998BVZPC","smb-router","The front door to the Small Business plugin. Listens to what the owner needs right now — vague or specific — and routes them to the best skill or slash command for the moment. Also serves as a guide: explains what's available, suggests what to try next, and adapts recommendations based on stored business context. Trigger whenever the owner asks \"what can you do,\" \"help me with my business,\" \"what should I focus on,\" \"I don't know where to start,\" or any open-ended business request that doesn't clearly match a single skill.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Fsmb-router\u002FSKILL.md",[],[282,283,284,209,285,37,216,286,159,287,190,220,288,289,290,291,292,270,293,168],"router","smb","smb router","do","front","single","you","vague","can","with","plugin","focus"]