zoom-meeting-sdk-web

npm install @zoom/meetingsdk --save

<!-- Dependencies (required for both views) -->
<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>
 
<!-- Client View -->
<script src="https://source.zoom.us/zoom-meeting-{VERSION}.min.js"></script>
 
<!-- OR Component View -->
<script src="https://source.zoom.us/zoom-meeting-embedded-{VERSION}.min.js"></script>

import { ZoomMtg } from '@zoom/meetingsdk';
 
// Step 1: Check browser compatibility
console.log('System requirements:', ZoomMtg.checkSystemRequirements());
 
// Step 2: Preload WebAssembly for faster initialization
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
 
// Step 3: Load language files (MUST complete before init)
ZoomMtg.i18n.load('en-US');
ZoomMtg.i18n.onLoad(() => {
  
  // Step 4: Initialize SDK
  ZoomMtg.init({
    leaveUrl: 'https://yoursite.com/meeting-ended',
    disableCORP: !window.crossOriginIsolated, // Auto-detect SharedArrayBuffer
    patchJsMedia: true,           // Auto-apply media dependency fixes
    leaveOnPageUnload: true,      // Clean up when page unloads
    externalLinkPage: './external.html', // Page for external links
    success: () => {
      
      // Step 5: Join meeting (note: passWord with capital W!)
      ZoomMtg.join({
        signature: signature,       // From your auth endpoint
        meetingNumber: '1234567890',
        userName: 'User Name',
        passWord: 'meeting-password', // Capital W!
        success: (res) => {
          console.log('Joined meeting:', res);
          
          // Post-join: Get meeting info
          ZoomMtg.getAttendeeslist({});
          ZoomMtg.getCurrentUser({
            success: (res) => console.log('Current user:', res.result.currentUser)
          });
        },
        error: (err) => {
          console.error('Join error:', err);
        }
      });
    },
    error: (err) => {
      console.error('Init error:', err);
    }
  });
});

import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';
 
// Create client instance (do this ONCE, not on every render!)
const client = ZoomMtgEmbedded.createClient();
 
async function startMeeting() {
  try {
    // Initialize with container element
    await client.init({
      zoomAppRoot: document.getElementById('meetingSDKElement'),
      language: 'en-US',
      debug: true,                  // Enable debug logging
      patchJsMedia: true,           // Auto-apply media fixes
      leaveOnPageUnload: true,      // Clean up on page unload
    });
 
    // Join meeting (note: password lowercase!)
    await client.join({
      signature: signature,          // From your auth endpoint
      sdkKey: SDK_KEY,
      meetingNumber: '1234567890',
      userName: 'User Name',
      password: 'meeting-password',  // Lowercase!
    });
    
    console.log('Joined successfully!');
  } catch (error) {
    console.error('Failed to join:', error);
  }
}

# Clone Zoom's official auth endpoint
git clone https://github.com/zoom/meetingsdk-auth-endpoint-sample --depth 1
cd meetingsdk-auth-endpoint-sample
cp .env.example .env
# Edit .env with your SDK Key and Secret
npm install && npm run start

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Get Signature │───►│   init()        │───►│   join()        │
│   (from backend)│    │   (SDK setup)   │    │   (enter mtg)   │
└─────────────────┘    └─────────────────┘    └─────────────────┘
                              │                       │
                              ▼                       ▼
                       success/error            success/error
                        callback                 callback
                     (or Promise resolve)    (or Promise resolve)

ZoomMtg.init({
  // Required
  leaveUrl: string,              // URL to redirect after leaving
 
  // Display Options
  showMeetingHeader: boolean,    // Show meeting number/topic (default: true)
  disableInvite: boolean,        // Hide invite button (default: false)
  disableRecord: boolean,        // Hide record button (default: false)
  disableJoinAudio: boolean,     // Hide join audio option (default: false)
  disablePreview: boolean,       // Skip A/V preview (default: false)
  
  // HD Video (requires SharedArrayBuffer)
  enableHD: boolean,             // Enable 720p (default: true for >=2.8.0)
  enableFullHD: boolean,         // Enable 1080p for webinars (default: false)
  
  // View Options
  defaultView: 'gallery' | 'speaker' | 'multiSpeaker',
  
  // Feature Toggles
  isSupportChat: boolean,        // Enable chat (default: true)
  isSupportCC: boolean,          // Enable closed captions (default: true)
  isSupportBreakout: boolean,    // Enable breakout rooms (default: true)
  isSupportPolling: boolean,     // Enable polling (default: true)
  isSupportQA: boolean,          // Enable Q&A for webinars (default: true)
  
  // Cross-Origin
  disableCORP: boolean,          // For dev without COOP/COEP headers
  
  // Callbacks
  success: Function,
  error: Function,
});

ZoomMtg.join({
  // Required
  signature: string,             // JWT signature from backend
  meetingNumber: string | number,
  userName: string,
  
  // Authentication
  passWord: string,              // Meeting password (capital W!)
  zak: string,                   // Host's ZAK token (required to start)
  tk: string,                    // Registration token (if required)
  obfToken: string,              // App Privilege Token (for 2026 requirement)
  
  // Optional
  userEmail: string,             // Required for webinars
  customerKey: string,           // Custom identifier (max 36 chars)
  
  // Callbacks
  success: Function,
  error: Function,
});

// User events
ZoomMtg.inMeetingServiceListener('onUserJoin', (data) => {
  console.log('User joined:', data);
});
 
ZoomMtg.inMeetingServiceListener('onUserLeave', (data) => {
  console.log('User left:', data);
  // data.reasonCode values:
  // 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);
});
 
// Meeting status
ZoomMtg.inMeetingServiceListener('onMeetingStatus', (data) => {
  // status: 1=connecting, 2=connected, 3=disconnected, 4=reconnecting
  console.log('Meeting status:', data.status);
});
 
// Waiting room
ZoomMtg.inMeetingServiceListener('onUserIsInWaitingRoom', (data) => {
  console.log('User in waiting room:', data);
});
 
// Active speaker detection
ZoomMtg.inMeetingServiceListener('onActiveSpeaker', (data) => {
  // [{userId: number, userName: string}]
  console.log('Active speaker:', data);
});
 
// Network quality monitoring
ZoomMtg.inMeetingServiceListener('onNetworkQualityChange', (data) => {
  // {level: 0-5, userId, type: 'uplink'}
  // 0-1 = bad, 2 = normal, 3-5 = good
  if (data.level <= 1) {
    console.warn('Poor network quality');
  }
});
 
// Join performance metrics
ZoomMtg.inMeetingServiceListener('onJoinSpeed', (data) => {
  console.log('Join speed metrics:', data);
  // Useful for performance monitoring dashboards
});
 
// Chat
ZoomMtg.inMeetingServiceListener('onReceiveChatMsg', (data) => {
  console.log('Chat message:', data);
});
 
// Recording
ZoomMtg.inMeetingServiceListener('onRecordingChange', (data) => {
  console.log('Recording status:', data);
});
 
// Screen sharing
ZoomMtg.inMeetingServiceListener('onShareContentChange', (data) => {
  console.log('Share content changed:', data);
});
 
// Transcription (requires "save closed captions" enabled)
ZoomMtg.inMeetingServiceListener('onReceiveTranscriptionMsg', (data) => {
  console.log('Transcription:', data);
});
 
// Breakout room status
ZoomMtg.inMeetingServiceListener('onRoomStatusChange', (data) => {
  // status: 2=InProgress, 3=Closing, 4=Closed
  console.log('Breakout room status:', data);
});

// Get current user info
ZoomMtg.getCurrentUser({
  success: (res) => console.log(res.result.currentUser)
});
 
// Get all attendees
ZoomMtg.getAttendeeslist({});
 
// Audio/Video control
ZoomMtg.mute({ userId, mute: true });
ZoomMtg.muteAll({ muteAll: true });
 
// Chat
ZoomMtg.sendChat({ message: 'Hello!', userId: 0 }); // 0 = everyone
 
// Leave/End
ZoomMtg.leaveMeeting({});
ZoomMtg.endMeeting({});
 
// Host controls
ZoomMtg.makeHost({ userId });
ZoomMtg.makeCoHost({ oderId });
ZoomMtg.expel({ userId });  // Remove participant
ZoomMtg.putOnHold({ oderId, bHold: true });
 
// Breakout rooms
ZoomMtg.createBreakoutRoom({ rooms: [...] });
ZoomMtg.openBreakoutRooms({});
ZoomMtg.closeBreakoutRooms({});
 
// Virtual background
ZoomMtg.setVirtualBackground({ imageUrl: '...' });

await client.init({
  // Required
  zoomAppRoot: HTMLElement,      // Container element
 
  // Display
  language: string,              // e.g., 'en-US'
  debug: boolean,                // Enable debug logging (default: false)
  
  // Media
  patchJsMedia: boolean,         // Auto-apply media fixes (default: false)
  leaveOnPageUnload: boolean,    // Clean up on page unload (default: false)
  
  // Video
  enableHD: boolean,             // Enable 720p
  enableFullHD: boolean,         // Enable 1080p
  
  // Customization
  customize: {
    video: {
      isResizable: boolean,
      viewSizes: { default: { width, height } }
    },
    meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
    toolbar: {
      buttons: [
        {
          text: 'Custom Button',
          className: 'custom-btn',
          onClick: () => {
            console.log('Custom button clicked');
          }
        }
      ]
    }
  },
  
  // For ZFG
  webEndpoint: string,
  assetPath: string,             // Custom path for AV libraries (self-hosting)
});

await client.join({
  // Required
  signature: string,
  sdkKey: string,
  meetingNumber: string | number,
  userName: string,
  
  // Authentication  
  password: string,              // Lowercase! (different from Client View)
  zak: string,                   // Host's ZAK token
  tk: string,                    // Registration token
  
  // Optional
  userEmail: string,
});

// Connection state
client.on('connection-change', (payload) => {
  // payload.state: 'Connecting', 'Connected', 'Reconnecting', 'Closed'
  console.log('Connection:', payload.state);
});
 
// User events
client.on('user-added', (payload) => {
  console.log('Users added:', payload);
});
 
client.on('user-removed', (payload) => {
  console.log('Users removed:', payload);
});
 
client.on('user-updated', (payload) => {
  console.log('Users updated:', payload);
});
 
// Active speaker
client.on('active-speaker', (payload) => {
  console.log('Active speaker:', payload);
});
 
// Video state
client.on('video-active-change', (payload) => {
  console.log('Video active:', payload);
});
 
// Unsubscribe
client.off('connection-change', handler);

// Get current user
const currentUser = client.getCurrentUser();
 
// Get all participants
const participants = client.getParticipantsList();
 
// Audio control
await client.mute(true);
await client.muteAudio(userId, true);
 
// Video control
await client.muteVideo(userId, true);
 
// Leave
client.leaveMeeting();
 
// End (host only)
client.endMeeting();

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

if (typeof SharedArrayBuffer === 'function') {
  console.log('SharedArrayBuffer enabled!');
} else {
  console.warn('HD features will be limited');
}
 
// Or check cross-origin isolation
console.log('Cross-origin isolated:', window.crossOriginIsolated);

// Server 1: Main app (port 9999) - NO isolation headers
// Serves index.html, navigation works normally
 
// Server 2: Meeting page (port 9998) - WITH isolation headers
// Serves meeting.html with SharedArrayBuffer support
 
// Main server proxies to meeting server
proxy: [{
  path: '/meeting.html',
  target: 'http://YOUR_MEETING_SERVER_HOST:9998/'
}]

// vite.config.ts
export default defineConfig({
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    }
  }
});