mcpField
B
build-zoom-meeting-sdk-app

build-zoom-meeting-sdk-app

github.com/anthropics开发33.6k2.1k 次安装1 天前更新
代码仓库

关于 build-zoom-meeting-sdk-app

用于通过 Meeting SDK 在客户端和无头环境中嵌入 Zoom 会议的参考技能，涵盖平台配置、SDK 签名、加入流程、界面选项和故障排查。

主要功能

  1. 01各平台 SDK 指南
  2. 02服务端生成签名
  3. 03Web Component 与 Client 视图
  4. 04加入与授权参考
  5. 05故障排查与示例链接

适用场景

  1. 01在应用界面中嵌入 Zoom 会议
  2. 02使用 SDK 签名构建 Web 会议流程
  3. 03开发无头 Linux 会议 Bot

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/anthropics/knowledge-work-plugins --skill build-zoom-meeting-sdk-app

安装后在 Claude Code 中输入/build-zoom-meeting-sdk-app确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

android/
android.md
RUNBOOK.md
android/concepts/
architecture.md
lifecycle-workflow.md
android/examples/
join-start-pattern.md
android/references/
android-reference-map.md
environment-variables.md
versioning-and-compatibility.md
android/scenarios/
high-level-scenarios.md
android/troubleshooting/
common-issues.md
electron/
RUNBOOK.md
electron/concepts/
high-level-scenarios.md
lifecycle-workflow.md
sdk-architecture-pattern.md
electron/examples/
authentication-pattern.md
join-meeting-pattern.md
raw-data-pattern.md
setup-guide.md
electron/references/
electron-reference.md
module-map.md
electron/troubleshooting/
common-issues.md
deprecated-and-contradictions.md
version-drift.md
ios/
ios.md
ios/concepts/
architecture.md
lifecycle-workflow.md
ios/examples/
join-start-pattern.md
ios/references/
environment-variables.md
ios-reference-map.md
versioning-and-compatibility.md

详细介绍

/build-zoom-meeting-sdk-app

面向 Web、移动端、桌面端及 Linux 机器人环境的嵌入式 Zoom 会议背景参考。请先使用 build-zoom-meeting-app 或 build-zoom-bot，再转到此处查看平台细节。

Zoom Meeting SDK

将完整的 Zoom 会议体验嵌入 Web、移动端、桌面端及无界面（headless）集成中。

硬性路由规则（请先阅读）

  • 如果用户要求在其应用界面内嵌入或加入会议，请路由至 Meeting SDK 实现方案。
  • 除非用户明确要求管理会议资源或生成浏览器 join_url 链接，否则不要切换为仅使用 REST 的会议链接流程。
  • Meeting SDK 加入流程需要 SDK 签名及 SDK 加入调用；REST 的 join_url 不是 Meeting SDK 的加入载荷。

前提条件

  • 具备 Meeting SDK 凭据的 Zoom 应用
  • 来自 Marketplace 的 SDK Key 和 Secret
  • 平台对应的开发环境（Web、Android、iOS、macOS、Unreal、Electron、Linux 或 Windows）

需要 OAuth 或签名方面的帮助？ 请参阅 zoom-oauth 技能了解身份验证流程。

需要 Web 端加入前诊断？ 在初始化或加入 Meeting SDK 之前，使用 probe-sdk 来拦截就绪度较低的设备或网络。

快速排查故障： 在进行深入调试之前，请先使用 5 分钟排障手册。

快速开始（Web - 通过 CDN 使用 Client View）

<script src="https://source.zoom.us/3.1.6/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/3.1.6/zoom-meeting-3.1.6.min.js"></script>

<script>
// CDN provides ZoomMtg (Client View - full page)
// For ZoomMtgEmbedded (Component View), use npm instead

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

ZoomMtg.init({
  leaveUrl: window.location.href,
  patchJsMedia: true,
  disableCORP: !window.crossOriginIsolated,
  success: function() {
    ZoomMtg.join({
      sdkKey: 'YOUR_SDK_KEY',
      signature: 'YOUR_SIGNATURE',  // Generate server-side!
      meetingNumber: 'MEETING_NUMBER',
      userName: 'User Name',
      passWord: '',  // Note: camelCase with capital W
      success: function(res) { console.log('Joined'); },
      error: function(err) { console.error(err); }
    });
  },
  error: function(err) { console.error(err); }
});
</script>

重要注意事项（Web）

1. CDN 与 npm - API 不同！
分发方式全局对象视图类型API 风格
CDN（zoom-meeting-{ver}.min.js）ZoomMtgClient View（全页面）回调
npm（@zoom/meetingsdk）ZoomMtgEmbeddedComponent View（可嵌入）Promise
2. 生产环境需要后端

切勿在客户端代码中暴露 SDK Secret。 请在服务端生成签名：

// server.js (Node.js example)
const KJUR = require('jsrsasign');

app.post('/api/signature', (req, res) => {
  const { meetingNumber, role } = req.body;
  const iat = Math.floor(Date.now() / 1000) - 30;
  const exp = iat + 60 * 60 * 2;
  
  const header = { alg: 'HS256', typ: 'JWT' };
  const payload = {
    sdkKey: process.env.ZOOM_SDK_KEY,
    mn: String(meetingNumber).replace(/\D/g, ''),
    role: parseInt(role, 10),
    iat, exp, tokenExp: exp
  };
  
  const signature = KJUR.jws.JWS.sign('HS256',
    JSON.stringify(header),
    JSON.stringify(payload),
    process.env.ZOOM_SDK_SECRET
  );
  
  res.json({ signature, sdkKey: process.env.ZOOM_SDK_KEY });
});
3. CSS 冲突 - 避免全局重置

全局的 * { margin: 0; } 会破坏 Zoom 的界面。请限定样式作用范围：

/* BAD */
* { margin: 0; padding: 0; }

/* GOOD */
.your-app, .your-app * { box-sizing: border-box; }
4. Client View 工具栏被裁切的修复

如果工具栏超出屏幕范围，请缩小 Zoom 界面：

#zmmtg-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  /* Critical for SPAs (React/Next/etc): ensure Zoom UI isn't behind your app shell/overlays. */
  z-index: 9999 !important;
  transform: scale(0.95) !important;
  transform-origin: top center !important;
}
5. 会议开始时隐藏应用

Client View 会接管整个页面。请隐藏你的界面：

// In ZoomMtg.init success callback:
document.documentElement.classList.add('meeting-active');
document.body.classList.add('meeting-active');

body.meeting-active .your-app { display: none !important; }
body.meeting-active { background: #000 !important; }

UI 选项（Web）

Meeting SDK 提供 带自定义选项的 Zoom 界面：

视图说明
Component View可提取、可自定义的界面，将会议嵌入一个 div 中
Client View全页面 Zoom 界面体验

注意：与需要从零构建界面的 Video SDK 不同，Meeting SDK 以 Zoom 的界面为基础，并在其上提供自定义能力。

核心概念

概念说明
SDK Key/Secret来自 Marketplace 的凭据
Signature使用 SDK Secret 签名的 JWT
Component View可提取、可自定义的界面（Web）
Client View全页面 Zoom 界面（Web）

详细参考

平台指南
功能

示例仓库

官方（由 Zoom 提供）
类型仓库Stars
Linux Headlessmeetingsdk-headless-linux-sample4
Linux Raw Datameetingsdk-linux-raw-recording-sample0
Webmeetingsdk-web-sample643
Web NPMmeetingsdk-web324
Reactmeetingsdk-react-sample177
Authmeetingsdk-auth-endpoint-sample124
Angularmeetingsdk-angular-sample60
Vue.jsmeetingsdk-vuejs-sample42

完整列表：请参阅 general/references/community-repos.md

资源

环境变量

评论

支持 Markdown