HLS video style seems to be hard coded for 600x600 #480

rodpayne · 2021-08-02T03:53:25Z

rodpayne
Aug 2, 2021

The HLS video style seems to be hard coded for 600x600. Is there any way to override that, or tell it to use the same height and width as the source rtsp stream, or use 100% of the space available?

I am trying to open a video stream like http://172.19.54.7:8888/front_doorbell/ in an iFrame. I can get the iFrame height and width to be 100%, but the document that is downloaded from rtsp-simple-server has a video style set for 600x600, so no matter how big the iFrame is, it displays a 600x600 block for the video. (This also happens when visiting the URL directly in the browser, without being in an iFrame, so maybe I shouldn't have said anything about the iFrame.)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#video {
	width: 600px;
	height: 600px;
	background: black;
}
</style>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<video id="video" muted controls></video>
<script>

const create = () => {
	const video = document.getElementById('video');

	const hls = new Hls({
		progressive: false,
	});

	hls.on(Hls.Events.ERROR, (evt, data) => {
		if (data.fatal) {
			hls.destroy();

			setTimeout(() => {
				create();
			}, 2000);
		}
	});

	hls.loadSource('stream.m3u8');
	hls.attachMedia(video);

	video.play();
}
create();

</script>

</body>
</html>

The web page shrinks the video down so that it fits within the 600px width, and shows black bars at the top and bottom to fill out the 600px height.

Anyway, I am really loving this rtsp-simple server. I am using it to solve reliability problems with accessing Wyze Cam V2 through rtsp.

Answered by rodpayne

Aug 17, 2021

As @aler9 said, there are a lot of options available, so it doesn't make sense to try to perfect the web page that is in rtsp-simple-server. For what it is worth, the web page that I am working on is camera_video.html.

View full answer

rodpayne · 2021-08-02T15:54:04Z

rodpayne
Aug 2, 2021
Author

I found the code on lines 37 and 38 of internal/core/hls_remuxer.go. Changing 600px to 100% should make it better. If I can figure out how to install Go, I will give it a try.

4 replies

rodpayne Aug 4, 2021
Author

I was able to test my tiny change and it seems to work well, without having to pass parameters in or anything. The video resizes to fit into whatever space is available in a browser window or an iframe. rodpayne/rtsp-simple-server/tree/hls-one-hundred-percent

Before and after:

(I figured out what all make run does, so I did not have to install Go after all. But I did have to install Docker and Make on Windows.)

aler9 Aug 7, 2021
Maintainer

Hello, the integrated web player is basically for testing, but nothing prevents you from creating a web page with all the features you need and use the stream URL (the one ending with stream.m3u8), provided by rtsp-simple-server, into it.

rodpayne Aug 10, 2021
Author

Okay, if it is basically for testing, would it be okay if I submit a PR for the change? It will work just as well for testing with 100% instead of 600x600.

aler9 Aug 14, 2021
Maintainer

video width is 100% starting from v0.17.2

rodpayne · 2021-08-17T03:56:39Z

rodpayne
Aug 17, 2021
Author

As @aler9 said, there are a lot of options available, so it doesn't make sense to try to perfect the web page that is in rtsp-simple-server. For what it is worth, the web page that I am working on is camera_video.html.

1 reply

aler9 Aug 18, 2021
Maintainer

i thought about this, and i decided that width: 100% is more versatile than width: 600px (and this change is included in v0.17.2): the reason is that there are users who are inexperienced with HLS and will certainly try to embed the page inside an <iframe>; thanks to this change, they are able to do so.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HLS video style seems to be hard coded for 600x600 #480

{{title}}

Replies: 2 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

HLS video style seems to be hard coded for 600x600 #480

rodpayne Aug 2, 2021

Replies: 2 comments · 5 replies

rodpayne Aug 2, 2021 Author

rodpayne Aug 4, 2021 Author

aler9 Aug 7, 2021 Maintainer

rodpayne Aug 10, 2021 Author

aler9 Aug 14, 2021 Maintainer

rodpayne Aug 17, 2021 Author

aler9 Aug 18, 2021 Maintainer

rodpayne
Aug 2, 2021

Replies: 2 comments 5 replies

rodpayne
Aug 2, 2021
Author

rodpayne Aug 4, 2021
Author

aler9 Aug 7, 2021
Maintainer

rodpayne Aug 10, 2021
Author

aler9 Aug 14, 2021
Maintainer

rodpayne
Aug 17, 2021
Author

aler9 Aug 18, 2021
Maintainer