# Participant/User video not rendering

**URL:** <https://devforum.zoom.us/t/participant-user-video-not-rendering/58089>\
**Category:** Web\
**Created:** [September 28, 2021, 9:42am UTC](https://devforum.zoom.us/t/participant-user-video-not-rendering/58089 "2021-09-28T09:42:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![devagyas900](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/devagyas900/32/31064_2.png) [@devagyas900](https://devforum.zoom.us/u/devagyas900)\
**Post date:** [September 28, 2021, 9:42am UTC](https://devforum.zoom.us/t/participant-user-video-not-rendering/58089/1 "2021-09-28T09:42:01Z")

</div>

**Description**  
I am developing my application in Angular and the videos don’t seem to render.  
I am injecting one canvas element for each user using the ngFor directive in the DOM. However, none of the videos seem to render in the respective canvases.

**Error**  
None

**Which Web Video SDK version?**  
“@zoom1234/videosdk”: “^1.1.4”,

**To Reproduce(If applicable)**

**Screenshots**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/7/9714d3587d41ada1d0c83061e19f3ec279d8996a.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/e/9ef3f07f4e8b25f3690815fcfde777426d7dab28.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/d/1/d14f0cccf5054af6552cc46226877daa14a0bb59.png)

If you can see, I have the video turned on and also logged the canvas element in the console. I am passing the correct User ID and and the Canvas Element.  
If you see the third screenshot, I am using the ngFor directive to render the canvas elements and this seems to be the issue.

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

- Browser: Brave/Chrome
- Browser Version: [Version 1.29.81 Chromium: 93.0.4577.82 (Official Build) (64-bit)  
 ](https://brave.com/latest/)

**Additional context**  
I want to render the videos for each participant in a separate canvas as it makes easier for me to manage the layout. If there is a way I can do that, it’d be amazing.

---

<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:** [September 28, 2021, 2:25pm UTC](https://devforum.zoom.us/t/participant-user-video-not-rendering/58089/2 "2021-09-28T14:25:32Z")

</div>

Hey @devagyas900 , happy to help!

Please try implementing the SharedArrayBuffer Chrome Origin Trial:

> **[Web Cross-Origin Isolation - Advanced Guides - Web - Meeting SDKs - Zoom...](https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation)**
>
> Web Cross-Origin Isolation
> 
> To optimize Web SDK performance on Chrome, follow the steps below to enable origin trials for SharedArrayBuffers in non-isol...

That should fix the issue! 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![devagyas900](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/devagyas900/32/31064_2.png) [@devagyas900](https://devforum.zoom.us/u/devagyas900)\
**Post date:** [October 6, 2021, 10:25am UTC](https://devforum.zoom.us/t/participant-user-video-not-rendering/58089/3 "2021-10-06T10:25:20Z")

</div>

The problem does not resolve with that.  
The video stream does not bind to the canvas if it is rendered using ngFor.  
If I place a canvas element statically and pass that as the input then the video does render correctly (in Firefox browser only, not in Chrome/Brave)

---

<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:** [October 6, 2021, 6:27pm UTC](https://devforum.zoom.us/t/participant-user-video-not-rendering/58089/4 "2021-10-06T18:27:28Z")

</div>

Hey @devagyas900 ,

Instead of using an ngFor approach, we suggest display all participant videos in one single canvas. You can render each video stream in sections of the single canvas using the x and y cords.

[https://marketplacefront.zoom.us/sdk/custom/web/modules/stream.html#rendervideo](https://marketplacefront.zoom.us/sdk/custom/web/modules/stream.html#rendervideo)

Example: [sample-app-videosdk/useRenderVideo.ts at master · zoom/sample-app-videosdk · GitHub](https://github.com/zoom/sample-app-videosdk/blob/master/react-demo/src/feature/video/hooks/useRenderVideo.ts#L37)

Thanks,  
Tommy

---

<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:** [November 6, 2021, 4:27am UTC](https://devforum.zoom.us/t/participant-user-video-not-rendering/58089/5 "2021-11-06T04:27:57Z")

</div>

Closed on November 6, 2021, 4:27am UTC

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