# Upgrading to Video SDK v2 for web

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

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](https://www.zoom.com/en/blog/how-zooms-video-sdk-stacks-up/) to include [WebRTC](https://webrtc.org/) alongside WebAssembly ([WASM](https://webassembly.org/)). 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:

```shell
npm install @zoom/videosdk@2
```

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

```html
<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](https://www.npmjs.com/package/@zoom/videosdk?activeTab=versions).

## Update video rendering

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

1. You can either call the `renderVideo` and `stopRenderVideo` function, passing it a canvas reference.
2. 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](https://github.com/zoom/videosdk-web-helloworld/commit/8b3d4723de3968a8ae0d7124feaf6c915991665b#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R26) 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:

1. Replace canvas with video-player-container

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

    ```diff
    - <canvas id="videos-canvas"></canvas>
    + <video-player-container></video-player-container>
    ```

2. Replace renderVideo with attachVideo

    In your video render logic remove the `renderVideo` calls:

    ```diff
    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:

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

3. Replace stopRenderVideo with detachVideo

    Remove the `stopRenderVideo` calls and use `detachVideo` instead:

    ```diff
    - 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`.

4. Use `video-player` element for video preview

    If you are using the [start](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/LocalVideoTrack.html#start) or [previewVirtualBackground](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#previewVirtualBackground) functions, make sure you pass in the custom `video-player` element inside the custom `video-player-container` element:

    ```html
    <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:

    ```javascript
    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:

    ```javascript
    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();
    ```

5. Styling

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

    ```diff
    - 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:

    ```css
    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](https://github.com/zoom/videosdk-web-helloworld/blob/8b3d4723de3968a8ae0d7124feaf6c915991665b/src/style.css).

## Review existing Zoom network requirements

Lastly, ensure you're following the existing [Zoom network requirements](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0060548).

> 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](/changelog/video-sdk/web/2.1.0/#faqs) 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](https://devforum.zoom.us/). We'd love to hear your feedback and suggestions!