# INVALID\_OPERATION","reason":"Cannot update mask" **URL:** \ **Category:** Web\ **Created:** [July 5, 2024, 10:56am UTC](https://devforum.zoom.us/t/invalid-operation-reason-cannot-update-mask/113119 "2024-07-05T10:56:28Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![fides-it](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/fides-it/32/51395_2.png) [@fides-it](https://devforum.zoom.us/u/fides-it)\ **Post date:** [July 5, 2024, 10:56am UTC](https://devforum.zoom.us/t/invalid-operation-reason-cannot-update-mask/113119/1 "2024-07-05T10:56:28Z")
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? ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [July 8, 2024, 6:34am UTC](https://devforum.zoom.us/t/invalid-operation-reason-cannot-update-mask/113119/2 "2024-07-08T06:34:43Z")
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 ---
**Author:** ![fides-it](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/fides-it/32/51395_2.png) [@fides-it](https://devforum.zoom.us/u/fides-it)\ **Post date:** [July 8, 2024, 7:21am UTC](https://devforum.zoom.us/t/invalid-operation-reason-cannot-update-mask/113119/3 "2024-07-08T07:21:05Z")
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: ![desied.drawio](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/0/a/0ab57910462ee80e31c60eb951da2d7bd7f6d617.png) 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: ![actual.drawio](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/5/653ccabb63b55426c85e21c7abc5211cfdc94152.png) 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. ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [July 8, 2024, 10:35am UTC](https://devforum.zoom.us/t/invalid-operation-reason-cannot-update-mask/113119/4 "2024-07-08T10:35:11Z")
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`. ![video player](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/3/b/3bbeba59e164ed4a284323a2093bc44ff864d60a.png) 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 ---
**Author:** ![fides-it](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/fides-it/32/51395_2.png) [@fides-it](https://devforum.zoom.us/u/fides-it)\ **Post date:** [July 8, 2024, 11:15am UTC](https://devforum.zoom.us/t/invalid-operation-reason-cannot-update-mask/113119/5 "2024-07-08T11:15:58Z")
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 ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [July 9, 2024, 2:11am UTC](https://devforum.zoom.us/t/invalid-operation-reason-cannot-update-mask/113119/6 "2024-07-09T02:11:56Z")
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 ---
**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\ **Post date:** [August 8, 2024, 12:12pm UTC](https://devforum.zoom.us/t/invalid-operation-reason-cannot-update-mask/113119/7 "2024-08-08T12:12:24Z")
Closed on August 8, 2024, 12:12pm UTC This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.