INVALID_OPERATION","reason":"Cannot update mask"

[fides-it (Dennis)]

Hi, I’m back

I’m developing an app with Zoom Video SDK for Web (version I’m using now is @zoom/videosdk v1.11.6) using the attachVideo (videoplayer) method which uses a single HTMLCanvasElement

What I’m trying to achieve: I want to zoom on one participant. My approach is as follows:

• create a container DIV around the video-player in question
• set transform-scale & transform-origin on the DIV.

This scales the rendered video, but I want to clip the result so the video stays within the original frame. I’m trying to use the “mask” feature of the SDK for that by providing the correct clip rectangle, e.g.:

{“clip”:{“x”:320,“y”:180,“width”:640,“height”:360,“type”:“rectangle”}}

but I keep getting this error:

{“type”:“INVALID_OPERATION”,“reason”:“Cannot update mask”}

Any idea what could be wrong? Is there an easier way to achieve the zooming with correct clipping?

[vic.yang (Vic)]

Hey @fides-it

Thanks for your feedback.

This scales the rendered video, but I want to clip the result so the video stays within the original frame.

I don’t quite understand the effect you want to achieve. Can you share a sketch of your idea?

As for the mask feature, it is a video effect on the sending side, similar to the virtual background.

Thanks
Vic

[fides-it (Dennis)]

Hi Vic,

Apoligies for the confusion, I’ll try to elaborate a bit more.

When the user presses a Zoom In button, his/her captured video feed needs to be zoomed in from the center (50%/50%) with 2x zoom:

The video of the user needs to stay within the original frame that was rendered on the screen. So let’s assume:

• the size of the html canvas holding the multiple participants is 1920x1080
• the video for the participant that needs to be zoomed in is a tile on this canvas (shown via videoplayer element) with dimensions 480x270.

when the user activates the Zoom In function, I want to see the center of his/her image scaled up with 200%, where the outer edges should be clipped to prevent the feed from overlapping with other tiles. So the image should stay within the 480x270 tile. I tried to use css transform transform-scale on a wrapper DIV (wrapper of the video-player element) for that, but the result is this:

Using CSS overflow: none does not help, which I think was mentioned before on this forum. Probably the Zoom SDK listens to html/css changes on the video player element and translates that to the rendering on the HTMLCanvas, but doesn’t support CSS overflow settings? not sure…

So in order to get it to work, I decided to try out the “mask” feature on the sender side to clip the feed straight in the source, so when the feed would be zoomed in using the transform-scale method (I used notifications to achieve this for all participants), it would show correctly.

[vic.yang (Vic)]

Hey @fides-it

Thank you for sharing the illustration; I understand the effect you want to achieve.

This is currently a limitation of the VideoSDK rendering.

The actual video content is rendered on the canvas within the video-player-container. When a video tile is zoomed in, the video content is enlarged and drawn on the video-player-container. Setting CSS overflow: hidden on its child elements does not apply to the canvas element within the video-player-container, so you see the video content exceeding the boundaries while the video player is restricted by overflow: hidden.

A workaround that isn’t ideal is to give each video player its own video-player-container. However, this is not recommended because it would significantly impact video performance and quality.

We are also continuing to improve the video user experience. Soon, we will be launching a new video solution that is compatible with WebRTC video, which will help you achieve the desired effect.

Thanks
Vic

[fides-it (Dennis)]

Hi Vic, thanks for your swift reply. Can the mask feature be used as a workaround?
I’m looking forward to the WebRTC solution btw, sounds like it will make life a little easier

[vic.yang (Vic)]

Hey @fides-it

Can the mask feature be used as a workaround?

It might not work, as the mask feature is effective on the video-sending end and does not meet your Zoom-in functionality requirements.

Thanks
Vic