Participant/User video not rendering

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?
@zoom/videosdk”: “^1.1.4”,

To Reproduce(If applicable)

Screenshots



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):

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.

Hey @devagyas900 , happy to help!

Please try implementing the SharedArrayBuffer Chrome Origin Trial:

That should fix the issue! :slight_smile:

Thanks,
Tommy

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)

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

Example: sample-app-videosdk/useRenderVideo.ts at master · zoom/sample-app-videosdk · GitHub

Thanks,
Tommy

1 Like