// 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: // 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(); } }