feat: game-room webcam 구현

.eslintrc

@@ -1,34 +1,35 @@
 {
-    "env": {
-      "browser": true,
-      "es2021": true
-    },
-    "extends": [
-      "plugin:prettier/recommended",
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:react/recommended"
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:prettier/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "react"],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["warn"],
+    "no-use-before-define": "off",
+    "no-empty-function": "warn",
+    "react/prop-types": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/react-in-jsx-scope": "off",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
+    "@typescript-eslint/no-empty-interface": [
+      "warn",
+      { "allowSingleExtends": false }
     ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-      "ecmaVersion": "latest",
-      "sourceType": "module"
-    },
-    "plugins": ["@typescript-eslint", "react"],
-    "rules": {
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": ["warn"],
-      "no-use-before-define": "off",
-      "no-empty-function": "warn",
-      "react/prop-types": "off",
-      "react/jsx-one-expression-per-line": "off",
-      "react/jsx-props-no-spreading": "off",
-      "react/react-in-jsx-scope": "off",
-      "prettier/prettier": ["error", { "endOfLine": "auto" }],
-      "@typescript-eslint/no-empty-interface": [
-        "warn",
-        { "allowSingleExtends": false }
-      ],
-      "@typescript-eslint/no-empty-function": "warn"
-    }
-  }
+    "@typescript-eslint/no-empty-function": "warn",
+    "@typescript-eslint/no-explicit-any": ["off"]
+  }
+}

package.json

@@ -4,6 +4,11 @@
   "private": true,
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
+    "@mediapipe/pose": "^0.5.1675469404",
+    "@tensorflow-models/pose-detection": "^2.1.3",
+    "@tensorflow/tfjs": "^4.13.0",
+    "@tensorflow/tfjs-backend-webgl": "^4.13.0",
+    "@tensorflow/tfjs-backend-webgpu": "^4.13.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -12,12 +17,15 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.2.13",
     "axios": "^1.5.1",
+    "openvidu-browser": "^2.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "react-webcam": "^7.2.0",
     "recoil": "^0.7.7",
+    "scatter-gl": "^0.0.13",
     "styled-components": "^6.0.9",
     "styled-reset": "^4.5.1",
     "typescript": "^5.2.2",

src/App.tsx

@@ -10,6 +10,8 @@ import Dashboard from './assets/pages/Dashboard';
 import GameList from './assets/pages/GameList';
 import MainHeader from './assets/component/MainHeader';
 
+import GameRoom from './assets/room/openvidu/GameRoom';
+
 function App() {
   return (
     <ThemeProvider theme={theme}>
@@ -21,6 +23,7 @@ function App() {
               <Route path="/gamelist" element={<GameList />} />
               <Route path="/setting" />
             </Route>
+            <Route path="/gameroom/:roomId" element={<GameRoom />} />
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<Signup />} />
             <Route path="/pushupguide" element={<PushUpGameGuide />} />

src/assets/component/GameRoomListItem.tsx

@@ -13,7 +13,7 @@ interface ListItemProps {
 const ListItem = ({ rowData }: ListItemProps) => {
   const navbar = useRecoilValue(sidebarState);
   const navigate = useNavigate();
-  const handleNavigate = () => navigate('/game');
+  const handleNavigate = () => navigate('/gameroom');
 
   return (
     <ListBox>

src/assets/component/SmallButton.tsx

@@ -7,7 +7,7 @@ interface SmallButtonInterface {
 
 const SmallButton = ({ text, onClick }: SmallButtonInterface) => {
   return (
-    <Button text={text} onClick={onClick}>
+    <Button text={text} onClick={onClick} type="button">
       {text}
     </Button>
   );

src/assets/modal/CreateRoom.tsx

@@ -5,6 +5,14 @@ import { ReactComponent as Cancle } from '../images/cancel.svg';
 import ExerciseImg from '../component/ExerciseImg';
 import SmallButton from '../component/SmallButton';
 import { useState } from 'react';
+import axios from 'axios';
+import { OpenVidu } from 'openvidu-browser';
+import { useNavigate } from 'react-router-dom';
+
+// https://togedong.kro.kr/
+
+const APPLICATION_SERVER_URL =
+  process.env.NODE_ENV === 'production' ? '' : 'http://togedong.kro.kr:8080/';
 
 type ExerciseState = {
   PUSHUP: boolean;
@@ -24,12 +32,14 @@ const CreateRoom = ({ setIsOpen }: CreateRoomProps) => {
     PUSHUP: true,
     SQUAT: false,
   });
+  const navigate = useNavigate();
+  // const [mySessionId, setMySessionId] = useState('');
   const [passwordBox, setPasswordBox] = useState<boolean>(false);
   const [title, setTitle] = useState<string>();
   const [password, setPassword] = useState<string>();
   const [countPerson, setCountPerson] = useState<string>('1');
-  const handleCreate = () => {};
-  const handleCancle = () => {
+
+  const handleCancel = () => {
     setIsOpen(false);
   };
   const handleTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -48,6 +58,52 @@ const CreateRoom = ({ setIsOpen }: CreateRoomProps) => {
     setCountPerson(e.target.value);
   };
 
+  const handleCreateRoom = async () => {
+    const response = await createSession();
+    // console.log(response);
+    navigate(`/gameroom/${response.data.roomId}`, { state: response.data });
+    // navigate(`/gameroom/ses_RADpetuUKV` /**{ state: response.data }*/);
+    // navigate(`/gameroom`);
+  };
+
+  const test_data = {
+    title: title, // 방제목
+    memberLimit: Number(countPerson), // 사람 수
+    exerciseName: 'PUSH_UP', // 운동 이름
+    hasPassword: passwordBox, // 비밀번호 여부
+    password: password, // 비밀번호
+  };
+
+  // const getToken = useCallback(async () => {
+  //   return createSession().then((roomId) => createToken(roomId));
+  // }, [mySessionId]); // 방 들어갈 때
+
+  const createSession = async () => {
+    const response = await axios.post(
+      APPLICATION_SERVER_URL + 'api/room',
+      test_data,
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+        },
+      },
+    );
+    return response.data; // The sessionId
+  };
+
+  // const createToken = async (roomId: string) => {
+  //   const response = await axios.post(
+  //     // APPLICATION_SERVER_URL + 'api/room/' + roomId + '/connections',
+  //     APPLICATION_SERVER_URL + 'api/room/' + roomId,
+  //     {},
+  //     {
+  //       headers: { 'Content-Type': 'application/json' },
+  //     },
+  //   );
+  //   return response.data; // The token
+  // };
+
   return (
     <>
       <BackGround></BackGround>
@@ -107,14 +163,14 @@ const CreateRoom = ({ setIsOpen }: CreateRoomProps) => {
             </CountSelect>
           </CountContainer>
           <ButtonContainer>
-            <button onClick={handleCreate}>
+            <button type="button" onClick={handleCreateRoom}>
               <SmallButton text="만들기" />
             </button>
           </ButtonContainer>
         </ContentContainer>
-        <CancleButton onClick={handleCancle}>
+        <CancelButton onClick={handleCancel}>
           <Cancle />
-        </CancleButton>
+        </CancelButton>
       </CreateRoomContainer>
     </>
   );
@@ -236,7 +292,7 @@ const ButtonContainer = styled.div`
   justify-content: end;
 `;
 
-const CancleButton = styled.button`
+const CancelButton = styled.button`
   position: absolute;
   top: 20px;
   right: 20px;