class PlaylistLoader { constructor() { 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 (response.status == 200) { this.parse_playlist(await response.text()); setTimeout(this.fetch_playlist.bind(this), this.refresh_interval * 1000); } } parse_playlist(playlist_content) { let lines = playlist_content.split('\n'); let segments = []; let segment_block_flag = this.last_segment === null ? false : true; for (let i = 0; i < lines.length; i++) { 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 (lines[i] == this.last_segment) { segment_block_flag = false; } } else { segments.push(lines[i]); } } } this.new_segments = this.new_segments.concat(segments); if (segments.length != 0) { this.last_segment = segments.at(-1); } } } class VideoLoader { constructor(vid_tag_id) { this.stream_key = window.location.pathname.slice(6); 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(_) { 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(); this.resync_video(); this.cleanup_old(); } async cleanup_old() { let timeout = 60000; if (!this.media_buffer.updating) { this.media_buffer.remove(0, this.media_buffer.buffered.end(0) - 10); } 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 (buffer_end - this.player.currentTime > 15) { this.player.currentTime = buffer_end - 5; } } } async fetch_new_segments() { 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); } 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(); } }