Top of pageSkip to main content

Video


Video SDK for web can render up to 25 videos at a time on Desktop Chrome, Edge, and Firefox. On Desktop Safari and mobile browsers, up to two video streams can be rendered, the self video and a single participant video stream. You can show additional videos using pagination. The maximum video quality on web is 720p.

On this page

Start video

To start your video, call the stream.startVideo() function. This will prompt the browser to ask the participant for permission to turn on their camera.

stream.startVideo()

To render your own video on the page as a "self view"

  1. On desktop Chrome, Edge, and Firefox with SharedArrayBuffer not enabled, on Android browsers, and on devices with less than 4 logical processors available (navigator.hardwareConcurrency), an HTML Video element needs to be passed into the stream.startVideo() function.

    After the stream.startVideo() promise resolves, to render the self view video for browsers that do not support MediaStreamTrackProcessor, the self view needs to be rendered on an HTML Canvas element via the stream.renderVideo() function.

    stream.startVideo({ videoElement: document.querySelector('#self-view-video') }).then(() => {
       if(!(typeof MediaStreamTrackProcessor === 'function')) {
          stream.renderVideo(document.querySelector('#self-view-canvas'), client.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 2)
       }
    })
  2. In desktop Chrome, Edge, and Firefox with SharedArrayBuffer enabled, and all other browsers and devices, the self view needs to be rendered on an HTML Canvas element via the stream.renderVideo() function after the stream.startVideo() promise resolves.

    stream.startVideo().then(() => {
       stream.renderVideo(document.querySelector('#self-view-canvas'), client.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 2)
    })
  3. Here is an example implementation that works in all browsers and includes catch statements to help with debugging:

    <video id="self-view-video" width="1920" height="1080"></video>
    <canvas id="self-view-canvas" width="1920" height="1080"></canvas>
    #self-view-video, #self-view-canvas {
       width: 100%;
       height: auto;
       display: none;
    }
    // if Desktop Chrome, Edge, and Firefox with SharedArrayBuffer not enabled, Android browsers, and on devices with less than 4 logical processors available
    if((!stream.isSupportMultipleVideos() && (typeof OffscreenCanvas === 'function')) || /android/i.test(navigator.userAgent)) {
       // start video - video will render automatically on HTML Video Element if MediaStreamTrackProcessor is supported
       stream.startVideo({ videoElement: document.querySelector('#self-view-video') }).then(() => {
          // if MediaStreamTrackProcessor is not supported
          if(!(typeof MediaStreamTrackProcessor === 'function')) {
             // render video on HTML Canvas Element
             stream.renderVideo(document.querySelector('#self-view-canvas'), client.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 2).then(() => {
                // show HTML Canvas Element in DOM
                document.querySelector('#self-view-canvas').style.display = 'block'
             }).catch((error) => {
                console.log(error)
             })
          } else {
             // show HTML Video Element in DOM
             document.querySelector('#self-view-video').style.display = 'block'
          }
       }).catch((error) => {
         console.log(error)
       })
    // desktop Chrome, Edge, and Firefox with SharedArrayBuffer enabled, and all other browsers
    } else {
       // start video
       stream.startVideo().then(() => {
          // render video on HTML Canvas Element
          stream.renderVideo(document.querySelector('#self-view-canvas'), client.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 2).then(() => {
             // show HTML Canvas Element in DOM
             document.querySelector('#self-view-canvas').style.display = 'block'
          }).catch((error) => {
             console.log(error)
          })
       }).catch((error) => {
          console.log(error)
       })
    }

To use a virtual background

  1. On desktop Chrome and Edge with SharedArrayBuffer enabled, to set a virtual background or blurred background pass in an image url hosted from your domain, or the string 'blur' to the stream.startVideo() function.

    stream.startVideo({ virtualBackground: { imageUrl: './my-background.jpg' } })

Stop video

To stop your video, call the stream.stopVideo() function.

stream.stopVideo()

Switch camera

To switch the camera input, get the list of cameras, and then pass in a deviceId to the stream.switchCamera() function.

let cameras = stream.getCameraList()

stream.switchCamera(cameras[1].deviceId)

Detect new camera

Use the device-change event listener to detect when a camera has been plugged in or unplugged:

client.on('device-change', () => {
  console.log(stream.getCameraList())

  cameras = stream.getCameraList()
})

Render participant videos

You can use the peer-video-state-change event listener to be notified when a participant turns their video on or off. When a participant turns on or off their video, you can render or stop rendering their video on the canvas respectively.

client.on('peer-video-state-change', (payload) => {
   if (payload.action === 'Start') {
      stream.renderVideo(document.querySelector('#participants-canvas'), payload.userId, 960, 540, X_CORD, Y_CORD, 2)
   } else if (payload.action === 'Stop') {
      stream.stopRenderVideo(document.querySelector('#participants-canvas'), payload.userId)
   }
})

When a new participant joins, you can use the client.getAllUser() function to render existing particpants videos. For example:

client.join(topic, token, userName, password).then(() => {
   stream = client.getMediaStream()
   client.getAllUser().forEach((user) => {
      if(user.bVideoOn) {
         stream.renderVideo(document.querySelector('#participants-canvas'), user.userId, 960, 540, X_CORD, Y_CORD, 2)
      }
   })
}).catch((error) => {
   console.log(error)
})

This example shows how you would render four videos at a time in a 16:9 aspect ratio resolution on a 4x4 grid, with eight participants in the session.

  1. Render the first four videos on a single participants canvas:

    <canvas id="participants-canvas" width="1920" height="1080"></canvas>
    
    <button onClick="nextVideos()">Next Videos</button>
    <button onClick="previousVideos()">Previous Videos</button>
    let participants = client.getAllUser()
    
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[0].userId, 960, 540, 0, 540, 2)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[1].userId, 960, 540, 960, 540, 2)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[2].userId, 960, 540, 0, 0, 2)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[3].userId, 960, 540, 960, 0, 2)
    Zoom Video SDK for Web example grid
  2. Render the next four videos after a button click:

    function nextVideos() {
    
      // stop rendering the first 4 videos
      stream.stopRenderVideo(document.querySelector('#participants-canvas'), participants[0].userId)
      stream.stopRenderVideo(document.querySelector('#participants-canvas'), participants[1].userId)
      stream.stopRenderVideo(document.querySelector('#participants-canvas'), participants[2].userId)
      stream.stopRenderVideo(document.querySelector('#participants-canvas'), participants[3].userId)
    
      // render the next 4 videos
      stream.renderVideo(document.querySelector('#participants-canvas'), participants[4].userId, 960, 540, 0, 540, 2)
      stream.renderVideo(document.querySelector('#participants-canvas'), participants[5].userId, 960, 540, 960, 540, 2)
      stream.renderVideo(document.querySelector('#participants-canvas'), participants[6].userId, 960, 540, 0, 0, 2)
      stream.renderVideo(document.querySelector('#participants-canvas'), participants[7].userId, 960, 540, 960, 0, 2)
    }
    Zoom Video SDK for Web example grid
  3. Render the previous four videos after a button click:

    function previousVideos() {
    
      // stop rendering the first 4 videos
      stream.stopRenderVideo(document.querySelector('#participants-canvas'), participants[4].userId)
      stream.stopRenderVideo(document.querySelector('#participants-canvas'), participants[5].userId)
      stream.stopRenderVideo(document.querySelector('#participants-canvas'), participants[6].userId)
      stream.stopRenderVideo(document.querySelector('#participants-canvas'), participants[7].userId)
    
      // render the next 4 videos
      stream.renderVideo(document.querySelector('#participants-canvas'), participants[0].userId, 960, 540, 0, 540, 2)
      stream.renderVideo(document.querySelector('#participants-canvas'), participants[1].userId, 960, 540, 960, 540, 2)
      stream.renderVideo(document.querySelector('#participants-canvas'), participants[2].userId, 960, 540, 0, 0, 2)
      stream.renderVideo(document.querySelector('#participants-canvas'), participants[3].userId, 960, 540, 960, 0, 2)
    }
    Zoom Video SDK for Web example grid

For the full set of video 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.