When processing a getDispaymedia stream using canvas, it cannot be transmitted at the original resolution. - webRTC

Question

If I just send getDisplayMedia stream, the resolution is transmitted as it is.

However, when I send it using canvas.captureMedia, the resolution is transmitted at a lower quality at first and becomes larger .

Is there a way to send it at that resolution just like sending a getDisplayMedia stream?

case1 : sending the getDisplayMedia stream enter image description here

case2 : sending canvas capture MediaStream enter image description here

Answer 1

It might be related to the canvas size you are using. You might need to change the size of the canvas you are using. Check the size of the video you are getting, e.g. 1280 * 680 and then set a same size canvas. That way it might be same resolution.

For setting the correct canvas size checkout here: https://en.wikipedia.org/wiki/Canvas_element#Canvas_element_size_versus_drawing_surface_size

As it suggests I understand you need at least the drawing surface changed to a desirable value, proably same as your video streams video track sizes.

You can request the vdeo stream with width and height options while calling getUserMedia beforehand. Or at a later stage you can get tracks in your media stream, with getTracks or getVideoTracks methods. Then get settings by MediaStreamTrack.getSettings method. And then check the video track's settings width, height, or even aspectRatio and much more. Then you can use the size values of your video track and apply same to the canvas element you create by setting its width and height attributes to change its drawing surface sizes. If you want to show a smaller canvas element set those in CSS as opposed to drawing surface sizes.