P2P loader.

p2p-media-loader-demo/package.json

@@ -27,6 +27,7 @@
     "@types/react-dom": "^18.2.4",
     "@vitejs/plugin-react": "^4.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.1"
+    "eslint-plugin-react-refresh": "^0.4.1",
+    "vite-plugin-node-polyfills": "^0.14.1"
   }
 }

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

@@ -1,10 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Engine as HlsJsEngine } from "p2p-media-loader-hlsjs";
 import { Engine as ShakaEngine } from "p2p-media-loader-shaka";
 import Hls from "hls.js";
 import DPlayer from "dplayer";
 import shakaLib from "shaka-player";
 import muxjs from "mux.js";
+import debug from "debug";
 
 window.muxjs = muxjs;
 
@@ -49,12 +50,41 @@ function App() {
     localStorage.player
   );
   const [url, setUrl] = useState<string>(localStorage.streamUrl);
-  const shakaEngine = useRef<ShakaEngine>(new ShakaEngine(shakaLib));
-  const hlsEngine = useRef<HlsJsEngine>(new HlsJsEngine());
   const shakaInstance = useRef<shaka.Player>();
   const hlsInstance = useRef<Hls>();
   const containerRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
+  const shakaEngine = useRef<ShakaEngine>(new ShakaEngine(shakaLib));
+
+  const [httpLoaded, setHttpLoaded] = useState<number>(0);
+  const [p2pLoaded, setP2PLoaded] = useState<number>(0);
+  const [httpLoadedGlob, setHttpLoadedGlob] = useLocalStorageItem<number>(
+    "httpLoaded",
+    0,
+    (v) => v.toString(),
+    (v) => (v !== null ? +v : 0)
+  );
+  const [p2pLoadedGlob, setP2PLoadedGlob] = useLocalStorageItem<number>(
+    "p2pLoaded",
+    0,
+    (v) => v.toString(),
+    (v) => (v !== null ? +v : 0)
+  );
+
+  const hlsEngine = useRef<HlsJsEngine>(
+    new HlsJsEngine({
+      onSegmentLoaded: (byteLength, type) => {
+        const MBytes = getMBFromBytes(byteLength);
+        if (type === "http") {
+          setHttpLoaded((prev) => round(prev + MBytes));
+          setHttpLoadedGlob((prev) => round(prev + MBytes));
+        } else if (type === "p2p") {
+          setP2PLoaded((prev) => round(prev + MBytes));
+          setP2PLoadedGlob((prev) => round(prev + MBytes));
+        }
+      },
+    })
+  );
 
   useEffect(() => {
     if (
@@ -150,6 +180,7 @@ function App() {
           customHls: (video: HTMLVideoElement) => {
             const hls = new Hls({
               ...engine.getConfig(),
+              liveSyncDurationCount: 7,
             });
             engine.initHlsJsEvents(hls);
             hls.loadSource(video.src);
@@ -159,6 +190,7 @@ function App() {
         },
       },
     });
+    player.play();
     setPlayerToWindow(player);
   };
 
@@ -180,10 +212,8 @@ function App() {
   };
 
   const createNewPlayer = () => {
-    if (!localStorage.videoUrl) {
-      localStorage.streamUrl = streamUrl.live2;
-      setUrl(streamUrl.live2);
-    }
+    setHttpLoadedGlob(0);
+    setP2PLoadedGlob(0);
     switch (playerType) {
       case "hls-dplayer":
         initHlsDplayer(url);
@@ -214,54 +244,192 @@ function App() {
   };
 
   return (
-    <div style={{ textAlign: "center", width: 1000, margin: "auto" }}>
-      <div style={{ marginBottom: 20 }}>
-        <h1>This is Demo</h1>
-        <div style={{ textAlign: "start" }}>
-          <select
-            value={playerType}
-            onChange={(event) =>
-              onPlayerTypeChange(event.target.value as Player)
-            }
-          >
-            {players.map((player) => {
-              return (
-                <option key={player} value={player}>
-                  {player}
-                </option>
-              );
-            })}
-          </select>
-          <select
-            value={url}
-            onChange={(event) => onVideoUrlChange(event.target.value)}
-          >
-            {Object.entries(streamUrl).map(([name, url]) => {
-              return (
-                <option key={name} value={url}>
-                  {name}
-                </option>
-              );
-            })}
-          </select>
-          <button onClick={createNewPlayer}>Create new player</button>
-          <button onClick={loadStreamWithExistingInstance}>
-            Load stream with existing hls/shaka instance
-          </button>
+    <div style={{ width: 1000, margin: "auto" }}>
+      <div style={{ textAlign: "center" }}>
+        <div style={{ marginBottom: 20 }}>
+          <h1>This is Demo</h1>
+          <div style={{ textAlign: "start" }}>
+            <select
+              value={playerType}
+              onChange={(event) =>
+                onPlayerTypeChange(event.target.value as Player)
+              }
+            >
+              {players.map((player) => {
+                return (
+                  <option key={player} value={player}>
+                    {player}
+                  </option>
+                );
+              })}
+            </select>
+            <select
+              value={url}
+              onChange={(event) => onVideoUrlChange(event.target.value)}
+            >
+              {Object.entries(streamUrl).map(([name, url]) => {
+                return (
+                  <option key={name} value={url}>
+                    {name}
+                  </option>
+                );
+              })}
+            </select>
+            <button onClick={createNewPlayer}>Create new player</button>
+            <button onClick={loadStreamWithExistingInstance}>
+              Load stream with existing hls/shaka instance
+            </button>
+          </div>
+        </div>
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <div
+            ref={containerRef}
+            id="player-container"
+            style={{ width: 1000 }}
+          ></div>
         </div>
+        {!!playerType && ["hlsjs", "shaka-player"].includes(playerType) && (
+          <video ref={videoRef} controls muted style={{ width: 800 }} />
+        )}
       </div>
-      <div style={{ display: "flex", justifyContent: "center" }}>
-        <div
-          ref={containerRef}
-          id="player-container"
-          style={{ width: 1000 }}
-        ></div>
+      <div style={{ textAlign: "left" }}>
+        <LoadStat title="Local stat" http={httpLoaded} p2p={p2pLoaded} />
+        <LoadStat
+          title="Global stat"
+          http={httpLoadedGlob}
+          p2p={p2pLoadedGlob}
+        />
+        <LoggersSelect />
       </div>
-      {!!playerType && ["hlsjs", "shaka-player"].includes(playerType) && (
-        <video ref={videoRef} controls muted style={{ width: 800 }} />
-      )}
     </div>
   );
 }
 
 export default App;
+
+function LoadStat({
+  http,
+  p2p,
+  title,
+}: {
+  http: number;
+  p2p: number;
+  title: string;
+}) {
+  const sum = http + p2p;
+  return (
+    <div style={{ textAlign: "left" }}>
+      <h4 style={{ marginBottom: 10 }}>{title}</h4>
+      <div>
+        Http loaded: {http.toFixed(2)} MB; {getPercent(http, sum)}%
+      </div>
+      <div>
+        P2P loaded: {p2p.toFixed(2)} MB; {getPercent(p2p, sum)}%
+      </div>
+    </div>
+  );
+}
+
+function LoggersSelect() {
+  const [activeLoggers, setActiveLoggers] = useLocalStorageItem<string[]>(
+    "debug",
+    [],
+    (list) => {
+      setTimeout(() => debug.enable(localStorage.debug), 0);
+      if (list.length === 0) return null;
+      return list.join(",");
+    },
+    (storageItem) => {
+      setTimeout(() => debug.enable(localStorage.debug), 0);
+      if (!storageItem) return [];
+      return storageItem.split(",");
+    }
+  );
+
+  const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setActiveLoggers(
+      Array.from(event.target.selectedOptions, (option) => option.value)
+    );
+  };
+
+  return (
+    <div>
+      <h4 style={{ marginBottom: 10 }}>Loggers: </h4>
+      <select
+        value={activeLoggers}
+        onChange={onChange}
+        multiple
+        style={{ width: 300, height: 150 }}
+      >
+        {loggers.map((logger) => (
+          <option key={logger} value={logger}>
+            {logger}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+function getPercent(a: number, b: number) {
+  if (a === 0 && b === 0) return "0";
+  if (b === 0) return "100";
+  return ((a / b) * 100).toFixed(2);
+}
+
+function round(value: number, digitsAfterComma = 2) {
+  return Math.round(value * Math.pow(10, digitsAfterComma)) / 100;
+}
+
+function getMBFromBytes(bytes: number) {
+  return round(bytes / Math.pow(1024, 2));
+}
+
+function useLocalStorageItem<T>(
+  prop: string,
+  initValue: T,
+  valueToStorageItem: (value: T) => string | null,
+  storageItemToValue: (storageItem: string | null) => T
+): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const [value, setValue] = useState<T>(
+    storageItemToValue(localStorage[prop]) ?? initValue
+  );
+  const setValueExternal = useCallback((value: T | ((prev: T) => T)) => {
+    setValue(value);
+    if (typeof value === "function") {
+      const prev = storageItemToValue(localStorage.getItem(prop));
+      const next = (value as (prev: T) => T)(prev);
+      const result = valueToStorageItem(next);
+      if (result !== null) localStorage.setItem(prop, result);
+      else localStorage.removeItem(prop);
+    } else {
+      const result = valueToStorageItem(value);
+      if (result !== null) localStorage.setItem(prop, result);
+      else localStorage.removeItem(prop);
+    }
+  }, []);
+  const eventHandler = useCallback((event: StorageEvent) => {
+    if (event.key !== prop) return;
+    const value = event.newValue;
+    setValue(storageItemToValue(value));
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("storage", eventHandler);
+    return () => {
+      window.removeEventListener("storage", eventHandler);
+    };
+  }, []);
+
+  return [value, setValueExternal];
+}
+
+const loggers = [
+  "core:hybrid-loader-main",
+  "core:hybrid-loader-main-engine",
+  "core:hybrid-loader-secondary",
+  "core:hybrid-loader-secondary-engine",
+  "core:p2p-loader",
+  "core:peer",
+  "core:p2p-loaders-container",
+] as const;

p2p-media-loader-demo/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

p2p-media-loader-demo/tsconfig.json

@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-    "moduleResolution": "node",
-    "allowImportingTsExtensions": false,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
@@ -15,6 +15,7 @@
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
+    "useDefineForClassFields": true
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

p2p-media-loader-demo/tsconfig.node.json

@@ -3,7 +3,7 @@
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]

p2p-media-loader-demo/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [nodePolyfills(), react()],
 });

package.json

@@ -26,5 +26,10 @@
   },
   "dependencies": {
     "debug": "^4.3.4"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
+    }
   }
 }