# Selection of Video vs Canvas rendering

**URL:** <https://devforum.zoom.us/t/selection-of-video-vs-canvas-rendering/137759>\
**Category:** Video SDK\
**Tags:** video-sdk\
**Created:** [September 30, 2025, 6:34pm UTC](https://devforum.zoom.us/t/selection-of-video-vs-canvas-rendering/137759 "2025-09-30T18:34:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![apc](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/apc/32/70811_2.png) [@apc](https://devforum.zoom.us/u/apc)\
**Post date:** [September 30, 2025, 6:34pm UTC](https://devforum.zoom.us/t/selection-of-video-vs-canvas-rendering/137759/1 "2025-09-30T18:34:08Z")

</div>

**Video SDK Type and Version**  
Video SDK web, 2.2.12

**Description**  
Hi all - I’m hoping to understand the internal selection process that occurs in VideoSDK web for whether a `canvas` vs multiple `video` elements should be used. For the same webpage, I get different results depending on if I’m in Chrome (canvas) vs Safari (video elements).

Additionally, our implementation makes use of a shared source code via an internal NPM package that is docked in two different host apps. The canvas render in Chrome indicated previously is on a next.js app. The same source code on a Vite SPA uses multiple `video` renders in Chrome.

This is causing some issues with unpredictability in our styles, and WebGL issues (I previously had too many video-player-containers) that only materialized when canvas was used as a render and we got above a certain number of concurrent videos. This was not detectable in the `video` render strategy.

We are using the `attachVideo` API in our app.

```auto
mediaStream
          .attachVideo(
            userId,
            VideoQuality.Video_720P,
            videoPlayerRef.current ?? undefined
          )
          .then((userVideo) => {
            if (!("errorCode" in userVideo) && !videoPlayerRef.current)
              videoPlayerRef.current =
                document
                  .querySelector(`#stream-container-${userId}`)
                  ?.appendChild<VideoPlayer>(userVideo) ?? null;
          });

```

- What specifically determines which render strategy will be used?
- Is there any control over which method is used to render the video? What specific consequences would there be of using `video` vs `canvas` in an environment where it would not have been selected?
- Does the web SDK surface a check that we can use to detect how the video will be rendered for conditional styles, etc?

Thanks!

 ![Pasted Graphic 1](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/3/f/3f8a08c215dd4a11374543ff81ae4ddc8efa2836.png)

 ![Pasted Graphic](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/e/6e743d2ee12229b09dd31d5d31173a7b83127373.png)

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [October 10, 2025, 2:36am UTC](https://devforum.zoom.us/t/selection-of-video-vs-canvas-rendering/137759/2 "2025-10-10T02:36:53Z")

</div>

Hey @apc

Thanks for your feedback.

We introduced the `video-player` web component to abstract away the differences between using a video element or a canvas underneath. If `video-player` is not sufficient for your needs or you prefer to use a specific underlying rendering element, note that this difference is determined by the video solution chosen by the Video SDK.

By default, the SDK automatically selects the most suitable solution based on the environment. However, we also provide the `video_webrtc_mode` field in the JWT to specify your preferred solution.

> **[Video SDK - Authorize](https://developers.zoom.us/docs/video-sdk/auth/#generate-a-video-sdk-jwt)**
>
> The Zoom Developer Platform is an open platform that allows third-party developers to build applications and integrations upon Zoom’s video-first unified communications platform.

Thanks  
Vic