Participant/User video not rendering

Video SDK Web
1

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
image1919×1007 112 KB

image
image781×101 5.39 KB

image
image876×78 6.92 KB

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.

2

Hey @devagyas900 , happy to help!

Please try implementing the SharedArrayBuffer Chrome Origin Trial:

That should fix the issue! :slight_smile:

Thanks,
Tommy

3

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)

4

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
5

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