Screen Share

// Get the media stream
const stream = client.getMediaStream();

// Create a canvas or video element to render the share preview
const shareCanvas = document.getElementById('share-canvas');

// Start sharing
await stream.startShareScreen(shareCanvas);

await stream.startShareScreen(shareCanvas, {
  displaySurface: 'monitor',  // 'monitor' | 'window' | 'browser'
  audio: true,                // Share system/tab audio
  optimizedForSharedVideo: true,  // Optimize for video content
});

await stream.stopShareScreen();

// Pause
await stream.pauseShareScreen();

// Resume
await stream.resumeShareScreen();

// Create a canvas for rendering
const receiveCanvas = document.getElementById('share-view-canvas');

// Listen for active share changes
client.on('active-share-change', async (payload) => {
  const { state, userId } = payload;
  
  if (state === 'Active') {
    // Someone started sharing - render it
    await stream.startShareView(receiveCanvas, userId);
  } else if (state === 'Inactive') {
    // Sharing stopped
    await stream.stopShareView();
  }
});

// Listen for active share changes
client.on('active-share-change', async (payload) => {
  const { state, userId } = payload;
  
  if (state === 'Active') {
    // Attach share view - returns a VideoPlayer element
    const element = await stream.attachShareView(userId);
    document.getElementById('share-container').appendChild(element);
  } else if (state === 'Inactive') {
    // Detach share view
    const elements = await stream.detachShareView(userId);
    if (Array.isArray(elements)) {
      elements.forEach(e => e.remove());
    } else if (elements) {
      elements.remove();
    }
  }
});

import ZoomVideo from '@zoom/videosdk';

class ScreenShareManager {
  constructor(client) {
    this.client = client;
    this.stream = null;
    this.isSharing = false;
    this.activeShareUserId = null;
  }

  init() {
    this.stream =

// Share screen with system/tab audio
await stream.startShareScreen(canvas, {
  audio: true,
});

// Check share audio status
const audioStatus = stream.getShareAudioStatus();
console.log('Share audio:', audioStatus);

// Mute/unmute share audio
await stream.muteShareAudio();   // Mute
await stream.unmuteShareAudio(); // Unmute

import { SharePrivilege } from '@zoom/videosdk';

// Get current privilege
const privilege = stream.getSharePrivilege();

// Set privilege (host only)
await stream.setSharePrivilege(SharePrivilege.Unlocked);     // Anyone can share
await stream.setSharePrivilege(SharePrivilege.Locked);       // Only host can share
await stream.setSharePrivilege(SharePrivilege.OneParticipant); // One at a time

// Lock/unlock share (host only)
await stream.lockShare(true);  // Only host can share
await stream.lockShare(false); // Anyone can share

// Check max renderable share views
const maxViews = stream.getMaxRenderableShareViews();
console.log('Can render up to', maxViews, 'share views');

// Get list of users who are sharing
const sharers = stream.getShareUserList();

// Render multiple share views
for (const sharer of sharers) {
  const element = await stream.attachShareView(sharer.userId);
  document.getElementById('multi-share-container').appendChild(element);
}

// Optimize for video content (movies, animations)
await stream.enableOptimizeForSharedVideo(true);

// Check if optimized
const isOptimized = stream.isOptimizeForSharedVideoEnabled();

// Check if optimization is supported
const isSupported = stream.isSupportOptimizedForSharedVideo();

// Update shared video quality
await stream.updateSharedVideoQuality(VideoQuality.Video_720P);

// Take screenshot of active share
const blob = await stream.screenshotShareView();

// Convert to image
const url = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);

import React, { useEffect, useRef, useState } from 'react';
import { VideoClient, Stream } from '@zoom/videosdk';

interface ScreenShareProps {
  client: typeof VideoClient;
  stream: typeof Stream;
}

export const ScreenShare: React.FC<ScreenShareProps> = ({ client, stream }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isSharing, setIsSharing] = useState(false);
  const [activeShareUserId, setActiveShareUserId] = useState<number | null>(null);

  useEffect(() => {
    const handleShareChange = async (payload: { state: string; userId: number }) => {
      if (payload.state === 'Active') {
        setActiveShareUserId(payload.userId);
        
        if (containerRef.current) {
          const element = await stream.attachShareView(payload.userId);
          containerRef.current.innerHTML = '';
          containerRef.current.appendChild(element);
        }
      } else {
        if (activeShareUserId) {
          await stream.detachShareView(activeShareUserId);
        }
        setActiveShareUserId(null);
        if (containerRef.current) {
          containerRef.current.innerHTML = '';
        }
      }
    };

    const handlePassiveStop = () => {
      setIsSharing(false);
    };

    client.on('active-share-change', handleShareChange);
    client.on('passively-stop-share', handlePassiveStop);

    return () => {
      client.off('active-share-change', handleShareChange);
      client.off('passively-stop-share', handlePassiveStop);
    };
  }, [client, stream, activeShareUserId]);

  const startShare = async () => {
    try {
      const canvas = document.createElement('canvas');
      await stream.startShareScreen(canvas);
      setIsSharing(true);
    } catch (error) {
      console.error('Share failed:', error);
    }
  };

  const stopShare = async () => {
    await stream.stopShareScreen();
    setIsSharing(false);
  };

  return (
    <div className="screen-share">
      <div className="controls">
        {isSharing ? (
          <button onClick={stopShare}>Stop Sharing</button>
        ) : (
          <button onClick={startShare}>Share Screen</button>
        )}
      </div>
      
      {activeShareUserId && (
        <div 
          ref={containerRef} 
          className="share-view"
          style={{ width: '100%', aspectRatio: '16/9', background: '#000' }}
        />
      )}
    </div>
  );
};