Screen Sharing


During a session, participants can share desktop screens or specific applications with other participants.

The host can lock participants’ ability to share their screen.

Browser requirements

Call ZoomVideo.checkSystemRequirements to ensure that your browser can support screen sharing.

If you are using a version of Chrome prior to version 72, you must install the Zoom Scheduler Chrome extension before starting screen sharing.

Managing screen sharing

Retrieve methods to control screen sharing from the the client.getMediaStream method.

const stream = client.getMediaStream();

Use the following methods to control screen sharing during a session.

Start viewing shared content:

stream.startShareView(canvas);

Stop viewing shared content:

stream.stopShareView();

Start a screen share:

stream.startShareScreen(canvas);

Stop screen sharing:

stream.stopShareScreen();

Pause current screen share:

stream.pauseShareScreen();

Resume the paused screen share:

stream.resumeShareScreen();

Lock screen sharing:

stream.lockShare(boolean);

Check if screen sharing is locked:

stream.isShareLocked();

Viewing participant’s screen sharing

When a participant starts screen sharing, you will receive the active-share-change event. To view screen share, call the stream.startShareView method to render the shared content into a canvas.

import {
  VideoActiveState
} from '@zoom/videosdk';
client.on('active-share-change', payload => {
  if (payload.state === VideoActiveState.Active) {
    stream.startShareView(canvasElement, payload.userId);
  } else if (payload.state === VideoActiveState.Inactive) {
    stream.stopShareView();
  }
})

Canvas elements

In some cases, events bound to the canvas element can be lost. We recommend the following HTML structure:

HTML

<div class="shared-content">
  <canvas id="canvas"></canvas>
</div>

CSS

#canvas {
  width: 100%;
  height: 100%;
}

JS

document.querySelector(".shared-content").addEventListener("click", (event) => {
  // event handler
});

Shared content dimension

When the shared content changes, the dimension of the viewport must be changed accordingly. Listen to the share-content-dimension-change event for details.

client.on('share-content-dimension-change',payload=>{ viewportElement.style.width=`${payload.width}px`; viewportElement.style.height=`${payload.height}px`;
})

Participants start or stop screen sharing

Listen to the peer-share-state-change event to discover when other participants start or stop screen sharing.

 client.on('peer-share-state-change',payload=>{
   if(payload.action==='Start'){
    console.log(`user:${payload.userId} starts share`);
   }else if(payload.action==='Stop'){
   console.log(`user:${payload.userId} stops share`);
   }
})

Sharing privileges

Only one participant can share their screen at a time. Only the host can start sharing when someone else is sharing. The host can change this behavior by locking sharing privileges. If a meeting is locked, only the host can share.

stream.lockShare(true);

If a non-host is sharing the screen, once the host locks screen sharing, the non-host’s screen sharing will be forcibly stopped. Listen to the passively-stop-share event for details.

import {PassiveStopShareReason} from '@zoom/videosdk';
client.on('passively-stop-share', payload => {
  if (payload.reason === PassiveStopShareReason.PrivilegeChange) {
    console.log('passively stop share because of privilege change');
  }
})