Zoom Meeting Sdk Web Component View

# Zoom Meeting SDK Web - Component View

Embeddable Zoom meeting components for flexible integration into any web application. Component View provides Promise-based APIs and customizable UI.

This is the correct web skill for a **custom UI around a real Zoom meeting**. Do not route to Video SDK unless the user is building a non-meeting custom session product.

## Overview

Component View uses `ZoomMtgEmbedded.createClient()` to create embeddable meeting components within a specific container element.

| Aspect | Details | |--------|---------| | **API Object** | `ZoomMtgEmbedded.createClient()` (instance) | | **API Style** | Promise-based (async/await) | | **UI** | Embeddable in any container | | **Password param** | `password` (lowercase) | | **Events** | `on()`/`off()` | | **Best For** | Custom layouts, React/Vue/Angular apps |

## Installation

### NPM

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

```javascript import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded'; ```

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

## Complete Initialization Flow

```javascript import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';

// Step 1: Create client instance (do once, not on every render!) const client = ZoomMtgEmbedded.createClient();

async function joinMeeting() { try { // Step 2: Get container element const meetingSDKElement = document.getElementById('meetingSDKElement');

// Step 3: Initialize client await client.init({ zoomAppRoot: meetingSDKElement, language: 'en-US', debug: true, patchJsMedia: true, leaveOnPageUnload: true, });

// Step 4: Join meeting await client.join({ signature: signature, sdkKey: sdkKey, meetingNumber: meetingNumber, userName: userName, password: password, // lowercase! userEmail: userEmail, });

console.log('Joined successfully!'); } catch (error) { console.error('Failed to join:', error); } } ```

## client.init() - All Options

### Required

| Parameter | Type | Description | |-----------|------|-------------| | `zoomAppRoot` | `HTMLElement` | Container element for meeting UI |

### Display

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `language` | `string` | `'en-US'` | UI language | | `debug` | `boolean` | `false` | Enable debug logging |

### Media

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `patchJsMedia` | `boolean` | `false` | Auto-apply media fixes | | `leaveOnPageUnload` | `boolean` | `false` | Cleanup on page unload | | `enableHD` | `boolean` | `true` | Enable 720p video | | `enableFullHD` | `boolean` | `false` | Enable 1080p video |

### Customization

| Parameter | Type | Description | |-----------|------|-------------| | `customize` | `object` | UI customization options | | `webEndpoint` | `string` | For ZFG: `'www.zoomgov.com'` | | `assetPath` | `string` | Custom path for AV libraries |

### Customize Object

```javascript await client.init({ zoomAppRoot: element, customize: { // Meeting info displayed meetingInfo: [ 'topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype' ], // Video customization video: { isResizable: true, viewSizes: { default: { width: 1000, height: 600 }, ribbon: { width: 300, height: 700 } }, popper: { disableDraggable: false } }, // Custom toolbar buttons toolbar: { buttons: [ { text: 'Custom Button', className: 'custom-btn', onClick: () => { console.log('Custom button clicked'); } } ] }, // Active speaker indicator activeSpaker: { strokeColor: '#00FF00' } } }); ```

## client.join() - All Options

### Required

| Parameter | Type | Description | |-----------|------|-------------| | `signature` | `string` | SDK JWT from backend | | `sdkKey` | `string` | SDK Key / Client ID | | `meetingNumber` | `string \| number` | Meeting number | | `userName` | `string` | Display name |

### Authentication

| Parameter | Type | When Required | Description | |-----------|------|---------------|-------------| | `password` | `string` | If set | Meeting password (lowercase!) | | `zak` | `string` | Starting as host | Host's ZAK token | | `tk` |