How to use additionalUserKey and onClick related questions

Video SDK Web
1

Description
I want to give an onClick event to the avatar component that is also rendered in the video-canvas, but only the canvas is clicked continuously when I click in the developer tools. My expectation is that the image is still being rendered on the canvas and it is located on the avatar. Is there a good way?
Second, I want to render the video of the same user on a different canvas. I know I need to use an additionalUserKey, but I need an example or explanation that I can refer to. Can you provide it? Thank you.

image
image1576×868 14.4 KB

2

Hey @Deneb , happy to help! :slight_smile:

Can you clarify this one more? I don’t fully understand.

You can just call renderVideo and pass in the same userId. :slight_smile:

Thanks,
Tommy

3

In this code, i want to give an onClick event to the avatar, but i don’t receive the event because the canvas is constantly on top. I can’t seem to find a good way for the canvas to be placed on top of it while rendering the camera image continuously.
In the second answer, do you mean that you can put the userId that is renderingVideo into the canvas AdditionalUserKey? have a nice day😊

 <div
        className={classnames("video-container", {
          "in-sharing": shareScreenState || layoutChange,
        })}
      >
        <canvas
          className="video-canvas"
          id="video-canvas"
          ref={videoRef}
          width="1920"
          height="1080"
        ></canvas>

        <ul className="avatar-list">
          {visibleParticipants.map((user, index) => {
            if (index > videoLayout.length - 1) {
              return null;
            }
            const dimension = videoLayout[index];
            const { width, height, x, y } = dimension;
            const { height: canvasHeight } = canvasDimension;
            return (
              <Avatar
                participant={user}
                key={user.userId}
                testClick={testClick}
                layoutChange={layoutChange}
                isActive={activeVideo === user.userId}
                style={{
                  width: `${width}px`,
                  height: `${height}px`,
                  top: `${canvasHeight - y - height}px`,
                  left: `${x}px`,
                }}
              />
            );
          })}
        </ul>
      </div>
4

Hey @Deneb

The first one, you can consider setting the zIndex of Avatar component or setting the canvas as pointer-events:none to not react with the click events.

The second one, AdditionalUserKey is used in the case of rendering multiple users with the same userId on the same canvas, the AdditionalUserKey is an extra key combined with userId to identify the unique drawing cell on the canvas. Following is the example:

stream.renderVideo(canvas,111222,200,112,0,0,2,'key1');
// render the same user in different location
stream.renderVideo(canvas,111222,200,112,0,400,2,'key2');

// adjust the position of the second drawing
stream.adjustRenderedVideoPosition(canvas,111222,200,112,200,400,2,'key2');

// stop one of the videos, the other videos of same user id still preserved
stream.stopRenderVideo(canvas,111222,'key1');

Thanks
Vic

1 Like
5

God, I tried z-index, but didn’t know pointer-events:none. Thank you so much for the example below. Have a nice day

1 Like
6

Happy to help! :slight_smile:

-Tommy

7

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