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:


Stop viewing shared content:


Start a screen share:


Stop screen sharing:


Pause current screen share:


Resume the paused screen share:


Lock screen sharing:


Check if screen sharing is locked:


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 {
} 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) {

Canvas elements

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


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


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


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

Using WebCodecs, use video element instead of canvas

When using WebCodecs, screen sharing will not work correctly with a <canvas> element; please use a <video> element instead:

export function isSupportWebCodecs() {
	return typeof (window as any).MediaStreamTrackProcessor === 'function';

Example using React to dynamically render the correct HTMLElement:

	isSupportWebCodecs() ? < video
	className = {
		classnames('share-canvas', {
			hidden: isRecieveSharing
	ref = {
	/> : <canvas
	className = {
		classnames('share-canvas', {
			hidden: isRecieveSharing
	ref = {

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.


Participants start or stop screen sharing

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

    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.


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');