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 | | `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` | `boolean` | `false` | Enable debug logging | | `patchJsMedia` | `boolean` | `false` | Auto-apply media fixes | | `disableCORP` | `boolean` | `false` | Disable web isolation | | `helper` | `string` | `''` | Path to helper.html | | `externalLinkPage` | `string` | - | Page for external links | | `webEndpoint` | `string` | - | For ZFG environments | | `leaveOnPageUnload` | `boolean` | `false` | Auto cleanup on page close | | `isShowJoiningErrorDialog` | `boolean` | `true` | Show error dialog on join failure | | `meetingInfo` | `Array<string>` | `[...]` | Meeting info to display | | `inviteUrlFormat` | `string` | `''` | Custom invite URL format | | `loginWindow` | `object` | `{width: 400, height: 380}` | Login popup size | ### Callbacks | Parameter | Type | Description | |-----------|------|-------------| | `success` | `Function` | Called on successful init | | `error` | `Function` | Called on init failure | ## ZoomMtg.join() - All Options ### Required | Parameter | Type | Description | |-----------|------|-------------| | `signature` | `string` | SDK JWT from backend (v5.0+: must include appKey prefix) | | `meetingNumber` | `string \| number` | Meeting or webinar number | | `userName` | `string` | Display name | | `passWord` | `string` | Meeting password (capital W!) | ### Authentication | Parameter | Type | When Required | Description | |-----------|------|---------------|-------------| | `zak` | `string` | Starting as host | Host's Zoom Access Key | | `tk` | `string` | Registration required | Registrant token | | `userEmail` | `string` | Webinars | User email | | `obfToken` | `string` | March 2026+ | App Privilege Token | ### Optional | Parameter | Type | Description | |-----------|------|-------------| | `customerKey` | `string` | Custom ID (max 36 chars) | | `recordingToken` | `string` | Local recording permission | ### Callbacks | Parameter | Type | Description | |-----------|------|-------------| | `success` | `Function` | Called on successful join | | `error` | `Function` | Called on join failure | ## Event Listeners ### User Events ```javascript 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