ostensibly “technical” post on how the stream works

It’s not very exciting. I’m using nginx-rtmp-module, which is available as libnginx-mod-rtmp on Debian-based distros. You put a rtmp directive in your nginx.conf (or your /conf.d/ folder if you’re feeling fancy) that looks something like this.

rtmp {
	server {
		listen 1935;
		chunk_size 4096;
		allow publish 127.0.0.1;
		deny publish all;

		application live {
			live on;
			record off;
			hls on;
			hls_path /var/www/html/stream/hls;
			hls_fragment 1s;
			hls_playlist_length 4s;
		}
	}
}

This starts a server on 1935 that’ll ingest a rtmp stream from OBS or ffmpeg or whatever you want to use, cut it up into little 1 second MPEG transport stream files and give you a m3u8 playlist at /stream/hls/foo.m3u8. Set your broadcast settings to rtmp://127.0.0.1:1935/live with foo as the key. Configure your firewall to let nginx recieve stuff on 1935 from whatever’s sending it the stream.

i just remembered that data destinations are called sinks sometimes. like the rtmp server is a RTMP sink. when i open the sound menu on my mac i am presented with a veritable minefield of sinks because there are like 20 airplay devices in this house

– me, proofreading this post and waiting for the painkillers to hit

Point a video player (I use videojs) at that url, that’s your stream! Good job. Video elements are picky about CORS rules, so if your video player isn’t at the exact same domain as the stream, you’re going to have a bad time. I used relative urls in the player to get around this at first, but you can just slam this in whatever site’s serving the stream files and that should fix it. This probably has security implications but I dont’ care.

	location / {
		add_header Access-Control-Allow-Origin *;
	}
let me out of this code block HELP

Oh okay this is a regular paragraph now, thanks WordPress Gutenberg Editor. Anyway, did I forget anything?

• the eepy cam is a really unreliable $20 ip camera as a obs media source
• hls with 1 second fragments is sort of i/o intensive. if your server provider charges for that, oh boy. i dunno have it put the hls stuff on a ramdisk, it’s only a few megs at any point in time
• the nginx rtmp server breaks like once a week and just refuses to connect until i restart it
• i use tailscale to connect to my server, it’s p nifty. you could roll your own vpn with zerotier or nebula or just plain ‘ol wireguard if you wanted more janitor duties. before that i used a ssh tunnel
• did i mention the bandwidth? streaming 24/7 at like 3 mbps is a terabyte a month or so. i don’t pay for incoming traffic so w/e.
• the box in my house running obs is a dogshit gemini lake celeron mini-pc. it has quick sync tho so it’s barely doing anything except for whatever windows 11 does all day when it’s left alone. indexing the two files on there for search? it is a mystery
• OH! the video player, of course.

Add the videojs player script to your site and add a video player like this.

<video id="player" class="video-js vjs-default-skin" controls>
	<source src="stream/hls/foo.m3u8" type="application/x-mpegURL" />
</video>
<script>
	var options, video;

	options = {
		autoplay: true,
		muted: true,
		fluid: true
	};

	video = videojs('player', options);

</script>

Pretty much every web browser will shit its pants if you try to autoplay video unmuted, but desktop browsers don’t mind if video elements are autoplaying while muted. Mobile browsers are cool with it too, but on that platform the videojs player loads a keyframe and gives you a nice play button.

how the stream worked before i switched to http live streaming

in 2021 when i thought it’d be funny if you could access a camera in my house on my website, i just set up a reverse proxy to a motion jpeg that was output by aforementioned $20 unreliable ip camera. it was pretty close to real-time but was p bandwidth intensive. also don’t tell cloudflare, but at the time i used their cdn product in front of my home ip to deliver it. obvs this is against their tos! i’m just using their dns for the current incarnation of bigyiff.com now.

That’s it!! One day I’ll write about how the “bark” button worked.