# Video not rendered on (browser) canvas

**URL:** <https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500>\
**Category:** Web\
**Created:** [August 9, 2021, 11:48pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500 "2021-08-09T23:48:03Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![dharjanto](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dharjanto/32/26046_2.png) [@dharjanto](https://devforum.zoom.us/u/dharjanto)\
**Post date:** [August 9, 2021, 11:48pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/1 "2021-08-09T23:48:04Z")

</div>

**Description**  
No video is rendered on canvas.

**Error**  
No error message on (browser) console.

**Which Web Video SDK version?**  
1.0.3

**To Reproduce(If applicable)**

**Screenshots**  
Browser console log is attached.

 ![chrome-console-zoom](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/e/9/e95e495739bbce734cd5bcb4e938afd0969bff62.png)

**Device (please complete the following information):**

- Device: Laptop
- OS: Windows 8
- Browser: Chrome
- Browser Version: 92.0.4515.131 (Official Build) (64-bit)

**Additional context**  
Add any other context about the problem here.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 10, 2021, 5:42pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/2 "2021-08-10T17:42:23Z")

</div>

Hey @dharjanto ,

It looks like you are on an outdated version. Can you please use the latest 1.1.3 and try again?

> **[@zoom/videosdk](https://www.npmjs.com/package/@zoom/videosdk)**
>
> Zoom Web Video SDK

> **[Integrate SDK into your app - Getting started - Web - Video SDKs - Zoom...](https://marketplace.zoom.us/docs/sdk/video/web/build/integrate)**
>
> Integrate SDK into your app
> 
> 
> 
> Before using the Video SDK, you must:
> 
> Get an SDK key and secret for authentication. Login to the Zoom Marketplace and Cr...

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![dharjanto](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dharjanto/32/26046_2.png) [@dharjanto](https://devforum.zoom.us/u/dharjanto)\
**Post date:** [August 13, 2021, 6:30pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/3 "2021-08-13T18:30:06Z")

</div>

Hi Tommy,

Thank you for your response. I upgraded the SDK to 1.1.3 and now I am running into an issue where on Firefox browser the screen sharing (receiving) is not showing. On the console I saw the following error: self.sharingRenderContext is undefined (see attached screenshot)

![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/e/f/ef6207e85e4c28e8517155ce7fda27698ccc5b95.png)

Screen sharing is working when I reverted back to 1.0.3, but this older version has a video issue which is solved by version 1.1.3.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 17, 2021, 4:19pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/4 "2021-08-17T16:19:53Z")

</div>

Hey @dharjanto ,

Glad to hear upgrading to 1.1.3 fixed the video rendered issue.

As for the new issue, can you share your code snippet of how you are sharing your screen and steps to reproduce it?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![dharjanto](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dharjanto/32/26046_2.png) [@dharjanto](https://devforum.zoom.us/u/dharjanto)\
**Post date:** [August 17, 2021, 5:01pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/5 "2021-08-17T17:01:06Z")

</div>

Hi Tommy,

Thank you for your response. Below is code snippet:

To start screen share:

this.zoomService.getZoomMediaStream().startShareScreen(this.zoomShareCanvas.nativeElement)

To start receiving screen share (resp.payload.userId from the callback):

this.zoomService.getZoomMediaStream()  
.startShareView(this.zoomShareReceivingCanvas.nativeElement, resp.payload.userId))

Zoom Service:

this.zoomClient = ZoomInstant.createClient();  
const observable = from(this.zoomClient.init(‘en-US’, window.location.origin + ‘/assets/js/@zoomus/instantsdk/dist/lib’));  
this.zoomMediaStream = this.zoomClient.getMediaStream();

// Register callback for active-share-change event

this.zoomClient.on(‘active-share-change’, this.onActiveShareChange$);

getZoomMediaStream(): typeof Stream {  
return this.zoomMediaStream;  
}

Regards,  
Dono

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 20, 2021, 6:55pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/6 "2021-08-20T18:55:56Z")

</div>

Thanks @dharjanto ,

> [@dharjanto](#):
>
> const observable = from(this.zoomClient.init(‘en-US’, window.location.origin + ‘/assets/js/@zoomus/instantsdk/dist/lib’));

I do notice that you are using the old path for the dependent assets.

With 1.1.3, try this instead, `@zoom/videosdk/dist/lib`

> **[@zoom/videosdk](https://www.npmjs.com/package/@zoom/videosdk)**
>
> Zoom Web Video SDK. Latest version: 1.9.8, last published: 13 days ago. Start using @zoom/videosdk in your project by running \`npm i @zoom/videosdk\`. There are 2 other projects in the npm registry using @zoom/videosdk.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![dharjanto](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dharjanto/32/26046_2.png) [@dharjanto](https://devforum.zoom.us/u/dharjanto)\
**Post date:** [August 21, 2021, 1:27am UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/7 "2021-08-21T01:27:07Z")

</div>

Thank you for you response and thank you for spotting the dependent assets path. I will update that and give it a try.

---

<div class="post-metadata">

**Author:** ![dharjanto](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dharjanto/32/26046_2.png) [@dharjanto](https://devforum.zoom.us/u/dharjanto)\
**Post date:** [August 21, 2021, 4:23pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/8 "2021-08-21T16:23:58Z")

</div>

Hi Tommy,

After replacing the dependent assets path per-your suggestion, the issue with receiving screen share on Firefox is not resolved. Further investigation found that the (receiving) canvas element width and height property are set to 0 after calling startShareView, which make the screen share on Firefox not visible.

I have a workaround for this, by setting the canvas width and height when getting share-content-dimension-change callback and now receiving screen share is displayed on Firefox.

However, I wanted to let you know that when getting share-content-dimension-change callback, the width and height of the payload both are undefined (see screenshot).

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/d/7/d7fc4f1e916f64f9c4e360ace9fc39151ccc69da.png)

The receiving screen share on Chrome is always working, canvas width and height are set accordingly after calling startShareView.

---

<div class="post-metadata">

**Author:** ![nslog0](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/nslog0/32/30313_2.png) [@nslog0](https://devforum.zoom.us/u/nslog0)\
**Post date:** [August 21, 2021, 10:41pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/9 "2021-08-21T22:41:55Z")

</div>

Hello,

I’m having this issue too. How can I solve it?

I use the latest version 1.1.3 and Chrom version 92.  
I got no errors and everything works fine.

Ps. I’m using Vue but this I don’t think is matter because all function in sdk is works

---

<div class="post-metadata">

**Author:** ![dharjanto](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dharjanto/32/26046_2.png) [@dharjanto](https://devforum.zoom.us/u/dharjanto)\
**Post date:** [August 22, 2021, 2:03am UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/10 "2021-08-22T02:03:10Z")

</div>

Hi nslog0,

Video SDK version 1.1.3 on Chrome (which support web codec), rendering a starting screen share requires the use of \<video\> element instead of \<canvas\> element to render the content. This is mentioned in the React sample.

On Firefox, rendering a receiving screen share you need set the \<canvas\> element width and height when you receive share-content-dimention-change event. I posted a screenshot for this workaround earlier.

Here is the code snippet I have:

html:

> ```
> <video *ngIf="zoomService.isSupportWebCodecs();else canvas_share" class="video-canvas_share" #zoomShareCanvas width="{{zoomWidth}}" height="{{zoomHeight}}">
> </video>
> 
> <ng-template #canvas_share>
> <canvas *ngIf="!zoomService.isSupportWebCodecs()" class="video-canvas_share" #zoomShareCanvas width="{{zoomWidth}}" height="{{zoomHeight}}"></canvas>
> </ng-template>
> 
> ```

zoom.service.ts:

> isSupportWebCodecs(): boolean {  
> return typeof (window as any).MediaStreamTrackProcessor === ‘function’  
> }

---

<div class="post-metadata">

**Author:** ![nslog0](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/nslog0/32/30313_2.png) [@nslog0](https://devforum.zoom.us/u/nslog0)\
**Post date:** [August 22, 2021, 10:02am UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/11 "2021-08-22T10:02:23Z")

</div>

Hi dharjanto,

Thank you for your answer. if I change canvas to video tag. what about the starting statement

Does it still look like this?

```auto
       await mediaStream.startVideo();
       await mediaStream.renderVideo(
         this.elm.videoCanvas,
         this.zoomClientId,
         this.videoOptions.width,
         this.videoOptions.height,
         0,
         0,
         this.videoOptions.quality360,
       )

```

I changed to video tag the preview is still blank

---

<div class="post-metadata">

**Author:** ![dharjanto](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dharjanto/32/26046_2.png) [@dharjanto](https://devforum.zoom.us/u/dharjanto)\
**Post date:** [August 22, 2021, 11:28pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/12 "2021-08-22T23:28:15Z")

</div>

Hi nslog0,

My issue was with rendering a screen share on Chrome and Firefox after I upgraded to version 1.1.3.

If you are trying to render a video (not screen share), then you need to use canvas element. If after you changed it to use canvas and you still don’t see the video, check what is the zoomClientId value you pass in the 2nd parameter when calling renderVideo API. That zoomClientId must be the Zoom’s user Id. You can obtain list of users by calling this.zoomClient.getAllUser() and render the video of each user with bVideoOn equals true.

I hope this answer helps 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:** [August 23, 2021, 2:30am UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/13 "2021-08-23T02:30:07Z")

</div>

Hey @dharjanto , @nslog0

Thanks for your feedback. We have found this issue. And it will be fixed in version 1.1.4.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![nslog0](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/nslog0/32/30313_2.png) [@nslog0](https://devforum.zoom.us/u/nslog0)\
**Post date:** [August 25, 2021, 4:52pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/14 "2021-08-25T16:52:59Z")

</div>

> [@vic.yang](#):
>
> it will be fixed in version 1.1.4.

I had a problem with SharedArrayBuffer that cause of cannot render video in the canvas. in the new version it gonna fix?

I fix by using [origin trial](https://developer.chrome.com/origintrials/#/register_trial/-7811493553674125311)  
so what the proper solution to make sure if I deploy my app to server it gonna work for my client?

---

<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:** [August 26, 2021, 2:07am UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/15 "2021-08-26T02:07:12Z")

</div>

Hey @nslog0

Starting from Chrome 92, SharedArrayBuffer OT is required when using Web Video SDK. You can refer to this article [Web Cross-Origin Isolation](https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation) for the detail.

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:** [September 25, 2021, 12:07pm UTC](https://devforum.zoom.us/t/video-not-rendered-on-browser-canvas/55500/16 "2021-09-25T12:07:46Z")

</div>

Closed on September 25, 2021, 12:07pm UTC

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