Question about creating and rendering a participant canvas

Deneb · August 23, 2021, 6:17am

Description
Currently, all participants’ videos are being rendered on one canvas.

Which Web Video SDK version?
1.1.3

Additional context
At first, the canvas was created through the participant array rendering and rendered by giving the participant userId as an id value to the canvas, but the re-rendering and the phenomenon that the rendered camera image stops when the 2nd participant out of the 3 users leaves is repeated. . Currently, the participant’s videos are superimposed on one canvas.
I want to render the component that is created every time a participant comes in. Is there a better way than assigning the userId to the corresponding canvas id value? I’ve seen the sample app, but I’m getting my understanding wrong.
I’m still inexperienced, so I hope you can help.

vic.yang · August 23, 2021, 8:18am

Hey @Deneb

Thanks for your feedback.

What’s your concern about video rendering? The dimension and position of the video depending on the parameters of stream.renderVideo. We suggest using a single canvas to hold these videos.

As the way of the sample app does, an array of participants serve as the state of videos. Listen to the user-added, user-updated and user-removed events to obtain participants’ video status. Then figure out the layout of each video cell. Finally, invoke the stream.renderVideo method to draw the video.

Thanks
Vic

Deneb · August 23, 2021, 8:24am

Thank you very much for your reply. Are you saying that you need to output video of multiple participants in one canvas?
In the first attempt, the screens of several participants overlapped on one canvas, so I assigned each canvas as userId. After hearing the answers, I found the correct way. Is there a guideline source that divides the participant’s screen into one canvas? I’ve been looking for it, but I can’t find it

tommy · August 23, 2021, 7:43pm

Hey @Deneb ,

Happy to hear you found the correct way!

Yes! We have a great example of gallery view on our Video SDK Sample App:

github.com

zoom/videosdk-web-sample/blob/master/react-demo/src/feature/video/hooks/useGalleryLayout.ts

import { useCallback, useEffect, useState, MutableRefObject } from 'react';
import { getVideoLayout } from '../video-layout-helper';
import { useRenderVideo } from './useRenderVideo';
import { Dimension, Pagination, CellLayout } from '../video-types';
import { ZoomClient, MediaStream, Participant } from '../../../index-types';
import { useParticipantsChange } from './useParticipantsChange';
/**
 * Default order of video:
 *  1. video's participants first
 *  2. self on the second position
 */
export function useGalleryLayout(
  zmClient: ZoomClient,
  mediaStream: MediaStream | null,
  isVideoDecodeReady: boolean,
  videoRef: MutableRefObject<HTMLCanvasElement | null>,
  dimension: Dimension,
  pagination: Pagination
) {
  const [visibleParticipants, setVisibleParticipants] = useState<Participant[]>([]);

This file has been truncated. show original

Thanks,
Tommy

Deneb · August 24, 2021, 12:18am

thank you. May your day be full of good things

tommy · August 24, 2021, 6:56pm

Happy to help!

-Tommy

system · September 24, 2021, 4:57am

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

Topic		Replies	Views
Participants video not rendered Web	16	1764	September 1, 2021
Cannot Render Video When 2nd Participant Joins Session Web api , video-sdk	2	299	January 31, 2024
Can I render to galleries on one page with two different canvas elements? Video SDK	4	213	June 26, 2023
Zoom video sdk Participants are not visible in the canvas Web	3	501	January 22, 2023
Each webpage only renders the current participant's video Video SDK	0	139	July 6, 2023

Question about creating and rendering a participant canvas

Related Topics