[feat] HlsPlayer를 사용해 방송화면에 실시간 스트리밍 화면 연결 (#162)

* feat : id props로 추가 및 css스타일 변경

* feat : 방송 화면에 HlsPlayer 추가

* feat : 환경변수에 HLS_URL 추가

.github/workflows/deploy-front.yml

@@ -31,7 +31,9 @@ jobs:
               tags: ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
               cache-from: type=registry,ref=${{ secrets.NCP_CONTAINER_REGISTRY }}/front
               cache-to: type=inline
-              build-args: VITE_API_URL=${{ secrets.VITE_API_URL }}
+              build-args: |
+                 VITE_API_URL=${{ secrets.VITE_API_URL }}
+                 VITE_HLS_URL=${{ secrets.VITE_HLS_URL }}
 
    docker_pull_front:
       name: Connect server ssh and pull frontend from container registry

client/Dockerfile

@@ -15,6 +15,7 @@ COPY . .
 
 # .env 파일 생성
 RUN echo "VITE_API_URL=$VITE_API_URL" > .env
+RUN echo "VITE_HLS_URL=$VITE_HLS_URL" > .env
 
 # 애플리케이션 빌드
 RUN yarn build

client/src/components/HlsPlayer/HlsPlayer.tsx

@@ -1,32 +1,55 @@
-import { useEffect, useRef } from 'react';
-import Hls from 'hls.js';
+import { useEffect, useRef } from 'react'
+import Hls from 'hls.js'
+import styled from 'styled-components'
 
-const HlsPlayer = () => {
-  const videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
-  const videoRef = useRef<HTMLVideoElement>(null);
+interface HlsPlayerProps {
+  id?: string
+}
 
-  useEffect(() => {
-    const video = videoRef.current;
-    let hls:Hls;
+const HlsPlayer = ({ id }: HlsPlayerProps) => {
+  const videoSrc = `${import.meta.env.VITE_HLS_URL}/${id}`
+  const videoRef = useRef<HTMLVideoElement>(null)
 
+  useEffect(() => {
+    const video = videoRef.current
+    let hls: Hls
+    console.log(videoSrc)
     if (video) {
       if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = videoSrc;
+        video.src = videoSrc
       } else if (Hls.isSupported()) {
-        hls = new Hls();
-        hls.loadSource(videoSrc);
-        hls.attachMedia(video);
+        hls = new Hls()
+        hls.loadSource(videoSrc)
+        hls.attachMedia(video)
       }
 
       return () => {
         if (hls) {
-          hls.destroy();
+          hls.destroy()
         }
-      };
+      }
     }
-  }, []);
+  }, [])
+
+  return (
+    <Container>
+      <Video ref={videoRef} controls />
+    </Container>
+  )
+}
+
+export default HlsPlayer
 
-  return <video ref={videoRef} controls />;
-};
+const Container = styled.div`
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 9rem;
+`
 
-export default HlsPlayer;
+const Video = styled.video`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`

client/src/pages/BroadcastPage/BroadcastPage.tsx

@@ -12,6 +12,7 @@ import ConfirmModal from '@components/Modal/ConfirmModal/ConfirmModal'
 import Chatting from '@components/Chatting/Chatting'
 import { themeState } from '@/states/theme'
 import { userState } from '@/states/user'
+import HlsPlayer from '@components/HlsPlayer/HlsPlayer'
 
 interface ViewerModalProps {
   nickname: string
@@ -172,7 +173,9 @@ const BroadcastPage = () => {
           <Access leftButton="환경설정" rightButton="로그아웃" onLeftButton={onSetting} onRightButton={onLogout} />
         )}
       </styles.Access>
-      <styles.Broadcast></styles.Broadcast>
+      <styles.Broadcast>
+        <HlsPlayer id={id} />
+      </styles.Broadcast>
       <styles.Chatting currentTheme={theme}>
         <styles.ChattingList>
           {chattingList.map((chatting, index) => (