Screen sharing aspect ratio bug

[efron.vit (Efrony)]

Hi!
The method of sharing the screen demonstration stretches the image. It may be correct for the client to display the original image. Because of this behavior, we have inconsistencies in the implementation of drawing tools on canvas.

host:

client:

web video sdk 1.5.0.

[rehema.zoom (Rehema)]

Hi @efron.vit ,

Thank you for your post! Could you share your code snippet for this functionality?

Thanks,
Rehema

[vic.yang (Vic)]

Hey @efron.vit

Thanks for your feedback.

The Video SDK provides the share-content-dimension-change event to get the shared content dimension, on the client side, you can use the stream.updateSharingCanvasDimension method to update the canvas size.

Thanks
Vic

[efron.vit (Efrony)]

Thank you, it helped!

[nguyen.hoangtue (Nguyen)]

@efron.vit
@vic.yang
Hi,
I’m using stream.updateSharingCanvasDimension method to update the canvas size but it’s still have ratio bug

When resize the browser, the canvas size have been updated

Video sdk version

V. 1.5.5

Code Snipet

JS file

shareScreenElement.style.borderTopRightRadius = '0px';
this.updateCanvasStyleSize(shareScreenElement, bodyWidth, bodyHeight);
await this.updateSharingView(bodyWidth, bodyHeight);

receiveScreenElement.style.borderTopRightRadius = '0px';
console.log('RECEIVE SCREEN ELEMENT UPDATE STYLE');
this.updateCanvasStyleSize(receiveScreenElement, bodyWidth, bodyHeight);

HTML file

<canvas
	v-show="isSharingView && !isShareScreen"
	id="receive-sharing-screen-element"
	:width="miniSize.width"
	:height="miniSize.height"
	:class="sharingElementClass"
></canvas>

[vic.yang (Vic)]

Hey @nguyen.hoangtue

Did you get the width and height value from the payload of the share-content-dimension-change event?

Thanks
Vic

[nguyen.hoangtue (Nguyen)]

@vic.yang
Thank you for reply
Yes. I got the with and height value

Code snipet

updateCanvasStyleSize(canvas, width, height) {
	console.log('updateCanvasStyleSize', canvas, width, height);
	try {
		canvas.style.width = `${width}px`;
		canvas.style.height = `${height}px`;
	} catch (e) {
		console.log(e);
	}
},

[vic.yang (Vic)]

Hey @nguyen.hoangtue

Could you call the stream. updateSharingCanvasDimension(width, height) method to update the width/height attribute of the canvas?

A gentle reminder, the styled width/height is different from the attribute width/height of the canvas.

Thanks
Vic

[j.schoenemeyer (Jürgen)]

try

updateCanvasStyleSize(canvas, width, height) {
	console.log('updateCanvasStyleSize', canvas, width, height);
	try {
		canvas.width  = width;
		canvas.height = height;
	} catch (e) {
		console.log(e);
	}
},

does this give a different result?