Hls: manually fetch segments and control playback stream level

p2p-media-loader-demo/src/App.tsx

@@ -182,7 +182,7 @@ function App() {
   };
 
   const onVideoUrlChange = (url: string) => {
-    localStorage.url = url;
+    localStorage.videoUrl = url;
     setUrl(url);
     destroyAndWindowPlayer();
   };

packages/p2p-media-loader-hlsjs/src/services/engine.ts

@@ -21,7 +21,7 @@ export class Engine {
       this.segmentManager.processMasterManifest(data);
     });
 
-    hls.on("hlsLevelLoaded" as Events.LEVEL_LOADED, (event, data) => {
+    hls.on("hlsLevelUpdated" as Events.LEVEL_UPDATED, (event, data) => {
       this.segmentManager.setPlaylist(data);
     });
   }

packages/p2p-media-loader-hlsjs/src/services/fragment-loader.ts

@@ -1,14 +1,14 @@
 import type {
+  FragmentLoaderContext,
+  HlsConfig,
   Loader,
   LoaderCallbacks,
   LoaderConfiguration,
-  LoaderStats,
-  FragmentLoaderContext,
-  HlsConfig,
   LoaderContext,
+  LoaderStats,
 } from "hls.js";
 import { SegmentManager } from "./segment-mananger";
-import { Segment } from "./playlist";
+import { ByteRange, Segment } from "./playlist";
 import Debug from "debug";
 
 export class FragmentLoaderBase implements Loader<FragmentLoaderContext> {
@@ -18,7 +18,9 @@ export class FragmentLoaderBase implements Loader<FragmentLoaderContext> {
   stats: LoaderStats;
   defaultLoader: Loader<LoaderContext>;
   segmentManager: SegmentManager;
-  private debug = Debug("p2pml:fragment-loader");
+  response?: { status: number; data: ArrayBuffer; url: string; ok: boolean };
+  abortController: AbortController = new AbortController();
+  private debug = Debug("hls:fragment-loading");
 
   constructor(config: HlsConfig, segmentManager: SegmentManager) {
     this.segmentManager = segmentManager;
@@ -34,32 +36,134 @@ export class FragmentLoaderBase implements Loader<FragmentLoaderContext> {
     this.context = context;
     this.config = config;
     this.callbacks = callbacks;
-    this.defaultLoader.load(context, config, {
-      ...callbacks,
-      onSuccess: (response, stats, context, networkDetails) => {
-        const { rangeStart: start, rangeEnd: end } = context;
-        const segmentId = Segment.getSegmentLocalId(context.url, {
-          start,
-          end: end !== undefined ? end - 1 : undefined,
-        });
-        const playlist = this.segmentManager.getPlaylistBySegmentId(segmentId);
-        this.debug(
-          "downloaded segment from playlist\n",
-          `playlist v: ${playlist?.index}\n`,
-          `segment: `,
-          playlist?.segments.get(segmentId)?.index
-        );
-
-        return callbacks.onSuccess(response, stats, context, networkDetails);
+    const stats = this.stats;
+
+    const playlist = this.identifyPlaylist(context);
+    if (!playlist) {
+      return this.defaultLoader.load(context, config, callbacks);
+    }
+
+    let byteRange: ByteRange | undefined;
+    const { rangeStart, rangeEnd } = context;
+    if (
+      rangeStart !== undefined &&
+      rangeEnd !== undefined &&
+      rangeEnd > rangeStart
+    ) {
+      byteRange = { start: rangeStart, end: rangeEnd };
+    }
+    try {
+      this.response = await this.fetchSegment(context.url, byteRange);
+    } catch (error) {
+      if (!this.stats.aborted) {
+        return this.handleError(error as { code: number; text: string });
+      }
+    }
+    if (!this.response) return;
+    const { loading } = stats;
+    const loadedBytes = this.response.data.byteLength;
+    loading.first = performance.now();
+    loading.end = performance.now() + 1;
+
+    const { bandwidth, loadingStartTime } = this.getLoadingStatByTargetBitrate({
+      targetLevelBitrate: 1650064,
+      aboveLevelBitrate: 2749539,
+      loadingEndTime: loading.first,
+      loadedBytes,
+    });
+
+    loading.start = loadingStartTime;
+    stats.bwEstimate = bandwidth;
+    stats.total = stats.loaded = loadedBytes;
+
+    callbacks.onSuccess(
+      {
+        url: this.response.url,
+        code: this.response.status,
+        data: this.response.data,
       },
+      this.stats,
+      context,
+      this.response
+    );
+  }
+
+  private identifyPlaylist(context: LoaderContext) {
+    const { rangeStart: start, rangeEnd: end } = context;
+    const segmentId = Segment.getSegmentLocalId(context.url, {
+      start,
+      end,
     });
+
+    const playlist = this.segmentManager.getPlaylistBySegmentId(segmentId);
+    this.debug(
+      "downloaded segment from playlist\n",
+      `playlist v: ${playlist?.index}\n`,
+      `segment: `,
+      playlist?.segments.get(segmentId)?.index,
+      `bitrate: ${playlist?.bitrate}`
+    );
+    return playlist;
+  }
+
+  getLoadingStatByTargetBitrate({
+    loadedBytes,
+    targetLevelBitrate,
+    aboveLevelBitrate,
+    loadingEndTime,
+  }: {
+    targetLevelBitrate: number;
+    aboveLevelBitrate: number;
+    loadingEndTime: number;
+    loadedBytes: number;
+  }) {
+    const bites = loadedBytes * 8;
+    const bitrateDiff = aboveLevelBitrate - targetLevelBitrate;
+    const targetBandwidth = Math.round(targetLevelBitrate + bitrateDiff * 0.4);
+    const timeForLoading = Math.round((bites / targetBandwidth) * 1000);
+    const loadingStartTime = loadingEndTime - timeForLoading;
+    return { loadingStartTime, bandwidth: targetBandwidth };
+  }
+
+  async fetchSegment(segmentUrl: string, byteRange?: ByteRange) {
+    const headers = new Headers();
+
+    if (byteRange) {
+      const { start, end } = byteRange;
+      const byteRangeString = `bytes=${start}-${end}`;
+      headers.set("Range", byteRangeString);
+    }
+    const response = await fetch(segmentUrl, {
+      headers,
+      signal: this.abortController.signal,
+    });
+    const data = await response.arrayBuffer();
+    const { status, url, ok } = response;
+
+    return { status, data, url, ok };
+  }
+
+  private abortInternal() {
+    if (!this.response?.ok) {
+      this.abortController.abort();
+      this.stats.aborted = true;
+    }
+  }
+
+  private handleError(error: { code: number; text: string }) {
+    this.callbacks?.onError(error, this.context, undefined, this.stats);
   }
 
   abort() {
+    this.abortInternal();
+    this.callbacks?.onAbort?.(this.stats, this.context, {});
     this.defaultLoader.abort();
   }
 
   destroy() {
     this.defaultLoader.destroy();
+    this.abortInternal();
+    this.callbacks = null;
+    this.config = null;
   }
 }

packages/p2p-media-loader-hlsjs/src/services/playlist.ts

@@ -10,20 +10,24 @@ export class Playlist {
   id: string;
   index: number;
   type: SegmentType;
+  bitrate: number;
   segments: Map<string, Segment> = new Map();
 
   constructor({
     masterManifestUrl,
     index,
     type,
+    bitrate,
   }: {
     masterManifestUrl: string;
     index: number;
     type: SegmentType;
+    bitrate: number;
   }) {
     this.index = index;
     this.type = type;
     this.id = `${getUrlWithoutParameters(masterManifestUrl)}-${type}-V${index}`;
+    this.bitrate = bitrate;
   }
 }
 

packages/p2p-media-loader-hlsjs/src/services/segment-mananger.ts

@@ -1,5 +1,5 @@
 import { Playlist, Segment } from "./playlist";
-import type { LevelLoadedData, ManifestLoadedData } from "hls.js";
+import type { ManifestLoadedData, LevelUpdatedData } from "hls.js";
 
 export class SegmentManager {
   isLive?: boolean;
@@ -17,20 +17,30 @@ export class SegmentManager {
       if (this.playlists.has(level.url)) return;
       this.playlists.set(
         level.url,
-        new Playlist({ type: "video", index, masterManifestUrl: url })
+        new Playlist({
+          type: "video",
+          index,
+          masterManifestUrl: url,
+          bitrate: level.bitrate,
+        })
       );
     });
 
     audioTracks.forEach((track, index) => {
       if (this.playlists.has(track.url)) return;
       this.playlists.set(
         track.url,
-        new Playlist({ type: "audio", index, masterManifestUrl: url })
+        new Playlist({
+          type: "audio",
+          index,
+          masterManifestUrl: url,
+          bitrate: track.bitrate,
+        })
       );
     });
   }
 
-  setPlaylist(data: LevelLoadedData) {
+  setPlaylist(data: LevelUpdatedData) {
     const {
       details: { url, fragments, live },
     } = data;