[Feat] 화상회의 OpenVidu 튜토리얼 코드 참조, 화상회의 UI 수정

front/package.json

@@ -18,6 +18,7 @@
     "axios": "^1.7.2",
     "express": "^4.19.2",
     "jwt-decode": "^4.0.0",
+    "openvidu-browser": "^2.30.1",
     "phaser": "^3.80.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

front/src/App.css

@@ -0,0 +1,3 @@
+.stream-container {
+	padding: 0;
+}

front/src/components/VideoCall/OpenViduVideoComponent.tsx

@@ -0,0 +1,22 @@
+import { StreamManager } from 'openvidu-browser';
+import React, { useRef, useEffect } from 'react';
+
+
+interface OpenViduVideoComponentProps {
+    streamManager: StreamManager | undefined;
+}
+
+// 최종적으로 미디어 스트림을 표시하는 최종 HTMl 래핑.
+const OpenViduVideoComponent: React.FC<OpenViduVideoComponentProps> = ({ streamManager }) => {
+    const videoRef = useRef<HTMLVideoElement>(null); // videoRef의 타입을 HTMLVideoElement로 지정
+
+    useEffect(() => {
+        if (streamManager && videoRef.current) {
+            streamManager.addVideoElement(videoRef.current);
+        }
+    }, [streamManager]);
+
+    return <video className='w-40 h-32 rounded-lg' autoPlay ref={videoRef} />;
+}
+
+export default OpenViduVideoComponent;

front/src/components/VideoCall/UserVideoComponents.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import OpenViduVideoComponent from './OpenViduVideoComponent';
+import './UserVideo.css';
+import { StreamManager } from 'openvidu-browser';
+import { Box } from '@mui/material';
+
+
+interface UserVideoComponentProps {
+    streamManager: StreamManager
+}
+// 모든 사용자 비디오 표시, 클릭이벤트 처리
+const UserVideoComponent: React.FC<UserVideoComponentProps> = ({ streamManager }) => {
+    const getNicknameTag = (): string => {
+        // Gets the nickName of the user
+        return JSON.parse(streamManager!.stream.connection.data).clientData;
+    }
+
+    return (
+        <Box sx={{height: '100%'}}>
+            {streamManager !== undefined ? (
+                <Box sx={{width: '100%', height: '100%', backgroundColor: 'black', borderRadius: '10px', position: 'relative'}}>
+                    {/* OpenViduVideoComponent : 사용자 비디오 컴포넌트 */}
+                    <OpenViduVideoComponent streamManager={streamManager}/>
+                    <div><p className='text-white absolute bottom-0 left-0'>{getNicknameTag()}</p></div>
+                </Box>
+            ) : null}
+        </Box>
+    );
+}
+
+export default UserVideoComponent;