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

npm install @zoom/meetingsdk --save

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

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

Complete Initialization Flow

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

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 | string | Registration | Registrant token | | userEmail | string | Webinars | User email |

Event Listeners

Syntax

// Subscribe
client.on('event-name', callback);

// Unsubscribe
client.off('event-name', callback);

Connection Events

client.on('connection-change', (payload) => {
  // payload.state: 'Connecting', 'Connected', 'Reconnecting', 'Closed'
  console.log('Connection state:', payload.state);
  
  if (payload.state === 'Closed') {
    console.log('Reason:', payload.reason);
  }
});

User Events

client.on('user-added', (payload) => {
  // Array of users who joined
  console.log('Users added:', payload);
  payload.forEach(user => {
    console.log('User ID:', user.oderId);
    console.log('Name:', user.displayName);
  });
});

client.on('user-removed', (payload) => {
  // Array of users who left
  console.log('Users removed:', payload);
});

client.on('user-updated', (payload) => {
  // Array of users whose properties changed
  console.log('Users updated:', payload);
});

Audio Events

client.on('active-speaker', (payload) => {
  // Current active speaker
  console.log('Active speaker:', payload);
});

client.on('audio-statistic-data-change', (payload) => {
  console.log('Audio stats:', payload);
});

Video Events

client.on('video-active-change', (payload) => {
  // Video state changed
  console.log('Video active:', payload);
});

client.on('video-statistic-data-change', (payload) => {
  console.log('Video stats:', payload);
});

Share Events

client.on('active-share-change', (payload) => {
  console.log('Share status:', payload);
});

client.on('share-statistic-data-change', (payload) => {
  console.log('Share stats:', payload);
});

Chat Events

client.on('chat-on-message', (payload) => {
  console.log('Chat message:', payload);
});

Recording Events

client.on('recording-change', (payload) => {
  console.log('Recording status:', payload);
});

Media Device Events

client.on('media-sdk-change', (payload) => {
  console.log('Media SDK:', payload);
});

client.on('device-change', () => {
  console.log('Device changed');
});

Common Methods

User Information

// Get current user
const currentUser = client.getCurrentUser();
console.log('Current user:', currentUser);

// Get all participants
const participants = client.getParticipantsList();
console.log('Participants:', participants);

// Check if user is host
const isHost = client.isHost();

Audio Control

// Mute/unmute self
await client.mute(true);  // mute
await client.mute(false); // unmute

// Mute/unmute specific user (host only)
await client.muteAudio(userId, true);

// Mute all (host only)
await client.muteAllAudio(true);

Video Control

// Start/stop video
await client.startVideo();
await client.stopVideo();

// Mute/unmute user's video (host only)
await client.muteVideo(userId, true);

Meeting Control

// Leave meeting
client.leaveMeeting();

// End meeting (host only)
client.endMeeting();

Screen Share

// Start screen share
await client.startShareScreen();

// Stop screen share
await client.stopShareScreen();

Recording

// Start recording (cloud)
await client.startCloudRecording();

// Stop recording
await client.stopCloudRecording();

Virtual Background

// Check support
const isSupported = await client.isSupportVirtualBackground();

// Set virtual background
await client.setVirtualBackground(imageUrl);

// Remove virtual background
await client.removeVirtualBackground();

Rename

// Rename user
await client.rename(userId, 'New Name');

React Integration

Basic Pattern

import { useEffect, useRef, useState, useCallback } from 'react';
import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';

type ZoomClient = ReturnType<typeof ZoomMtgEmbedded.createClient>;

function ZoomMeeting({ meetingNumber, password, userName }: Props) {
  const clientRef = useRef<ZoomClient | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isJoined, setIsJoined] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Create client once
  useEffect(() => {
    if (!clientRef.current) {
      clientRef.current = ZoomMtgEmbedded.createClient();
    }
  }, []);

  const joinMeeting = useCallback(async () => {
    if (!clientRef.current || !containerRef.current) return;

    try {
      // Get signature from backend
      const { signature, sdkKey } = await fetchSignature(meetingNumber);
      
      await clientRef.current.init({
        zoomAppRoot: containerRef.current,
        language: 'en-US',
        patchJsMedia: true,
        leaveOnPageUnload: true,
      });

      await clientRef.current.join({
        signature,
        sdkKey,
        meetingNumber,
        password,
        userName,
      });

      setIsJoined(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to join');
    }
  }, [meetingNumber, password, userName]);

  return (
    <div>
      <div 
        ref={containerRef} 
        style={{ width: '100%', height: '500px' }} 
      />
      {!isJoined && (
        <button onClick={joinMeeting}>Join Meeting</button>
      )}
      {error && <div className="error">{error}</div>}
    </div>
  );
}

Event Handling in React

useEffect(() => {
  if (!clientRef.current) return;
  
  const handleConnectionChange = (payload: any) => {
    if (payload.state === 'Connected') {
      setIsJoined(true);
    } else if (payload.state === 'Closed') {
      setIsJoined(false);
    }
  };

  const handleUserAdded = (payload: any) => {
    console.log('Users joined:', payload);
  };

  clientRef.current.on('connection-change', handleConnectionChange);
  clientRef.current.on('user-added', handleUserAdded);

  return () => {
    clientRef.current?.off('connection-change', handleConnectionChange);
    clientRef.current?.off('user-added', handleUserAdded);
  };
}, []);

Positioning and Resizing

Initial Size

await client.init({
  zoomAppRoot: element,
  customize: {
    video: {
      viewSizes: {
        default: { width: 1000, height: 600 }
      }
    }
  }
});

Dynamic Resizing

The container element size determines the meeting UI size. To resize:

// Just resize the container
document.getElementById('meetingSDKElement').style.width = '1200px';
document.getElementById('meetingSDKElement').style.height = '800px';

Making it Resizable

customize: {
  video: {
    isResizable: true
  }
}

Supported Features

Component View supports core meeting functionality. Some features from Client View may not be available.

| Feature | Supported | |---------|-----------| | Audio/Video | ✅ | | Screen Share | ✅ | | Chat | ✅ | | Virtual Background | ✅ | | Breakout Rooms | ✅ | | Cloud Recording | ✅ | | Closed Captions | ✅ | | Live Transcription | ✅ | | Waiting Room | ✅ | | Gallery View | ✅ | | Reactions | ✅ | | Raise Hand | ✅ |

Contact Zoom Developer Support to request additional features.

Error Handling

try {
  await client.join({
    // ... options
  });
} catch (error) {
  // error.reason contains error code
  // error.message contains description
  
  switch (error.reason) {
    case 'WRONG_MEETING_PASSWORD':
      console.error('Incorrect password');
      break;
    case 'MEETING_NOT_START':
      console.error('Meeting has not started');
      break;
    case 'INVALID_PARAMETERS':
      console.error('Invalid join parameters');
      break;
    default:
      console.error('Join failed:', error.message);
  }
}

Comparison with Client View

| Feature | Component View | Client View | |---------|----------------|-------------| | API Style | Promises | Callbacks | | Password param | password | passWord | | Container | Custom element | Auto #zmmtg-root | | UI | Embeddable | Full-page | | Preloading | Not needed | preLoadWasm() | | Language | Init option | i18n.load() | | Events | on()/off() | inMeetingServiceListener() |

Resources

• Main Web SDK Skill
• Reference Index
• Error Codes
• Common Issues
• SharedArrayBuffer Setup
• Official API Reference

Operations

• RUNBOOK.md - 5-minute preflight and debugging checklist.