Back to Details

build-zoom-meeting-sdk-app

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/build-zoom-meeting-sdk-app

/build-zoom-meeting-sdk-app

Background reference for embedded Zoom meetings across web, mobile, desktop, and Linux bot environments. Prefer 
build-zoom-meeting-app
or 
build-zoom-bot
first, then route here for platform detail.
适用于Web、移动设备、桌面端和Linux机器人环境中嵌入式Zoom会议的背景参考资料。优先使用
build-zoom-meeting-app
或
build-zoom-bot
，之后再跳转至此处查看平台细节。

Zoom Meeting SDK

Zoom Meeting SDK

Embed the full Zoom meeting experience into web, mobile, desktop, and headless integrations.
将完整的Zoom会议体验嵌入到Web、移动、桌面和无头集成中。

Hard Routing Guardrail (Read First)

硬性路由准则（必读）

  • If the user asks to embed/join meetings inside their app UI, route to Meeting SDK implementation.
  • Do not switch to REST-only meeting link flow unless the user explicitly asks for meeting resource management or browser 
    join_url
    links.
  • Meeting SDK join path requires SDK signature + SDK join call; REST 
    join_url
    is not a Meeting SDK join payload.
  • 如果用户询问如何在其应用UI中嵌入/加入会议，请路由至Meeting SDK实现环节。
  • 除非用户明确要求会议资源管理或浏览器
    join_url
    链接，否则不要切换到仅使用REST的会议链接流程。
  • Meeting SDK入会路径需要SDK签名 + SDK入会调用；REST 
    join_url
    并非Meeting SDK的入会负载。

Prerequisites

前置条件

  • Zoom app with Meeting SDK credentials
  • SDK Key and Secret from Marketplace
  • Platform-specific development environment (Web, Android, iOS, macOS, Unreal, Electron, Linux, or Windows)
Need help with OAuth or signatures? See the zoom-oauth skill for authentication flows.
Need pre-join diagnostics on web? Use probe-sdk before Meeting SDK init/join to gate low-readiness devices/networks.
Start troubleshooting fast: Use the 5-Minute Runbook before deep debugging.
  • 具备Meeting SDK凭证的Zoom应用
  • 来自Marketplace的SDK Key和Secret
  • 特定平台的开发环境（Web、Android、iOS、macOS、Unreal、Electron、Linux或Windows）
需要OAuth或签名相关帮助？ 请查看**zoom-oauth**技能了解认证流程。
需要Web端入会前诊断？ 在初始化/加入Meeting SDK之前，使用**probe-sdk**排查设备/网络准备不足的问题。
快速开始故障排查： 在深度调试前，请先使用**5分钟运行手册**。

Quick Start (Web - Client View via CDN)

快速开始（Web - 通过CDN的客户端视图）

html
<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>
html
<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提供ZoomMtg（客户端视图 - 全屏）
// 如需ZoomMtgEmbedded（组件视图），请使用npm

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',  // 服务端生成！
      meetingNumber: 'MEETING_NUMBER',
      userName: 'User Name',
      passWord: '',  // 注意：驼峰命名，首字母W大写
      success: function(res) { console.log('Joined'); },
      error: function(err) { console.error(err); }
    });
  },
  error: function(err) { console.error(err); }
});
</script>

Critical Notes (Web)

关键注意事项（Web端）

1. CDN vs npm - Different APIs!

1. CDN与npm - API不同！

DistributionGlobal ObjectView TypeAPI Style
CDN (
zoom-meeting-{ver}.min.js
)
ZoomMtg
Client View (full-page)Callbacks
npm (
@zoom/meetingsdk
)
ZoomMtgEmbedded
Component View (embeddable)Promises
分发方式全局对象视图类型API风格
CDN (
zoom-meeting-{ver}.min.js
)
ZoomMtg
客户端视图（全屏）回调函数
npm (
@zoom/meetingsdk
)
ZoomMtgEmbedded
组件视图（可嵌入）Promise

2. Backend Required for Production

2. 生产环境需要后端支持

Never expose SDK Secret in client code. Generate signatures server-side:
javascript
// 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 });
});
切勿在客户端代码中暴露SDK Secret。请在服务端生成签名：
javascript
// server.js（Node.js示例）
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 Conflicts - Avoid Global Resets

3. CSS冲突 - 避免全局重置

Global 
* { margin: 0; }
breaks Zoom's UI. Scope your styles:
css
/* BAD */
* { margin: 0; padding: 0; }

/* GOOD */
.your-app, .your-app * { box-sizing: border-box; }
全局
* { margin: 0; }
会破坏Zoom的UI。请限定样式作用域：
css
/* 错误写法 */
* { margin: 0; padding: 0; }

/* 正确写法 */
.your-app, .your-app * { box-sizing: border-box; }

4. Client View Toolbar Cropping Fix

4. 客户端视图工具栏裁剪修复

If toolbar falls off screen, scale down the Zoom UI:
css
#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;
}
如果工具栏超出屏幕范围，请缩小Zoom UI：
css
#zmmtg-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  /* 对SPA（React/Next等）至关重要：确保Zoom UI不会被应用外壳/遮罩层遮挡。 */
  z-index: 9999 !important;
  transform: scale(0.95) !important;
  transform-origin: top center !important;
}

5. Hide Your App When Meeting Starts

5. 会议开始时隐藏你的应用

Client View takes over full page. Hide your UI:
javascript
// In ZoomMtg.init success callback:
document.documentElement.classList.add('meeting-active');
document.body.classList.add('meeting-active');
css
body.meeting-active .your-app { display: none !important; }
body.meeting-active { background: #000 !important; }
客户端视图会占据整个页面。请隐藏你的UI：
javascript
// 在ZoomMtg.init的成功回调中：
document.documentElement.classList.add('meeting-active');
document.body.classList.add('meeting-active');
css
body.meeting-active .your-app { display: none !important; }
body.meeting-active { background: #000 !important; }

UI Options (Web)

UI选项（Web端）

Meeting SDK provides Zoom's UI with customization options:
ViewDescription
Component ViewExtractable, customizable UI - embed meeting in a div
Client ViewFull-page Zoom UI experience
Note: Unlike Video SDK where you build the UI from scratch, Meeting SDK uses Zoom's UI as the base with customization on top.
Meeting SDK提供带自定义选项的Zoom原生UI：
视图描述
组件视图可提取、可自定义的UI - 将会议嵌入到div中
客户端视图全屏Zoom UI体验
注意：与Video SDK需要从零构建UI不同，Meeting SDK以Zoom原生UI为基础，支持在其之上进行自定义。

Key Concepts

核心概念

ConceptDescription
SDK Key/SecretCredentials from Marketplace
SignatureJWT signed with SDK Secret
Component ViewExtractable, customizable UI (Web)
Client ViewFull-page Zoom UI (Web)
概念描述
SDK Key/Secret来自Marketplace的凭证
Signature使用SDK Secret签名的JWT
组件视图可提取、可自定义的UI（Web端）
客户端视图全屏Zoom UI（Web端）

Detailed References

详细参考资料

Platform Guides

平台指南

  • android/SKILL.md - Android SDK (default/custom UI, join/start/auth lifecycle, mobile integration)
  • android/references/android-reference-map.md - Android API surface map and drift watchpoints
  • ios/SKILL.md - iOS SDK (default/custom UI, join/start/auth lifecycle, mobile integration)
  • ios/references/ios-reference-map.md - iOS API surface map and drift watchpoints
  • macos/SKILL.md - macOS SDK (desktop default/custom UI, service controllers, host flows)
  • macos/references/macos-reference-map.md - macOS API surface map and drift watchpoints
  • unreal/SKILL.md - Unreal Engine wrapper (C++/Blueprint wrapper behavior and SDK mapping)
  • unreal/references/unreal-reference-map.md - Unreal wrapper reference map and version-lag notes
  • references/android.md - Android pointer doc for fast routing from broad Meeting SDK queries
  • references/ios.md - iOS pointer doc for fast routing from broad Meeting SDK queries
  • references/macos.md - macOS pointer doc for fast routing from broad Meeting SDK queries
  • references/unreal.md - Unreal pointer doc for fast routing from broad Meeting SDK queries
  • linux/SKILL.md - Linux SDK headless bot skill entrypoint
  • linux/linux.md - Linux SDK (C++ headless bots, raw media access)
  • linux/references/linux-reference.md - Linux dependencies, Docker, troubleshooting
  • react-native/SKILL.md - React Native SDK (iOS/Android wrapper, join/start flows, bridge setup)
  • react-native/SKILL.md - React Native complete navigation
  • electron/SKILL.md - Electron SDK (desktop wrapper, auth/join flows, module controllers, raw data)
  • electron/SKILL.md - Electron complete navigation
  • windows/SKILL.md - Windows SDK (C++ desktop applications, raw media access)
  • windows/references/windows-reference.md - Windows dependencies, Visual Studio setup, troubleshooting
  • web/references/web.md - Web SDK (Component + Client View)
  • web/references/web-tracking-id.md - Tracking ID configuration
  • android/SKILL.md - Android SDK（默认/自定义UI、入会/启动/认证生命周期、移动集成）
  • android/references/android-reference-map.md - Android API表面映射与漂移观测点
  • ios/SKILL.md - iOS SDK（默认/自定义UI、入会/启动/认证生命周期、移动集成）
  • ios/references/ios-reference-map.md - iOS API表面映射与漂移观测点
  • macos/SKILL.md - macOS SDK（桌面端默认/自定义UI、服务控制器、主持人流程）
  • macos/references/macos-reference-map.md - macOS API表面映射与漂移观测点
  • unreal/SKILL.md - Unreal Engine包装器（C++/蓝图包装器行为与SDK映射）
  • unreal/references/unreal-reference-map.md - Unreal包装器参考映射与版本延迟说明
  • references/android.md - Android指针文档，用于从宽泛的Meeting SDK查询快速路由
  • references/ios.md - iOS指针文档，用于从宽泛的Meeting SDK查询快速路由
  • references/macos.md - macOS指针文档，用于从宽泛的Meeting SDK查询快速路由
  • references/unreal.md - Unreal指针文档，用于从宽泛的Meeting SDK查询快速路由
  • linux/SKILL.md - Linux SDK无头机器人技能入口
  • linux/linux.md - Linux SDK（C++无头机器人、原始媒体访问）
  • linux/references/linux-reference.md - Linux依赖项、Docker、故障排查
  • react-native/SKILL.md - React Native SDK（iOS/Android包装器、入会/启动流程、桥接设置）
  • react-native/SKILL.md - React Native完整导航
  • electron/SKILL.md - Electron SDK（桌面端包装器、认证/入会流程、模块控制器、原始数据）
  • electron/SKILL.md - Electron完整导航
  • windows/SKILL.md - Windows SDK（C++桌面应用、原始媒体访问）
  • windows/references/windows-reference.md - Windows依赖项、Visual Studio设置、故障排查
  • web/references/web.md - Web SDK（组件视图 + 客户端视图）
  • web/references/web-tracking-id.md - 跟踪ID配置

Features

功能特性

  • references/authorization.md - SDK JWT generation
  • references/bot-authentication.md - ZAK vs OBF vs JWT tokens for bots
  • references/breakout-rooms.md - Programmatic breakout room management
  • references/ai-companion.md - AI Companion controls in meetings
  • references/webinars.md - Webinar SDK features
  • references/forum-top-questions.md - Common forum question patterns (what to cover)
  • references/triage-intake.md - What to ask first (turn vague reports into answers)
  • references/signature-playbook.md - Signature/root-cause playbook
  • references/multiple-meetings.md - Joining multiple meetings / multiple instances
  • references/troubleshooting.md - Common issues and solutions
  • references/authorization.md - SDK JWT生成
  • references/bot-authentication.md - 机器人用ZAK、OBF与JWT令牌对比
  • references/breakout-rooms.md - 程序化分组讨论室管理
  • references/ai-companion.md - 会议中的AI Companion控制
  • references/webinars.md - Webinar SDK功能
  • references/forum-top-questions.md - 论坛常见问题模式（需覆盖内容）
  • references/triage-intake.md - 首先要询问的问题（将模糊报告转化为答案）
  • references/signature-playbook.md - 签名/根本原因指南
  • references/multiple-meetings.md - 加入多个会议 / 多实例
  • references/troubleshooting.md - 常见问题与解决方案

Sample Repositories

示例代码库

Official (by Zoom)

官方（Zoom提供）

TypeRepositoryStars
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
Full list: See general/references/community-repos.md
类型代码库星标数
Linux无头版meetingsdk-headless-linux-sample4
Linux原始数据meetingsdk-linux-raw-recording-sample0
Webmeetingsdk-web-sample643
Web NPMmeetingsdk-web324
Reactmeetingsdk-react-sample177
认证meetingsdk-auth-endpoint-sample124
Angularmeetingsdk-angular-sample60
Vue.jsmeetingsdk-vuejs-sample42
完整列表：请查看general/references/community-repos.md

Resources

资源

Environment Variables

环境变量

  • See references/environment-variables.md for standardized 
    .env
    keys and where to find each value.
  • 标准化
    .env
    键值及各值的获取位置，请查看references/environment-variables.md。