08 Jun 2024

setting up livestream with ffmpeg

2 minutes reading time

#Server

on the server create a directory which can be accessed through http, and create the following file.

# file: stream.sh

ffmpeg -i "srt://0.0.0.0:1337?mode=listener&latency=250000" \
	-filter_complex "[v:0]split=2[vtemp001][vout001];[vtemp001]scale=w=1280:h=720[vout002]" \
	-preset veryfast -g 25 -sc_threshold 0 \
	-map [vout001] -c:v:1 libx264 -b:v:1 6000k \
	-map [vout002] -c:v:1 libx264 -b:v:1 2000k \
	-map a:0 \
	-map a:0 \
	-c:a aac -b:a 128k -ac 2 \
	-f hls -lhls 1 -hls_time 0.5 \
	-g 30 \
	-hls_list_size 3 -hls_delete_threshold 1 -hls_flags delete_segments+independent_segments \
	-master_pl_name main.m3u8 \
	-hls_segment_filename stream_%v/data%06d.ts \
	-var_stream_map "v:0,a:0 v:1,a:1" stream_%v/stream.m3u8

TODO: explain what each part of this command actually does so i don't forget it myself.

create a html page with a videojs player with the videojs-hls-quality-selector addon.

# file: index.html

<!DOCTYPE html>
<html>
	<head>
		<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
		<style>
body {
	background-color: rgb(30, 30, 46);
	color: rgb(245, 194, 231);
}
		</style>
	</head>
	<body>
		<center>
			<h1>It's a video stream ain't it</h1>
			<video-js id=vid1 height=600 class="vjs-default-skin" controls>
				<source
						src="https://live.ragarock.moe/main.m3u8"
						type="application/x-mpegURL">
			</video-js>
			<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
			<script src="jb-videojs-hls-quality-selector.min.js"></script>
			<script>
				var player = videojs('vid1');
				player.qualityLevels();
				document.addEventListener('DOMContentLoaded', function () {
					player.ready(function () {
						player.hlsQualitySelector({
							displayCurrentQuality: true,
						});
					});
				});
			</script>
		</center>
	</body>
</html>