Merge pull request #288 from boostcampwm-2024/feature-FE-##287-Host_use_SessionKey

[FEAT] 404 에러 처리 및 세션키로 변경

Author: spearStr

frontend/src/hooks/usePlayer.ts

@@ -1,6 +1,100 @@
-import Hls from 'hls.js';
+import Hls, {
+  Loader,
+  LoaderCallbacks,
+  LoaderConfiguration,
+  LoaderContext,
+  LoaderResponse,
+  LoaderStats,
+  HlsConfig
+} from 'hls.js';
 import { useEffect, useRef } from 'react';
 
+class CustomLoader implements Loader<LoaderContext> {
+  private loader: Loader<LoaderContext>;
+
+  constructor(config: HlsConfig) {
+    const DefaultLoader = Hls.DefaultConfig.loader as new (config: HlsConfig) => Loader<LoaderContext>;
+    this.loader = new DefaultLoader(config);
+  }
+
+  load(context: LoaderContext, config: LoaderConfiguration, callbacks: LoaderCallbacks<LoaderContext>) {
+    const { onSuccess, onError, onTimeout, onAbort, onProgress } = callbacks;
+
+    const newCallbacks: LoaderCallbacks<LoaderContext> = {
+      onSuccess: (response: LoaderResponse, stats: LoaderStats, context: LoaderContext, networkDetails: any = null) => {
+        onSuccess(response, stats, context, networkDetails);
+      },
+      onError: (
+        error: { code: number; text: string },
+        context: LoaderContext,
+        networkDetails: any = null,
+        stats: LoaderStats
+      ) => {
+        if (error.code === 404) {
+          const emptyData = new ArrayBuffer(0);
+          onSuccess(
+            {
+              url: context.url,
+              data: emptyData
+            },
+            {
+              trequest: performance.now(),
+              tfirst: performance.now(),
+              tload: performance.now(),
+              loaded: 0,
+              total: 0
+            } as unknown as LoaderStats,
+            context,
+            networkDetails
+          );
+        } else {
+          if (onError) {
+            onError(error, context, networkDetails, stats);
+          }
+        }
+      },
+      onTimeout: (stats: LoaderStats, context: LoaderContext, networkDetails: any = null) => {
+        if (onTimeout) {
+          onTimeout(stats, context, networkDetails);
+        }
+      },
+      onAbort: (stats: LoaderStats, context: LoaderContext, networkDetails: any = null) => {
+        if (onAbort) {
+          onAbort(stats, context, networkDetails);
+        }
+      },
+      onProgress: (
+        stats: LoaderStats,
+        context: LoaderContext,
+        data: string | ArrayBuffer,
+        networkDetails: any = null
+      ) => {
+        if (onProgress) {
+          onProgress(stats, context, data, networkDetails);
+        }
+      }
+    };
+
+    this.loader.load(context, config, newCallbacks);
+  }
+
+  abort() {
+    this.loader.abort();
+  }
+
+  destroy() {
+    this.loader.destroy();
+  }
+
+  get stats() {
+    return this.loader.stats;
+  }
+
+  get context() {
+    return this.loader.context;
+  }
+}
+
 export default function usePlayer(url: string) {
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
@@ -19,7 +113,8 @@ export default function usePlayer(url: string) {
 
     const hls = new Hls({
       enableWorker: true,
-      lowLatencyMode: true
+      lowLatencyMode: true,
+      loader: CustomLoader
     });
 
     hls.loadSource(url);

frontend/src/utils/hostURL.ts

@@ -1,8 +1,7 @@
-import { BASE_URL, RTMP_HTTP_PORT } from '@apis/index';
-import { getStreamKey } from './streamKey';
+import { getSessionKey } from './streamKey';
 
 export function getHostURL() {
-  const streamKey = getStreamKey();
+  const sessionKey = getSessionKey();
 
-  return `${BASE_URL}:${RTMP_HTTP_PORT}/live/${streamKey}/index.m3u8`;
+  return `https://kr.object.ncloudstorage.com/web22/live/${sessionKey}/index.m3u8`;
 }