hls-player-js/hls-player.js

// handles loading the playlist file
class PlaylistLoader {
	constructor() {
		// to work with the stream-server impl
		this.playlist_src = '/list/' + window.location.pathname.slice(6);
		this.last_segment = null;
		this.refresh_interval = null;
		this.new_segments = [];
		this.fetch_playlist();
	}

	async fetch_playlist() {
		const response = await fetch(this.playlist_src);
		// if returns a 404, means stream ended and playlist was deleted by cleanup
		// if success, parse the file and fetch playlist again after n ms
		if (response.status == 200) {
			this.parse_playlist(await response.text());
			setTimeout(this.fetch_playlist.bind(this), this.refresh_interval * 1000);
		}
	}

	// degraded m3u8 parsing
	// impl only cares about segment uris, the target duration length
	// assumes this is not the main manifest file so no switching
	// assumes init fragment is init.mp4
	parse_playlist(playlist_content) {
		let lines = playlist_content.split('\n');
		let segments = [];
		let segment_block_flag = this.last_segment === null ? false : true; // for first passthrough
		for (let i = 0; i < lines.length; i++) {
			// sets segment fetch frequency
			if (lines[i].startsWith("#")) {
				if (lines[i].startsWith("EXT-X-TARGETDURATION", 1)) {
					this.refresh_interval = parseFloat(lines[i].split(':')[1]);
				}
			} else {
				if (segment_block_flag || lines[i] == '') {
					// if the current segment line contains the last "acked" segment
					// "ack" any following segments
					if (lines[i] == this.last_segment) {
						segment_block_flag = false;
					}
				} else {
					segments.push(lines[i]);
				}
			}
		}
		// add any segments acked to the segment fetch queue
		this.new_segments = this.new_segments.concat(segments);
		if (segments.length != 0) {
			// update last acked segment to last newly acked segment if any
			this.last_segment = segments.at(-1);
		}
	}
}

// handles the video fetching and source buffering
class VideoLoader {
	// entry point, should just be able to use this by adding this script:
	// <script>let x = new VideoLoader('video_tag_id');</script>
	constructor(vid_tag_id) {
		// only relevant to uri construction
		// jank to match the stream-server impl
		this.stream_key = window.location.pathname.slice(6);
		// init playlist loading as a check to see if playlist is even live
		this.playlist_loader = new PlaylistLoader();
		this.player = document.getElementById(vid_tag_id);
		this.media_source = new MediaSource();
		this.media_source.addEventListener('sourceopen', this.prepare_buffer.bind(this));
		this.player.src = window.URL.createObjectURL(this.media_source);
	}
	
	async prepare_buffer(_) {
		// fetch init.mp4 fragment and parse its mimetype
		// codec info is needed for MediaSource compat
		let init_frag = await this.fetch_video('/vid/' + this.stream_key + '/init.mp4');
		let mime = (new MP4Tree(init_frag)).get_mime();
		if (!MediaSource.isTypeSupported(mime)) {
			return;
		}
		this.media_buffer = this.media_source.addSourceBuffer(mime);
		this.media_buffer.mode = 'segments';
		this.media_buffer.appendBuffer(init_frag);
		await this.fetch_new_segments(); // next functions rely on some data being bufferred already
		this.resync_video();
		this.cleanup_old();
	}

	async cleanup_old() {
		// remove old segments every 1 min
		let timeout = 60000;
		// if removal cannot happen since buffer is busy, try again in a bit
		if (!this.media_buffer.updating && this.media_buffer.buffered.end(0) - 60 > this.media_buffer.buffered.start(0)) {
			// remove segments that are older than 1min behind the current end of buffer
			this.media_buffer.remove(0, this.media_buffer.buffered.end(0) - 60);
		} else {
			timeout = 250;
		}
		setTimeout(this.cleanup_old.bind(this), timeout);
	}

	async resync_video() {
		if (!this.media_buffer.updating) {
			const buffer_end = this.media_buffer.buffered.end(0);
			// if video is over 15s behind, seek to 5s behind current end.
			// not called on loop, only once on start
			if (buffer_end - this.player.currentTime > 15) {
				this.player.currentTime = buffer_end - 5;
			}
		}
	}

	async fetch_new_segments() {
		// for each video in the new segments queue, fetch and append it
		while (this.playlist_loader.new_segments.length > 0) {
			if (!this.media_buffer.updating) {
				let segment_uri = this.playlist_loader.new_segments.shift();
				let segment_stream = await this.fetch_video(segment_uri);
				this.media_buffer.appendBuffer(segment_stream);
			}
			// wait between each append try to let processing finish
			await new Promise(r => setTimeout(r, 250));
		}
		setTimeout(this.fetch_new_segments.bind(this), this.playlist_loader.refresh_interval * 1000);
	}

	async fetch_video(uri) {
		const response = await fetch(uri);
		return response.arrayBuffer();
	}
}