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); 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); this.fetch_new_segments(); } async fetch_new_segments() { while (this.playlist_loader.new_segments.length > 0) { let segment_uri = this.playlist_loader.new_segments.shift(); let segment_stream = await this.fetch_video(segment_uri); this.media_buffer.appendBuffer(segment_stream); } 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(); } }