/client-view

name: zoom-meeting-sdk-web-client-view
description: |
  Zoom Meeting SDK Web - Client View. Full-page Zoom meeting experience with the familiar Zoom interface.
  Uses ZoomMtg global singleton with callback-based API. Ideal for quick integration with minimal
  customization. Provides the same UI as Zoom Web Client.
user-invocable: false
triggers:
  - "meeting sdk client view"
  - "zoommtg"
  - "full page zoom ui"
  - "password"
  - "preparewebsdk"

Zoom Meeting SDK Web - Client View

Full-page Zoom meeting experience embedded in your web application. Client View provides the familiar Zoom interface with minimal customization needed.

Overview

Client View uses the `ZoomMtg` global singleton to render a full-page meeting experience identical to the Zoom Web Client.

| Aspect | Details | |--------|---------| | **API Object** | `ZoomMtg` (global singleton) | | **API Style** | Callback-based | | **UI** | Full-page takeover | | **Password param** | `passWord` (capital W) | | **Events** | `inMeetingServiceListener()` | | **Best For** | Quick integration, standard Zoom UI |

Installation

NPM

npm install @zoom/meetingsdk --save

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

CDN

<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>

Complete Initialization Flow

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

// Step 2: Set CDN path (optional - for China 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)
      };

      // IMPORTANT: only include optional fields when they have real values
      // Passing undefined for some 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)
  });
});

ZoomMtg.init() - All Options

Required

| Parameter | Type | Description | |-----------|------|-------------| | `leaveUrl` | `string` | URL to redirect after leaving meeting |

UI Customization

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `showMeetingHeader` | `boolean` | `true` | Show meeting number and topic | | `disableInvite` | `boolean` | `false` | Hide invite button | | `disableCallOut` | `boolean` | `false` | Hide call out option | | `disableRecord` | `boolean` | `false` | Hide record button | | `disableJoinAudio` | `boolean` | `false` | Hide join audio option | | `disablePreview` | `boolean` | `false` | Skip audio/video preview | | `audioPanelAlwaysOpen` | `boolean` | `false` | Keep audio panel open | | `showPureSharingContent` | `boolean` | `false` | Prevent overlays on shared content | | `videoHeader` | `boolean` | `true` | Show video tile header | | `isLockBottom` | `boolean` | `true` | Show/hide footer | | `videoDrag` | `boolean` | `true` | Enable drag video tiles | | `sharingMode` | `string` | `'both'` | `'both'` or `'fit'` | | `screenShare` | `boolean` | `true` | Enable browser URL sharing | | `hideShareAudioOption` | `boolean` | `false` | Hide "Share tab audio" checkbox | | `disablePictureInPicture` | `boolean` | `false` | Disable PiP mode | | `disableZoomLogo` | `boolean` | `false` | Remove Zoom logo (deprecated) | | `defaultView` | `string` | `'speaker'` | `'gallery'`, `'speaker'`, `'multiSpeaker'` |

Feature Toggles

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `isSupportAV` | `boolean` | `true` | Enable audio/video | | `isSupportChat` | `boolean` | `true` | Enable in-meeting chat | | `isSupportQA` | `boolean` | `true` | Enable webinar Q&A | | `isSupportCC` | `boolean` | `true` | Enable closed captions | | `isSupportPolling` | `boolean` | `true` | Enable polling | | `isSupportBreakout` | `boolean` | `true` | Enable breakout rooms | | `isSupportNonverbal` | `boolean` | `true` | Enable nonverbal feedback | | `isSupportSimulive` | `boolean` | `false` | Enable Simulive | | `disableVoIP` | `boolean` | `false` | Disable VoIP | | `disableReport` | `boolean` | `false` | Disable report feature |

Video Quality

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `enableHD` | `boolean` | `true` (≥2.8.0) | Enable 720p video | | `enableFullHD` | `boolean` | `false` | Enable 1080p for webinar attendees |

Advanced

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `debug` |