Upgrading to Video SDK v2 for web

Zoom released version 2 of the Video SDK for web this month. It's a result of our dedication to improving the experience for both Video SDK developers and end users. With this release, we're also expanding our web stack to include WebRTC alongside WebAssembly (WASM). We aim to improve the experience across the board while maintaining the reliable service that customers have come to expect from Zoom products.

We'll walk you through all the steps you'll need to upgrade your app to use the new release. Future versions will continue to enhance service quality as we collect data across various device types and network conditions worldwide, along with your valuable feedback. We'll share more details in our upcoming blogs, stay tuned!

Update the package version

You can use npm or the package manager of your choice to update the Zoom Video SDK to version 2.x.x:

npm install @zoom/videosdk@2

If you're using our CDN, you can update the version in the URL:

<script src="https://source.zoom.us/videosdk/zoom-video-2.1.5.min.js"></script>

Note: v2.1.5 is the latest version at the time of writing. Replace the version number with the latest release.

Update video rendering

The Zoom Video SDK has two methods to render a user's video:

You can either call the renderVideo and stopRenderVideo function, passing it a canvas reference.
Or you can use the attachVideo and detachVideo functions to add videos to a video-player-container html element.

If you're already using the attachVideo & detachVideo APIs, you don't need to make any changes! However, if you're using the renderVideo API you'll need to update your application to use the attachVideo and detachVideo API to unlock the full benefits of this release.

You can view this commit to learn how we migrated our "hello world" app to leverage the new APIs. Here is a step-by-step break-down of the changes:

Replace canvas with video-player-container

Remove the canvas reference that you're using and add a <video-player-container> element to your HTML:
```
- <canvas id="videos-canvas"></canvas>
+ <video-player-container></video-player-container>
```

Replace renderVideo with attachVideo

In your video render logic remove the renderVideo calls:

const mediaStream = client.getMediaStream();
- const videoCanvas = document.querySelector("#videos-canvas");
- await mediaStream.renderVideo(videoCanvas, user.userId, vidWidth, vidHeight, x, y, 2);

Call the attachVideo method on the mediaStream, this returns an html element to play the video. You can add this to the video container:

const mediaStream = client.getMediaStream();
+ const videoContainer = document.querySelector('video-player-container');
+ const userVideo = await mediaStream.attachVideo(userId, VideoQuality.Video_360P);
+ videoContainer.appendChild(userVideo);

Replace stopRenderVideo with detachVideo

Remove the stopRenderVideo calls and use detachVideo instead:

- await mediaStream.stopRenderVideo(videoCanvas, userId);
+ const element = await mediaStream.detachVideo(userId);
+ Array.isArray(element) ? element.forEach((el) => el.remove()) : element.remove();

Make sure you remove the player element from the DOM after calling detachVideo.

Use video-player element for video preview

If you are using the start or previewVirtualBackground functions, make sure you pass in the custom video-player element inside the custom video-player-container element:

<video-player-container class="preview-container">
    <video-player id="preview-video"></video-player>
</video-player-container>

You can continue to use the same methods for previewing a user's video.

Pre-session preview:

const videoPlayerElement = document.querySelector("#preview-video");
// turn on camera preview with blur or virtual background image url
localVideoTrack.start(videoPlayerElement, {
    imageUrl: "blur", // omit the object to disable the effect
});
// turn off camera preview
localVideoTrack.stop();

In-session preview:

const stream = client.getMediaStream();
const imageSrc = "<your-image-url>"; // leave blank to disable effect
const deviceID = stream.getCameraList()[0].deviceId;
// preview camera with virtual background in session
stream.previewVirtualBackground(
    videoPlayerElement,
    imageSrc,
    false,
    deviceID,
);
// stop in session preview camera
stream.stopPreviewVirtualBackground();

Styling

You can remove any logic that computes the canvas coordinates for your user videos including any calls to adjustRenderedVideoPosition and updateVideoCanvasDimension:

- const { x, y } = getVideoXandY(index, numberOfUser);
- await mediaStream.renderVideo(videoCanvas, user.userId, vidWidth, vidHeight, x, y, 2);
- await mediaStream.adjustRenderedVideoPosition(videoCanvas, userId, vidWidth, vidHeight, x, y);
- mediaStream?.updateVideoCanvasDimension(videoCanvas, canvasWidth, canvasHeight);

You can use CSS to position user videos instead:

video-player-container {
    width: 80%;
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
video-player {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

You can find an example stylesheet to create a grid layout here.

Review existing Zoom network requirements

Lastly, ensure you're following the existing Zoom network requirements.

Note: The Zoom Web Client and Web SDKs attempt to connect on 443 secure WebSocket for signaling. For Video and Audio media we attempt to connect to UDP ports 8801, 8802, 8803, and 8804, followed by TCP Port 8801 and 8802, and finally followed by TLS port 443.

You're all set!

Zoom automatically adjusts video quality based on different factors to maintain a great user experience, we are taking the same approach with WebRTC. As we continue the rollout, Zoom will select between WebRTC and WASM based on multiple factors including network conditions and device hardware. Visit our FAQ for more information.

We believe utilizing these newer APIs will not only unlock the benefits of the new release but also help simplify using the Video SDK. We hope you're as excited as us to try out all the improvements in this release. If you need help please check out the Zoom Developer Forum. We'd love to hear your feedback and suggestions!