Advanced video mode

Zoom Contact Center only

Customize your video client with advanced controls. For example, you can create your own button to start the video client and add actions to perform after the video has ended.

VideoClient API

Use the following methods to create, initialize, and control the video client programmatically.

To create and initialize a video client, create a VideoClient instance and call init(), replacing entryId with your entry ID.

new VideoClient({});
await videoClient.init({
    entryId,
    name: "name", // optional field, omit if not using, null value not accepted
});

To trigger the video flow, call startVideo().

videoClient.startVideo();

VideoClient events

The video client supports these events:

Event	Description
`video-start`	Video started.
`video-end`	Video ended.
`notification-join-call`	User notified to join video.
`video-click-end`	User clicked button to end video.
`video-force-end`	User's video forcefully ended.
`task-created`	A task was created.

Custom video button

This code creates a custom button element, listens for clicks, and initializes and starts the video client when the button is clicked.

<!DOCTYPE html>
<!-- other page elements -->
    create video
    <script src="https://test.example.com/sample/web-sdk/video-client.js">
    </script>
    <script>
      (() => {
        const dom = document.getElementById('create')
        dom.addEventListener('click', async () => {
          const entryId = "Your entry id"
          const videoClient = new VideoClient({
          });
          await videoClient.init({
            entryId,
            name: 'name' // optional field, omit if not using, null value not accepted
          });
          videoClient.startVideo()
          videoClient.on('video-end', () => {
            console.log('video ended')
            // Add any actions to perform when the video ends
          })
        })
      })()
    </script>
<!-- other page elements -->
</html>