Zoom General

// For 720p in speaker view
const speakerContainer = {
  width: 1280,
  height: 720
};

// For 720p in gallery view (minimum)
const galleryContainer = {
  width: 720,
  height: 411
};

// For 1080p (speaker view only)
const fullHDContainer = {
  width: 1920,
  height: 1080
};

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

app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
  next();
});

add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;

// Start video with HD enabled
await stream.startVideo({
  hd: true,           // Enable 720p
  fullHd: true,       // Enable 1080p (if supported)
  captureWidth: 1280,
  captureHeight: 720
});

// VideoQuality enum values:
// Video_90P = 0
// Video_180P = 1
// Video_360P = 2
// Video_720P = 3
// Video_1080P = 4

// Attach video at specific quality
await stream.attachVideo(userId, VideoQuality.Video_720P);

// Or with renderVideo
await stream.renderVideo(canvas, userId, 1280, 720, 0, 0, VideoQuality.Video_720P);

// Check if device supports HD
const capabilities = await stream.getVideoCapabilities();
console.log('Max resolution:', capabilities.maxResolution);
console.log('HD supported:', capabilities.hdSupported);

ZoomMtg.init({
  leaveUrl: 'https://your-site.com',
  disablePreview: false,
  videoResolution: '720p',  // or '1080p'
  success: () => {
    console.log('Init success');
  }
});

<div id="zoom-container" style="width: 100%; max-width: 1280px; aspect-ratio: 16/9;">
  <!-- SDK renders here -->
</div>

// Ensure container meets minimum size for HD
const container = document.getElementById('zoom-container');
const rect = container.getBoundingClientRect();

if (rect.width < 1280 || rect.height < 720) {
  console.warn('Container too small for 720p - video will be downscaled');
}

function ensureHDContainer(container, targetResolution = 720) {
  const minWidth = targetResolution === 1080 ? 1920 : 1280;
  const minHeight = targetResolution === 1080 ? 1080 : 720;

  container.style.minWidth = `${minWidth}px`;
  container.style.minHeight = `${minHeight}px`;
  container.style.aspectRatio = '16/9';
}

window.addEventListener('resize', () => {
  const container = document.getElementById('zoom-container');
  const rect = container.getBoundingClientRect();

  // Adjust quality based on available space
  if (rect.width >= 1920 && rect.height >= 1080) {
    stream.attachVideo(userId, VideoQuality.Video_1080P);
  } else if (rect.width >= 1280 && rect.height >= 720) {
    stream.attachVideo(userId, VideoQuality.Video_720P);
  } else {
    stream.attachVideo(userId, VideoQuality.Video_360P);
  }
});

function checkSABSupport() {
  if (typeof SharedArrayBuffer === 'undefined') {
    console.warn('SharedArrayBuffer not available - HD features limited');
    return false;
  }

  // Check if cross-origin isolated
  if (!crossOriginIsolated) {
    console.warn('Not cross-origin isolated - SAB may not work');
    return false;
  }

  return true;
}

const MAX_720P_STREAMS = 2;
let current720pCount = 0;

async function subscribeToVideo(userId, preferredQuality) {
  let quality = preferredQuality;

  if (quality === VideoQuality.Video_720P) {
    if (current720pCount >= MAX_720P_STREAMS) {
      console.warn('Max 720p streams reached, using 360p');
      quality = VideoQuality.Video_360P;
    } else {
      current720pCount++;
    }
  }

  await stream.attachVideo(userId, quality);
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-container canvas,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}