帮助开发者将 Zoom 会议组件嵌入 Web 应用并灵活定制交互界面。
复制安装指令,让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "zoom-meeting-sdk-web-component-view" 技能: 1. 下载 https://raw.githubusercontent.com/anthropics/knowledge-work-plugins/main/partner-built/zoom-plugin/skills/meeting-sdk/web/component-view/SKILL.md 2. 保存为 ~/.claude/skills/component-view/SKILL.md 3. 装好后重载技能,告诉我可以用了
请给我一个在 React 应用中集成 Zoom Meeting SDK Web Component View 的示例,使用 async/await 初始化并加入会议,包含必要的容器、参数说明和基础错误处理。
一段可参考的 React 集成代码,展示组件挂载、会议加入流程与错误处理方式。
我想把 Zoom 嵌入式会议界面放进自定义页面布局中,请说明如何配置容器、控制组件位置,并给出适合 Vue 或 Angular 的实现思路。
关于嵌入式容器配置与自定义布局控制的说明,并附带前端框架实现建议。
请帮我把 ZoomMtgEmbedded 的初始化、鉴权参数处理和加入会议流程封装成一个可复用的 JavaScript 模块,采用 Promise 或 async/await 风格。
一个结构清晰的可复用模块设计,用于简化 Zoom 嵌入会议的接入流程。
Embeddable Zoom meeting components for flexible integration into any web application. Component View provides Promise-based APIs and customizable UI.
This is the correct web skill for a custom UI around a real Zoom meeting. Do not route to Video SDK unless the user is building a non-meeting custom session product.
Component View uses ZoomMtgEmbedded.createClient() to create embeddable meeting components within a specific container element.
| Aspect | Details |
|---|---|
| API Object | ZoomMtgEmbedded.createClient() (instance) |
| API Style | Promise-based (async/await) |
| UI | Embeddable in any container |
| Password param | password (lowercase) |
| Events | / |
on()off()| Best For | Custom layouts, React/Vue/Angular apps |
npm install @zoom/meetingsdk --save
import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';
<script src="https://source.zoom.us/{VERSION}/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-embedded-{VERSION}.min.js"></script>
import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';
// Step 1: Create client instance (do once, not on every render!)
const client = ZoomMtgEmbedded.createClient();
async function joinMeeting() {
try {
// Step 2: Get container element
const meetingSDKElement = document.getElementById('meetingSDKElement');
// Step 3: Initialize client
await client.init({
zoomAppRoot: meetingSDKElement,
language: 'en-US',
debug: true,
patchJsMedia: true,
leaveOnPageUnload: true,
});
// Step 4: Join meeting
await client.join({
signature: signature,
sdkKey: sdkKey,
meetingNumber: meetingNumber,
userName: userName,
password: password, // lowercase!
userEmail: userEmail,
});
console.log('Joined successfully!');
} catch (error) {
console.error('Failed to join:', error);
}
}
| Parameter | Type | Description |
|---|---|---|
zoomAppRoot | HTMLElement | Container element for meeting UI |
| Parameter | Type | Default | Description |
|---|---|---|---|
language | string | 'en-US' | UI language |
debug | boolean | false | Enable debug logging |
| Parameter | Type | Default | Description |
|---|---|---|---|
patchJsMedia | boolean | false | Auto-apply media fixes |
leaveOnPageUnload | boolean | false | Cleanup on page unload |
enableHD | boolean | true | Enable 720p video |
enableFullHD | boolean | false | Enable 1080p video |
| Parameter | Type | Description |
|---|---|---|
customize | object | UI customization options |
webEndpoint | string | For ZFG: 'www.zoomgov.com' |
assetPath | string | Custom path for AV libraries |
await client.init({
zoomAppRoot: element,
customize: {
// Meeting info displayed
meetingInfo: [
'topic',
'host',
'mn',
'pwd',
'telPwd',
'invite',
'participant',
'dc',
'enctype'
],
// Video customization
video: {
isResizable: true,
viewSizes: {
default: {
width: 1000,
height: 600
},
ribbon: {
width: 300,
height: 700
}
…
围绕客户问题进行多来源调研与溯源,快速整理背景并支持准确回复。
帮助开发者在 Electron 桌面应用中集成 Zoom 会议、鉴权、入会与原始数据能力。