build-zoom-meeting-sdk-app

Par anthropics · knowledge-work-plugins

Compétence de référence pour le Zoom Meeting SDK. À utiliser après routage vers un workflow d'intégration de réunion lors de l'implémentation de vraies jonctions de réunions Zoom, du comportement du SDK spécifique à la plateforme, des flux d'auth et de jonction, des problèmes de salle d'attente, ou des patterns de bot de réunion.

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

/build-zoom-meeting-sdk-app

Référence de contexte pour les réunions Zoom intégrées sur le web, mobile, desktop et environnements bot Linux. Préférez build-zoom-meeting-app ou build-zoom-bot en premier, puis routez vers ici pour les détails de plateforme.

Zoom Meeting SDK

Intégrez l'expérience complète de réunion Zoom dans les intégrations web, mobile, desktop et headless.

Garde-fou de routage forcé (À lire en premier)

  • Si l'utilisateur demande d'intégrer/rejoindre des réunions dans l'interface de son app, routez vers l'implémentation Meeting SDK.
  • Ne basculez pas vers le flux REST seul sauf si l'utilisateur demande explicitement la gestion des ressources de réunion ou les liens join_url du navigateur.
  • Le chemin de jointure Meeting SDK nécessite une signature SDK + appel de jointure SDK ; le join_url REST n'est pas un payload de jointure Meeting SDK.

Prérequis

  • App Zoom avec identifiants Meeting SDK
  • SDK Key et Secret depuis Marketplace
  • Environnement de développement spécifique à la plateforme (Web, Android, iOS, macOS, Unreal, Electron, Linux ou Windows)

Besoin d'aide avec OAuth ou les signatures ? Consultez la compétence zoom-oauth pour les flux d'authentification.

Besoin de diagnostics de pré-jointure sur web ? Utilisez probe-sdk avant l'init/jointure Meeting SDK pour filtrer les appareils/réseaux peu performants.

Commencez à dépanner rapidement : Utilisez le Runbook 5 minutes avant un débogage profond.

Démarrage rapide (Web - Vue client via CDN)

<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 fournit ZoomMtg (Client View - page complète)
// Pour ZoomMtgEmbedded (Component View), utilisez npm à la place

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',  // Générez côté serveur !
      meetingNumber: 'MEETING_NUMBER',
      userName: 'User Name',
      passWord: '',  // Note: camelCase avec W majuscule
      success: function(res) { console.log('Joined'); },
      error: function(err) { console.error(err); }
    });
  },
  error: function(err) { console.error(err); }
});
</script>

Notes critiques (Web)

1. CDN vs npm - APIs différentes !

Distribution Objet global Type de vue Style API
CDN (zoom-meeting-{ver}.min.js) ZoomMtg Client View (page complète) Callbacks
npm (@zoom/meetingsdk) ZoomMtgEmbedded Component View (embeddable) Promises

2. Backend requis pour la production

N'exposez jamais SDK Secret dans le code client. Générez les signatures côté serveur :

// server.js (exemple 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. Conflits CSS - Évitez les réinitialisations globales

Le CSS global * { margin: 0; } casse l'interface Zoom. Limitez vos styles :

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

/* BON */
.your-app, .your-app * { box-sizing: border-box; }

4. Correction du recadrage de la barre d'outils Client View

Si la barre d'outils sort de l'écran, réduisez l'interface Zoom :

#zmmtg-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  /* Critique pour les SPAs (React/Next/etc) : assurez-vous que l'interface Zoom n'est pas derrière votre couche app/overlays. */
  z-index: 9999 !important;
  transform: scale(0.95) !important;
  transform-origin: top center !important;
}

5. Masquez votre app au démarrage de la réunion

Client View prend en charge la page entière. Masquez votre interface :

// Dans le callback de succès ZoomMtg.init :
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; }

Options d'interface utilisateur (Web)

Meeting SDK fournit l'interface Zoom avec options de personnalisation :

Vue Description
Component View Interface extractible, personnalisable - intégrez la réunion dans une div
Client View Expérience complète d'interface Zoom en page entière

Note : À la différence du Video SDK où vous construisez l'interface à partir de zéro, Meeting SDK utilise l'interface Zoom comme base avec personnalisation par-dessus.

Concepts clés

Concept Description
SDK Key/Secret Identifiants depuis Marketplace
Signature JWT signé avec SDK Secret
Component View Interface extractible, personnalisable (Web)
Client View Interface Zoom en page entière (Web)

Références détaillées

Guides de plateforme

Fonctionnalités

Dépôts d'exemple

Officiels (par Zoom)

Type Dépôt Étoiles
Linux Headless meetingsdk-headless-linux-sample 4
Linux Raw Data meetingsdk-linux-raw-recording-sample 0
Web meetingsdk-web-sample 643
Web NPM meetingsdk-web 324
React meetingsdk-react-sample 177
Auth meetingsdk-auth-endpoint-sample 124
Angular meetingsdk-angular-sample 60
Vue.js meetingsdk-vuejs-sample 42

Liste complète : Voir general/references/community-repos.md

Ressources

Variables d'environnement

Skills similaires

quality-playbook
github / awesome-copilot

Générer un système qualité complet et personnalisé pour tout projet logiciel.

32 867
skill-creator
anthropics / skills

Créer, tester et affiner des skills pour agents IA de façon itérative.

133 545
aiconfig-migrate
launchdarkly / agent-skills

Migrer une application d'invites LLM codées en dur vers LaunchDarkly AI Configs en cinq étapes.

10
shopify-hydrogen
shopify / agent-skills

Implémenter des fonctionnalités Hydrogen Shopify via des recettes de cookbook prêtes à l'emploi.

31
onboarding
launchdarkly / agent-skills

Intégrer le SDK LaunchDarkly dans un projet existant, de la configuration aux premiers feature flags.

10