black border appeared on the top and bottom of the screen

[wangfuyangsau]

When I tested it on my phone, the black border appeared on the top and bottom of the screen. What is the problem? What should I do?

[drauggres]

Does this problem appear in the original scrcpy?
If not, please attach a screenshot (or does it happen on the device?), I have never seen anything like what you describe.

[wangfuyangsau]

There was no problem with the original scrcpy, and some other phones did not have this problem.

[drauggres]

Does it happen on all included decoders? Also what is the screen resolution of this device?

[wangfuyangsau]

I will try different decoders and check the resolution of the screen later. Thank you very much for your answer. I will contact you again if there is any question.

[wangfuyangsau]

In my tests, only Msedecoder was able to get images, and the device's resolution was 1080x2340.

[drauggres]

It's possible that video tag size does not match actual video size (like than you watch 16:9 video on 4:3 screen you will see the same).

Can you open developer tools while streaming and run in the console this:

var {videoWidth, videoHeight, clientWidth, clientHeight} = document.getElementsByTagName('video')[0];
console.log({videoWidth, videoHeight, clientWidth, clientHeight})

I tried with android emulator (with 1080x2340 resolution), but wasn't able to reproduce: videoWidth and videoHeight were always the same as clientWidth and clientHeight respectively.

As for only MseDecoder working, can you try #25 (comment), and post your results there?

P.S. Also what browser are you testing on?

[wangfuyangsau]

In the native scrcpy screen.c, I found this function and wonder if you have the same treatment in your project.

[drauggres]

Not the same:

1. This project doesn't handle window resizing, everyting below happens only after the start or after Change video settings button is pressed.
2. Client receives ScreenInfo from the server:

   ws-scrcpy/src/DeviceConnection.ts

   Lines 297 to 298 in 79098c6

   	const screenInfo: ScreenInfo = ScreenInfo.fromBuffer(temp);
   	temp = new Buffer(new Uint8Array(e.data, offset, VideoSettings.BUFFER_LENGTH));

   and applies it to Decoder
   3.1 For MseDecoder video tag size is not limited, but only size of its parent element:

   ws-scrcpy/src/decoder/Decoder.ts

   Lines 203 to 217 in 79098c6

   	public setScreenInfo(screenInfo: ScreenInfo): void {
   	this.pause();
   	this.screenInfo = screenInfo;
   	const { width, height } = screenInfo.videoSize;
   	this.touchableCanvas.width = width;
   	this.touchableCanvas.height = height;
   	if (this.parentElement) {
   	this.parentElement.style.height = `${height}px`;
   	this.parentElement.style.width = `${width}px`;
   	}
   	const size = new Size(width, height);
   	this.resizeListeners.forEach((listener) => {
   	listener.onVideoResize(size);
   	});
   	}

   
   3.2 For other ("canvas based") decoders, the canvas is also resized:

   ws-scrcpy/src/decoder/CanvasCommon.ts

   Lines 145 to 151 in 79098c6

   	public setScreenInfo(screenInfo: ScreenInfo): void {
   	super.setScreenInfo(screenInfo);
   	this.clearState();
   	const { width, height } = screenInfo.videoSize;
   	this.initCanvas(width, height);
   	this.framesList = [];
   	}

The actual video size is never checked, as it is expected to match the value received in ScreenInfo earlier, that is why I asked you run:

var {videoWidth, videoHeight, clientWidth, clientHeight} = document.getElementsByTagName('video')[0];
console.log({videoWidth, videoHeight, clientWidth, clientHeight})

so we could compare them.

P.S. you can post multiline code by surrounding it with triple backtick (`), or include direct permalink to github, e.g.:
https://github.com/NetrisTV/ws-scrcpy/blob/79098c69773cded80b58a4f0e7528fc4cbc9cdcd/src/decoder/CanvasCommon.ts#L145-L151