Video


Video SDK for Web can render up to nine videos at a time on Chrome and Edge browsers on desktop OSes (desktop Chrome and Edge). It can render two videos on Safari on a desktop. It can also render two videos on Firefox and mobile browsers. 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 and Edge with SharedArrayBuffer not enabled, the self view needs to be rendered on an HTML Video element that you pass into the stream.startVideo() function.

    stream.startVideo({ videoElement: document.querySelector('#self-view-video') })
  2. In all other browsers and with desktop Chrome and Edge with SharedArrayBuffer enabled, 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(() => {
    stream.renderVideo(document.querySelector('#self-view-canvas'), client.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 3)
    })
  3. Example implementation:

    // your start video button click
    function startVideoButton() {
    if(!!window.chrome && !(typeof SharedArrayBuffer === 'function')) {
    // if desktop Chrome or Edge (Chromium) with SharedArrayBuffer not enabled
    stream.startVideo({ videoElement: document.querySelector('#self-view-video') })
    } else {
    // all other browsers and desktop Chrome or Edge (Chromium) with SharedArrayBuffer enabled
    stream.startVideo(() => {
    stream.renderVideo(document.querySelector('#self-view-canvas'), client.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 3)
    })
    }
    }

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, 3)
} else if (payload.action === 'Stop') {
stream.stopRenderVideo(document.querySelector('#participants-canvas'), payload.userId)
}
})

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, 3)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[1].userId, 960, 540, 960, 540, 3)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[2].userId, 960, 540, 0, 0, 3)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[3].userId, 960, 540, 960, 0, 3)
    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, 3)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[5].userId, 960, 540, 960, 540, 3)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[6].userId, 960, 540, 0, 0, 3)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[7].userId, 960, 540, 960, 0, 3)
    }
    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, 3)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[1].userId, 960, 540, 960, 540, 3)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[2].userId, 960, 540, 0, 0, 3)
    stream.renderVideo(document.querySelector('#participants-canvas'), participants[3].userId, 960, 540, 960, 0, 3)
    }
    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.