Live API

package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

src/App.tsx

@@ -19,7 +19,7 @@ function App() {
 
     return (
         <>
-            {showModal && (<Splash/>)}
+            {showModal && <Splash />}
             <LivePage/>
         </>
     )

src/components/Header.tsx

@@ -0,0 +1,14 @@
+import { MdOutlineExitToApp } from "react-icons/md";
+
+const Header = () => {
+    return (
+        <div>
+            <div className="text-red font-bold text-3xl">방송 주제 텍스트</div>
+            <button className="small-buttonn bg-red">
+                <MdOutlineExitToApp />
+            </button>
+        </div>
+    )
+}
+
+export default Header

src/components/Splash.tsx

@@ -1,8 +1,7 @@
 const Splash = () => {
     return (
-        <div className="splash text-white font-bold">
-            <h1>NOC</h1>
-            <p>News of Citizen</p>
+        <div className="text-white font-bold w-full h-full fixed top-0 left-0 bg-black flex justify-center items-center z-40">
+            <h1 className="splash">Service Name</h1>
         </div>
     )
 }

src/index.css

@@ -2,15 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
-html, body {
+html, body, #root {
   height: 100%;
   width: 100%;
+  color: white;
 }
 
 .video{
   object-fit: cover;
-  width: 100%;
-  height: 300px;
+  height: 100%;
   background-color: #535bf2;
 }
 
@@ -27,12 +27,10 @@ html, body {
 }
 
 .splash {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: red;
-  z-index: 9999;
   animation: fadeOut 3s ease;
 }
+
+.small-button{
+  padding: 0.5rem 1rem;
+  background-color: #000000;
+}

src/pages/LivePage.tsx

@@ -1,4 +1,5 @@
 import { useRef, useEffect } from "react";
+import Header from "../components/Header.tsx";
 
 const CONSTRAINTS = {
     video: true,
@@ -8,7 +9,31 @@ const CONSTRAINTS = {
 const LivePage = () => {
     const liveRef = useRef<HTMLVideoElement>(null);
     const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-    const chunks: Blob[] = [];
+    // const chunks: Blob[] = [];
+
+    let sequence = 0
+
+    const uploadVideo = async (blob: Blob) => {
+        try {
+            const formData = new FormData();
+            formData.append('file_name', String(sequence));  // 원하는 파일 이름으로 설정
+            formData.append('video', blob);
+
+            const response = await fetch('http://13.209.86.34:5001/api/video/upload', {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (response.ok) {
+                const responseData = await response.json();
+                console.log('서버 응답:', responseData);
+            } else {
+                console.error('서버 응답 오류:', response.status, response.statusText);
+            }
+        } catch (error) {
+            console.error('API 요청 중 에러:', error);
+        }
+    };
 
     const startLive = async () => {
         try {
@@ -25,9 +50,9 @@ const LivePage = () => {
                 // 녹화가 준비되었을 때 이벤트 처리
                 mediaRecorderRef.current.ondataavailable = (e) => {
                     if (e.data.size > 0) {
-                        chunks.push(e.data);
+                        uploadVideo(e.data);
+                        console.log('onDataAvailable', e.data);
                     }
-                    console.log('onDataAvailable', e.data);
                 };
 
                 // 녹화 중지 시 이벤트 처리
@@ -55,10 +80,13 @@ const LivePage = () => {
 
     return (
         <>
-            <div className="text-red font-bold text-3xl">LivePage</div>
-            <video className="video" autoPlay ref={liveRef} />
-            <br />
-            <button onClick={startLive}>Start</button>
+            <video className="video" width="100%" autoPlay ref={liveRef} />
+            <div className="fixed top-0 left-0 p-6">
+                <Header />
+                <div>
+                    <button className="small-button" onClick={startLive}>Start</button>
+                </div>
+            </div>
         </>
     );
 };

yarn.lock

@@ -1812,6 +1812,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-icons@^4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"
+  integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"