Top of pageSkip to main content

Screen sharing


During a session, participants can share their screen with other participants.

On this page

Start screen sharing

To start a screen share, call the stream.startShareScreen() function and pass in an HTML Video element for browsers that support MediaStreamTrackProcessor or an HTML Canvas element for browsers that do not support MediaStreamTrackProcessor. This HTML Video or Canvas element will render the content you are sharing.

stream.startShareScreen(VIDEO_OR_CANVAS_ELEMENT)

Example implementation:

<video id="my-screen-share-video" height="1080" width="1920"></video>
<canvas id="my-screen-share-canvas" height="1080" width="1920"></canvas>
if(typeof MediaStreamTrackProcessor === 'function') {
  // if MediaStreamTrackProcessor is supported
  stream.startShareScreen(document.querySelector('#my-screen-share-video'))
} else {
  // if MediaStreamTrackProcessor is not supported
  stream.startShareScreen(document.querySelector('#my-screen-share-canvas'))
}

Share content from a 2nd camera.

The SDK also supports sharing content from a 2nd camera, such as an external USB camera. Once the user grants camera permission, get the list of cameras and pass in a deviceId to the stream.startShareScreen() function.

let cameras = stream.getCameraList()

if(typeof MediaStreamTrackProcessor === 'function') {
  // if MediaStreamTrackProcessor is supported
  stream.startShareScreen(document.querySelector('#second-camera-video'), { secondaryCameraId: cameras[1].deviceId })
} else {
  // if MediaStreamTrackProcessor is not supported
  stream.startShareScreen(document.querySelector('#second-camera-canvas'), { secondaryCameraId: cameras[1].deviceId })
}

Stop screen sharing

To stop the screen share, call the stream.stopShareScreen() function.

stream.stopShareScreen()

A screen share can also be stopped via the "stop sharing" controls provided by the browser. You can listen to this event via the passively-stop-share event listener.

Zoom Video SDK for web browser screen share controls
client.on('passively-stop-share', (payload) => {
  console.log(payload)
})

Render participant screen sharing

When a participant starts screen sharing, you will receive the active-share-change event. To render the screen share to all the participants, call the stream.startShareView() function and pass in an HTML canvas element for all browsers.

<canvas id="screen-share-canvas" height="1080" width="1920"></canvas>
client.on('active-share-change', (payload) => {
  if (payload.state === 'Active') {
    stream.startShareView(document.querySelector('#screen-share-canvas'), payload.userId)
  } else if (payload.state === 'Inactive') {
    stream.stopShareView()
  }
})

Share Chrome tab audio

To play audio in a Chrome tab in a session, initiate a screen share, navigate to the Chrome Tab tab, select an open tab, select the Share tab audio box, then click Share.

Zoom Video SDK for Web Share Chrome Tab Audio

While sharing audio in a Chrome tab, you will be unable to share audio from your microphone. To toggle the audio source between your microphone and the Chrome tab while still sharing the screen content, call the stream.muteShareAudio() and stream.unmuteShareAudio() functions respectively. After you stop sharing audio in the tab, the audio source will switch back to your microphone. You can use the share-audio-change event listener to keep track of which audio source is enabled.

client.on('share-audio-change', (payload) => {
  if (payload.state === 'on') {
    console.log('Switched audio source to Share Chrome Tab Audio')
  } else if(payload.state === 'off') {
    console.log('Switched audio source to your microphone')
  }
})

For the full set of screen share features, see the Video SDK Reference.

Next Steps

Need help?

If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.