Zoom Meeting Sdk Web Client View

# 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

```bash npm install @zoom/meetingsdk --save ```

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

### CDN

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

```javascript // 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 | | `isSupportSi