Client View

Zoom Meeting SDK Web — Client View

Client View renders a full-page Zoom meeting experience identical to the Zoom Web Client. It uses the ZoomMtg global singleton with a callback-based API — minimal customization, familiar Zoom UI, fast integration.

When to Use

• You need to embed a complete Zoom meeting in a web app with the standard Zoom interface.
• You want minimal customization — Client View gives you Zoom's own UI, not a custom layout.
• You are integrating via NPM or CDN and need the callback-based ZoomMtg API.
• You are debugging blank screen, black overlay, join payload, or SPA z-index issues.
• You need to wire up event listeners (user join/leave, chat, recording, breakout rooms, etc.).

Do NOT use Client View if you need pixel-level control over the meeting UI layout — use Component View instead (see Related Skills).

Prerequisites

1. Zoom Meeting SDK credentials — SDK Key and SDK Secret (or Server-to-Server OAuth app credentials) from the Zoom App Marketplace.
2. Backend endpoint to generate the SDK JWT signature. Never expose SDK secrets in the browser. Example placeholder: YOUR_SDK_SECRET.
3. HTTPS — required for media (WebRTC) and SharedArrayBuffer (gallery view).
4. Supported browser — call ZoomMtg.checkSystemRequirements() to verify.
5. Node.js 18+ if using the NPM package.
6. Windows host (PowerShell) is the primary development environment. All path examples use Windows-style paths (e.g. ~\agent-skills\library\client-view\).

Reference Files

Load these reference files at the indicated points:

Procedure

Step 1 — Install the SDK

NPM (recommended for bundlers):

npm install @zoom/meetingsdk --save

import { ZoomMtg } from '@zoom/meetingsdk';

CDN (script tags — replace {VERSION} with your target SDK version):

<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-{VERSION}.min.js"></script>

Step 2 — Complete Initialization Flow

This is the canonical 7-step flow. Follow it in order — skipping steps causes black screens and join failures.

// Step 1: Check browser compatibility
console.log('Requirements:', ZoomMtg.checkSystemRequirements());

// Step 2: Set CDN path (optional — for China region or custom hosting)
// ZoomMtg.setZoomJSLib('https://source.zoom.us/{VERSION}/lib', '/av');

// Step 3: Preload WebAssembly modules
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

// Step 4: Load language resources
ZoomMtg.i18n.load('en-US');
ZoomMtg.i18n.onLoad(() => {

  // Step 5: Initialize SDK
  ZoomMtg.init({
    leaveUrl: '/meeting-ended',
    patchJsMedia: true,
    disableCORP: !window.crossOriginIsolated,
    success: () => {
      console.log('SDK initialized');

      // Step 6: Join meeting
      const joinPayload = {
        signature: signature,
        meetingNumber: meetingNumber,
        userName: userName,
        passWord: passWord,
        success: (res) => {
          console.log('Joined meeting');

          // Step 7: Post-join operations
          ZoomMtg.getAttendeeslist({});
          ZoomMtg.getCurrentUser({
            success: (res) => console.log('Current user:', res.result.currentUser)
          });
        },
        error: (err) => console.error('Join failed:', err)
      };

      // CRITICAL: only include optional fields when they have real values.
      // Passing undefined for optional fields can cause runtime join errors.
      if (userEmail) joinPayload.userEmail = userEmail;
      if (tk) joinPayload.tk = tk;
      if (zak) joinPayload.zak = zak;

      ZoomMtg.join(joinPayload);
    },
    error: (err) => console.error('Init failed:', err)
  });
});

Step 3 — Configure ZoomMtg.init() Options

Required

UI Customization

Feature Toggles

Video Quality

Advanced

Callbacks

Step 4 — Configure ZoomMtg.join() Options

Required

Authentication (conditional)

Optional

Callbacks

Step 5 — Wire Event Listeners

Register listeners after ZoomMtg.init() success, before or inside join() success.

User Events

ZoomMtg.inMeetingServiceListener('onUserJoin', (data) => {
  console.log('User joined:', data);
  // { userId, userName, ... }
});

ZoomMtg.inMeetingServiceListener('onUserLeave', (data) => {
  console.log('User left:', data);
  // Reason codes:
  // 0: OTHER
  // 1: HOST_ENDED_MEETING
  // 2: SELF_LEAVE_FROM_IN_MEETING
  // 3: SELF_LEAVE_FROM_WAITING_ROOM
  // 4: SELF_LEAVE_FROM_WAITING_FOR_HOST_START
  // 5: MEETING_TRANSFER
  // 6: KICK_OUT_FROM_MEETING
  // 7: KICK_OUT_FROM_WAITING_ROOM
  // 8: LEAVE_FROM_DISCLAIMER
});

ZoomMtg.inMeetingServiceListener('onUserUpdate', (data) => {
  console.log('User updated:', data);
});

ZoomMtg.inMeetingServiceListener('onUserIsInWaitingRoom', (data) => {
  console.log('User in waiting room:', data);
});

Meeting Status

ZoomMtg.inMeetingServiceListener('onMeetingStatus', (data) => {
  // status: 1=connecting, 2=connected, 3=disconnected, 4=reconnecting
  console.log('Status:', data.status);
});

Audio/Video Events

ZoomMtg.inMeetingServiceListener('onActiveSpeaker', (data) => {
  // [{userId, userName}]
  console.log('Active speaker:', data);
});

ZoomMtg.inMeetingServiceListener('onNetworkQualityChange', (data) => {
  // {level: 0-5, userId, type: 'uplink'}
  // 0-1=bad, 2=normal, 3-5=good
  console.log('Network quality:', data);
});

ZoomMtg.inMeetingServiceListener('onAudioQos', (data) => {
  console.log('Audio QoS:', data);
});

ZoomMtg.inMeetingServiceListener('onVideoQos', (data) => {
  console.log('Video QoS:', data);
});

Chat & Communication

ZoomMtg.inMeetingServiceListener('onReceiveChatMsg', (data) => {
  console.log('Chat message:', data);
});

ZoomMtg.inMeetingServiceListener('onReceiveTranscriptionMsg', (data) => {
  console.log('Transcription:', data);
});

ZoomMtg.inMeetingServiceListener('onReceiveTranslateMsg', (data) => {
  console.log('Translation:', data);
});

Recording & Sharing

ZoomMtg.inMeetingServiceListener('onRecordingChange', (data) => {
  console.log('Recording status:', data);
});

ZoomMtg.inMeetingServiceListener('onShareContentChange', (data) => {
  console.log('Share content:', data);
});

ZoomMtg.inMeetingServiceListener('receiveSharingChannelReady', (data) => {
  console.log('Sharing channel ready:', data);
});

Breakout Rooms

ZoomMtg.inMeetingServiceListener('onRoomStatusChange', (data) => {
  // status: 2=InProgress, 3=Closing, 4=Closed
  console.log('Breakout room status:', data);
});

Other Events

ZoomMtg.inMeetingServiceListener('onJoinSpeed', (data) => {
  console.log('Join metrics:', data);
});

ZoomMtg.inMeetingServiceListener('onVbStatusChange', (data) => {
  console.log('Virtual background status:', data);
});

ZoomMtg.inMeetingServiceListener('onFocusModeStatusChange', (data) => {
  console.log('Focus mode:', data);
});

ZoomMtg.inMeetingServiceListener('onPictureInPicture', (data) => {
  console.log('PiP status:', data);
});

ZoomMtg.inMeetingServiceListener('onClaimStatus', (data) => {
  console.log('Host claim status:', data);
});

Step 6 — Use Common Methods (as needed)

Meeting Info

ZoomMtg.getCurrentUser({
  success: (res) => console.log(res.result.currentUser)
});

ZoomMtg.getAttendeeslist({});

ZoomMtg.getCurrentMeetingInfo({
  success: (res) => console.log(res)
});

ZoomMtg.getWebSDKVersion({
  success: (version) => console.log(version)
});

Audio/Video Control

ZoomMtg.mute({ userId, mute: true });
ZoomMtg.muteAll({ muteAll: true });
ZoomMtg.stopIncomingAudio({ stop: true });
ZoomMtg.mirrorVideo({ mirror: true });

Chat

ZoomMtg.sendChat({
  message: 'Hello!',
  userId: 0  // 0 = everyone
});

Meeting Control

ZoomMtg.leaveMeeting({});
ZoomMtg.endMeeting({});        // host only
ZoomMtg.lockMeeting({ lock: true });

Host Controls

ZoomMtg.makeHost({ userId });
ZoomMtg.makeCoHost({ userId });
ZoomMtg.withdrawCoHost({ userId });
ZoomMtg.expel({ userId });
ZoomMtg.putOnHold({ userId, bHold: true });
ZoomMtg.claimHostWithHostKey({ hostKey: '123456' });
ZoomMtg.reclaimHost({});
ZoomMtg.admitAll({});

Raise Hand

ZoomMtg.raiseHand({ userId });
ZoomMtg.lowerHand({ oderId });
ZoomMtg.lowerAllHands({});

Spotlight & Pin

ZoomMtg.operateSpotlight({ oderId, action: 'add' });    // or 'remove'
ZoomMtg.operatePin({ oderId, action: 'add' });           // or 'remove'
ZoomMtg.allowMultiPin({ allow: true });

Screen Share

ZoomMtg.startScreenShare({});
ZoomMtg.shareSource({ source });  // Electron only

Recording

ZoomMtg.record({ record: true });   // or false
ZoomMtg.showRecordFunction({ show: true });

Breakout Rooms

ZoomMtg.createBreakoutRoom({
  rooms: [{ name: 'Room 1' }, { name: 'Room 2' }]
});
ZoomMtg.openBreakoutRooms({});
ZoomMtg.closeBreakoutRooms({});
ZoomMtg.joinBreakoutRoom({ roomId });
ZoomMtg.leaveBreakoutRoom({});
ZoomMtg.moveUserToBreakoutRoom({ oderId, roomId });
ZoomMtg.getBreakoutRoomStatus({
  success: (res) => console.log(res)
});

Virtual Background

ZoomMtg.isSupportVirtualBackground({
  success: (data) => console.log(data.result.isSupport)
});
ZoomMtg.setVirtualBackground({ imageUrl: '...' });
ZoomMtg.getVirtualBackgroundStatus({
  success: (data) => console.log(data)
});
ZoomMtg.lockVirtualBackground({ lock: true });

UI Control

ZoomMtg.showMeetingHeader({ show: true });
ZoomMtg.showInviteFunction({ show: true });
ZoomMtg.showJoinAudioFunction({ show: true });
ZoomMtg.showCalloutFunction({ show: true });
ZoomMtg.reRender({ lang: 'de-DE' });

Language

ZoomMtg.i18n.load('de-DE');
ZoomMtg.i18n.reload('de-DE');
ZoomMtg.i18n.getCurrentLang();
ZoomMtg.i18n.getAll();

Pitfalls

HARD RULES (do not violate)

1. passWord — capital W. The join parameter is passWord, not password. Using the wrong casing silently fails the join.

2. Never pass undefined for optional join fields. If userEmail, tk, zak, or other optional fields are undefined, the SDK can throw Cannot read properties of undefined (reading 'toString') and the screen turns black. Only attach keys when they are non-empty strings.

3. Never expose SDK credentials in the browser. The signature (SDK JWT) must be generated on a backend. Use placeholder YOUR_SDK_SECRET in all example code — never commit real secrets.

4. Do NOT manually create or remove #zmmtg-root or #aria-notify-area. The SDK creates these DOM elements automatically. Manual manipulation breaks rendering.

5. Rate limits are enforced — do not exceed:

   Method	Limit
   join()	10 seconds between calls
   callOut()	10 seconds between calls
   mute()	1 second between calls
   muteAll()	5 seconds between calls

6. defaultView: 'gallery' requires SharedArrayBuffer. Without COOP/COEP headers and crossOriginIsolated === true, gallery view fails silently. Use defaultView: 'speaker' unless you have fully configured SharedArrayBuffer. Load ../concepts/sharedarraybuffer.md before attempting gallery or multi-speaker view.

7. disableCORP must reflect crossOriginIsolated status. Always set disableCORP: !window.crossOriginIsolated — hardcoding false without cross-origin isolation breaks media.

SPA (React/Next) Overlay Gotcha

If you call join() but see a blank or black area instead of the meeting UI, the Zoom UI is likely rendering behind your app shell. Ensure #zmmtg-root occupies the viewport and sits above all other fixed elements:

#zmmtg-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

Join Payload Sanitization Gotcha

If ZoomMtg.join() appears to succeed but the screen turns black and the console shows Cannot read properties of undefined (reading 'toString'), you are passing undefined for an optional field. Build the payload object with only required fields first, then conditionally add optional fields:

const joinPayload = {
  signature,
  meetingNumber,
  userName,
  passWord,
  success: (res) => { /* ... */ },
  error: (err) => { /* ... */ }
};

if (userEmail) joinPayload.userEmail = userEmail;
if (tk) joinPayload.tk = tk;
if (zak) joinPayload.zak = zak;

ZoomMtg.join(joinPayload);

CDN Version Mismatch

All CDN script tags must use the same {VERSION}. Mixing versions of React, Redux, or the Zoom SDK causes silent failures. Verify version consistency across all <script> tags.

i18n.load Must Complete Before init

ZoomMtg.init() must be called inside the i18n.onLoad() callback. Calling init() before language resources finish loading causes rendering issues.

Verification

1. Check System Requirements

console.log('Requirements:', ZoomMtg.checkSystemRequirements());

Confirm the output lists your browser as supported.

2. Verify SDK Initialization

After ZoomMtg.init() success callback fires, check the console for SDK initialized. If the error callback fires, load ../troubleshooting/error-codes.md and match the error code.

3. Verify Join Success

After ZoomMtg.join() success callback fires, check the console for Joined meeting. Then verify post-join calls return data:

ZoomMtg.getCurrentUser({
  success: (res) => {
    console.log('Current user:', res.result.currentUser);
    // Should print a user object with userId, userName, etc.
  }
});

ZoomMtg.getAttendeeslist({});
// Should return the attendees list object

4. Verify DOM Elements Exist

Open browser DevTools → Elements and confirm these elements exist (created by the SDK):

• #zmmtg-root — main meeting container
• #aria-notify-area — accessibility announcements

5. Verify Event Listeners Fire

ZoomMtg.inMeetingServiceListener('onMeetingStatus', (data) => {
  console.log('Status:', data.status);
  // Expect: 1 (connecting) → 2 (connected)
});

6. Verify SDK Version

ZoomMtg.getWebSDKVersion({
  success: (version) => console.log('SDK version:', version)
});

Confirm the version matches your installed NPM package or CDN script version.

7. Run the Preflight Checklist

Load RUNBOOK.md and follow the 5-minute preflight checklist before deploying to production.

Related Skills

• Main Web SDK Skill — ../SKILL.md — overview of all Web SDK views and shared concepts.
• Component View — ../component-view/SKILL.md — for custom UI layouts with embedded Zoom video tiles instead of full-page takeover.
• Reference Index — references/index.md — complete list of reference docs.
• Error Codes — ../troubleshooting/error-codes.md — SDK error code lookup.
• Common Issues — ../troubleshooting/common-issues.md — black screen, audio, CORS fixes.
• SharedArrayBuffer Setup — ../concepts/sharedarraybuffer.md — COOP/COEP configuration for gallery view.
• Official API Reference — marketplacefront.zoom.us/sdk/meeting/web/index.html