# Can't render video on canvas

**URL:** <https://devforum.zoom.us/t/cant-render-video-on-canvas/56873>\
**Category:** Web\
**Created:** [September 3, 2021, 4:24am UTC](https://devforum.zoom.us/t/cant-render-video-on-canvas/56873 "2021-09-03T04:24:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Deneb](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/deneb/32/29355_2.png) [@Deneb](https://devforum.zoom.us/u/Deneb)\
**Post date:** [September 3, 2021, 4:24am UTC](https://devforum.zoom.us/t/cant-render-video-on-canvas/56873/1 "2021-09-03T04:24:45Z")

</div>

**Description**  
Can’t render video on canvas.

**Which Web Video SDK version?**  
1.1.4

Currently, I brought it to use the gallery view in the react-sample app, but I am developing it by changing video.tsx to js. Avatar is created according to the number of participants and the gallery view seems to be working well, but the camera image is not rendered on the canvas. Do I have to write a separate rendering statement? Or will the original rendering be done even if I bring the source of the react-sample app and use it?  
The part that I think is the current error is let isVideoDecodeReady = false;  
is the given part. I have not used typescript, so I specified the type specified separately.\*

---

<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:** [September 6, 2021, 3:05am UTC](https://devforum.zoom.us/t/cant-render-video-on-canvas/56873/2 "2021-09-06T03:05:53Z")

</div>

Hey @Deneb

Thanks for your feedback.

Do you mean that the self video is not rendering properly when you mentioned the camera image?

`isVideoDecodeReady` is the flag of video worker initialization, It’s used for the case that when joining the session after the session has been going for a while, the video stream arrived but the VideoDecoding worker was not ready, we have properly handled this case in the VideoSDK, but if you adjust the position or dimension the video cell before video rendered, it will cause errors, the `isVideoDecodeReady` is the flag that helps to correctly handle the timing of API calls.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![Deneb](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/deneb/32/29355_2.png) [@Deneb](https://devforum.zoom.us/u/Deneb)\
**Post date:** [September 8, 2021, 4:36am UTC](https://devforum.zoom.us/t/cant-render-video-on-canvas/56873/3 "2021-09-08T04:36:54Z")

</div>

Check it now Sorry for the delay.  
I deliberately set isVideoDecodeReady to true If isVideoDecodeReady = true, the camera does not turn on when entering the first session, but when re-entering after the session ends, the camera turns on via websocket connection Is it related to isVideoDecodeReady? I’m not sure how to use it with js. thank you

---

<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:** [September 8, 2021, 6:02am UTC](https://devforum.zoom.us/t/cant-render-video-on-canvas/56873/4 "2021-09-08T06:02:12Z")

</div>

Hey @Deneb

In [sample-app](https://github.com/zoom/sample-app-videosdk/tree/master/react-demo), the value of `isVideoDecodeReady ` comes from `media-sdk-change` event, which indicates the video decoding worker is ready. The self video has nothing with `isVideoDecodeReady`, as I mentioned in the previous threads, maybe you should apply a [WebCodecs](https://github.com/w3c/webcodecs) [OT](https://developer.chrome.com/origintrials/#/register_trial/-7811493553674125311) to solve this problem.

> [@Zoom self video delay while turnoff/on camera](https://devforum.zoom.us/t/zoom-self-video-delay-while-turnoff-on-camera/53427/3):
>
> Hey @arunkb27 Thanks for your feedback. This is a known issue. We use ImageCapture in Video SDK, but it has potential problems that may cause video stuck. So we introduce [WebCodecs](https://github.com/w3c/webcodecs) to improve the issue. Since the API is not stable yet, you should register an [origin trial](https://developer.chrome.com/origintrials/#/register_trial/-7811493553674125311) to enable this feature. Thanks Vic

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![Deneb](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/deneb/32/29355_2.png) [@Deneb](https://devforum.zoom.us/u/Deneb)\
**Post date:** [September 9, 2021, 8:37am UTC](https://devforum.zoom.us/t/cant-render-video-on-canvas/56873/5 "2021-09-09T08:37:38Z")

</div>

@vic.yang Oh finally fixed it. I made a rudimentary mistake. The websocket connection and init function did not work because the timing was not specified! Thank you for your kind reply as always.But may I ask one more question? When sharing the screen, the isSharing variable in the useShare component does not have a value at all. Where should I check it?  
I brought the sample app as it is, checked only passing props, and configured it, but the value does not enter.

---

<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:** [September 10, 2021, 2:50am UTC](https://devforum.zoom.us/t/cant-render-video-on-canvas/56873/6 "2021-09-10T02:50:20Z")

</div>

Hey @Deneb

Do you mean the variable `isSharing` in [video.tsx](https://github.com/zoom/sample-app-videosdk/blob/master/react-demo/src/feature/video/video.tsx#L51) file? Could you please provide more context about this issue?

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [October 10, 2021, 12:50pm UTC](https://devforum.zoom.us/t/cant-render-video-on-canvas/56873/7 "2021-10-10T12:50:52Z")

</div>

Closed on October 10, 2021, 12:50pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
