Common Issues

// WRONG
const stream = client.getMediaStream();  // undefined!
await client.join(...);

// CORRECT
await client.join(...);
const stream = client.getMediaStream();  // Works!

// 1. Use attachVideo(), not renderVideo()
const videoElement = await stream.attachVideo(userId, VideoQuality.Video_360P);

// 2. Append to DOM
container.appendChild(videoElement);

// 3. Listen for events
client.on('peer-video-state-change', async (payload) => {
  if (payload.action === 'Start') {
    const element = await stream.attachVideo(payload.userId, VideoQuality.Video_360P);
    container.appendChild(element);
  } else {
    await stream.detachVideo(payload.userId);
  }
});

// After joining, manually render existing participants
async function renderExistingParticipants() {
  await new Promise(resolve => setTimeout(resolve, 500));
  
  const users = client.getAllUser();
  const currentUserId = client.getCurrentUserInfo().userId;
  
  for (const user of users) {
    if (user.bVideoOn && user.userId !== currentUserId) {
      const element = await stream.attachVideo(user.userId, VideoQuality.Video_360P);
      document.getElementById(`video-${user.userId}`).appendChild(element);
    }
  }
}

# If your environment blocks `source.zoom.us`, you can mirror/self-host as a fallback
# only if permitted and you can keep versions in sync with the SDK you target.
curl "https://source.zoom.us/videosdk/zoom-video-2.3.12.min.js" -o public/js/zoom-video-sdk.min.js

<script src="js/zoom-video-sdk.min.js"></script>

function waitForSDK(timeout = 10000) {
  return new Promise((resolve, reject) => {
    if (typeof WebVideoSDK !== 'undefined') {
      resolve();
      return;
    }
    const start = Date.now();
    const check = setInterval(() => {
      if (typeof WebVideoSDK !== 'undefined') {
        clearInterval(check);
        resolve();
      } else if (Date.now() - start > timeout) {
        clearInterval(check);
        reject(new Error('SDK failed to load'));
      }
    }, 100);
  });
}

await waitForSDK();
const ZoomVideo = WebVideoSDK.default;

// NPM
import ZoomVideo from '@zoom/videosdk';

// CDN
const ZoomVideo = WebVideoSDK.default;  // Note: .default!

const client = ZoomVideo.createClient();

// Check permissions before starting
try {
  await stream.startVideo();
} catch (error) {
  if (error.type === 'INSUFFICIENT_PRIVILEGES') {
    // Permission denied - guide user
    alert('Please allow camera access in browser settings');
  }
}

// Check HD support
if (stream.isSupportHDVideo()) {
  await stream.startVideo({ hd: true });
} else {
  console.warn('HD not supported');
  await stream.startVideo();
}

// Check SharedArrayBuffer
const sabAvailable = typeof SharedArrayBuffer === 'function';
if (!sabAvailable) {
  console.warn('SharedArrayBuffer not available - add COOP/COEP headers');
}

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

// Check which element type to use
if (stream.isStartShareScreenWithVideoElement()) {
  const video = document.getElementById('share-video');
  await stream.startShareScreen(video as unknown as HTMLCanvasElement);
} else {
  const canvas = document.getElementById('share-canvas');
  await stream.startShareScreen(canvas);
}

const loggerClient = client.getLoggerClient({
  level: 'debug'
});

// Log all events
['connection-change', 'user-added', 'user-removed', 'peer-video-state-change'].forEach(event => {
  client.on(event, (payload) => {
    console.log(`Event: ${event}`, payload);
  });
});

const users = client.getAllUser();
console.table(users.map(u => ({
  userId: u.userId,
  name: u.displayName,
  videoOn: u.bVideoOn,
  muted: u.muted,
  audio: u.audio
})));

console.log('Active camera:', stream.getActiveCamera());
console.log('Active mic:', stream.getActiveMicrophone());
console.log('Capturing video:', stream.isCapturingVideo());
console.log('Audio muted:', stream.isAudioMuted());
console.log('HD supported:', stream.isSupportHDVideo());
console.log('Max quality:', stream.getVideoMaxQuality());

'wasm-unsafe-eval' 'unsafe-eval'

video-player-container video-player,
video-player-container canvas,
video-player-container video {
  width: 100%;
  height: 100%;
  display: block;
}