feat : update canvas

Author: CheonBi

package-lock.json

@@ -18,6 +18,7 @@
     "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.1",
+    "tldraw": "^3.7.2",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

package.json

@@ -26,7 +26,7 @@ export default function AuthHeader() {
           </li>
           <li>
             <Link
-              to="/share"
+              to="/tale/share"
               className="text-gray-700 hover:text-blue-600 text-xl">
               Share
             </Link>

src/common/Header/AuthHeader.jsx

@@ -2,13 +2,8 @@ import React from 'react';
 
 export default function DefaultHeader() {
   return (
-    <div>
-      <nav className="flex">
-        <div>
-          <span className="">Logo</span>
-        </div>
-        <div className=""></div>
-      </nav>
-    </div>
+    <header>
+      <nav></nav>
+    </header>
   );
 }

src/common/Header/DefaultHeader.jsx

@@ -1,8 +1,8 @@
-import Footer from './Footer';
 import { Outlet } from 'react-router-dom';
-import AuthHeader from './Header/AuthHeader';
-import DefaultHeader from './Header/DefaultHeader';
 import { useAuth } from '@/store/useStore';
+import Footer from '../Footer';
+import AuthHeader from '../Header/AuthHeader';
+import DefaultHeader from '../Header/DefaultHeader';
 
 export default function MainLayout() {
   const { isAuthenticated } = useAuth();

src/common/MainLayout.jsx src/common/layout/MainLayout.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+export default function TaleLayout() {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+}

src/common/layout/TaleLayout.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-export default function FriendCanvas() {
+export default function FriendCanvas({ streamManager, userType }) {
   return (
     <div className="h-1/3 bg-white rounded-lg shadow-md flex items-center justify-center border border-gray-300">
-      <span className="text-gray-500">참가자 </span>
+      <span className="text-gray-500">{userType} </span>
     </div>
   );
 }

src/components/Share/FriendCanvas.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import StreamCanvas from './StreamCanvas';
 
-export default function MyCanvas({ streamManager }) {
+export default function MyCanvas({ streamManager, userType }) {
+  const streamCanvas = `streamManager ? ( <StreamCanvas streamManager={streamManager} /> ) : null`;
+
   const getNicknameTag = () => {
     return JSON.parse(streamManager.stream.connection.data).clientData;
   };
@@ -11,14 +13,12 @@ export default function MyCanvas({ streamManager }) {
       <div className="h-full w-full border border-gray-300 rounded-lg flex items-center justify-center">
         <span className="text-gray-500">
           내 화면
-          {streamManager ? (
-            <div className="">
-              <StreamCanvas streamManager={streamManager} />
-              <div>
-                <p className="">{getNicknameTag()}</p>
-              </div>
+          <div className="border-gray-300 rounded-lg">
+            <StreamCanvas streamManager={streamManager} />
+            <div>
+              <p className="">{getNicknameTag()}</p>
             </div>
-          ) : null}
+          </div>
         </span>
       </div>
     </div>

src/components/Share/MyCanvas.jsx

@@ -1,7 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Tldraw } from 'tldraw';
 
 export default function StreamCanvas({ streamManager }) {
   const canvasRef = useRef(null);
+  const tldrawRef = useRef(null);
 
   useEffect(() => {
     if (streamManager && canvasRef.current) {
@@ -10,8 +12,11 @@ export default function StreamCanvas({ streamManager }) {
   }, [streamManager]);
 
   return (
-    <video
-      autoPlay
-      ref={canvasRef}></video>
+    <div className="fixed inset-0">
+      <Tldraw ref={canvasRef} />
+      {/* <video
+        autoPlay
+        ref={canvasRef}></video> */}
+    </div>
   );
 }

src/components/Share/StreamCanvas.jsx

@@ -6,7 +6,7 @@ import Login from './pages/Login';
 import AppRouter from './routes/AppRouter';
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
+  // <StrictMode>
+  <App />
+  // </StrictMode>
 );

src/main.jsx

@@ -1,10 +1,12 @@
 import FriendCanvas from '@/components/Share/FriendCanvas';
 import MyCanvas from '@/components/Share/MyCanvas';
 import React, { useEffect, useRef, useState } from 'react';
+import { OpenVidu } from 'openvidu-browser';
+import axios from 'axios';
 
 const APPLICATION_SERVER_URL =
-  process.env.NODE_ENV === 'dev'
-    ? 'http://localhost:5000'
+  process.env.NODE_ENV === 'development'
+    ? 'http://localhost:5000/'
     : 'https://demos.openvidu.io/';
 
 export default function Share() {
@@ -16,20 +18,19 @@ export default function Share() {
   const [mainStreamManager, setMainStreamManager] = useState(undefined);
   const [publisher, setPublisher] = useState(undefined);
   const [subscribers, setSubscribers] = useState([]);
-  const [currentVideoDevice, setCurrentVideoDevice] = useState(undefined);
 
   const OV = useRef(null);
 
   useEffect(() => {
     window.addEventListener('beforeunload', leaveSession);
+    joinSession({ preventDefault: () => {} });
     return () => {
       window.removeEventListener('beforeunload', leaveSession);
     };
   }, []);
 
   const handleChangeSessionId = (e) => setMySessionId(e.target.value);
   const handleChangeUserName = (e) => setMyUserName(e.target.value);
-  const handleMainVideoStream = (stream) => setMainStreamManager(stream);
 
   const deleteSubscriber = (streamManager) => {
     setSubscribers((prev) => prev.filter((sub) => sub !== streamManager));
@@ -58,28 +59,14 @@ export default function Share() {
       await newSession.connect(token, { clientData: myUserName });
 
       const newPublisher = await OV.current.initPublisherAsync(undefined, {
-        audioSource: undefined,
-        videoSource: undefined,
-        publishAudio: true,
+        audioSource: false,
+        videoSource: undefined, // undefined
+        publishAudio: false,
         publishVideo: true, //false
-        resolution: '640x480',
-        frameRate: 30,
-        insertMode: 'APPEND',
         mirror: false,
       });
 
-      newSession.publish(newPublisher);
-      const devices = await OV.current.getDevices();
-      const videoDevices = devices.filter(
-        (device) => device.kind === 'videoinput'
-      );
-      const currentVideoDeviceId = newPublisher.stream
-        .getMediaStream()
-        .getVideoTracks()[0]
-        .getSettings().deviceId;
-      const currentVideoDevice = videoDevices.find(
-        (device) => device.deviceId === currentVideoDeviceId
-      );
+      await newSession.publish(newPublisher);
 
       setSession(newSession);
       setPublisher(newPublisher);
@@ -98,6 +85,7 @@ export default function Share() {
     if (session) {
       session.disconnect();
     }
+
     OV.current = null;
     setSession(undefined);
     setSubscribers([]);
@@ -107,38 +95,6 @@ export default function Share() {
     setPublisher(undefined);
   };
 
-  const switchCamera = async () => {
-    try {
-      const devices = await OV.current.getDevices();
-      const videoDevices = devices.filter(
-        (device) => device.kind === 'videoinput'
-      );
-
-      if (videoDevices.length > 1) {
-        const newVideoDevice = videoDevices.find(
-          (device) => device.deviceId !== currentVideoDevice.deviceId
-        );
-        if (newVideoDevice) {
-          const newPublisher = OV.current.initPublisher(undefined, {
-            videoSource: newVideoDevice.deviceId,
-            publishAudio: true,
-            publishVideo: true,
-            mirror: true,
-          });
-
-          await session.unpublish(mainStreamManager);
-          await session.publish(newPublisher);
-
-          setCurrentVideoDevice(newVideoDevice);
-          setMainStreamManager(newPublisher);
-          setPublisher(newPublisher);
-        }
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
   const getToken = async () => {
     const sessionId = await createSession(mySessionId);
     return await createToken(sessionId);
@@ -167,13 +123,13 @@ export default function Share() {
   };
 
   return (
-    <div className="flex h-screen w-[90%] bg-gray-100 p-4">
-      <MyCanvas />
-      <div className="w-1/4 flex flex-col gap-2 ml-4">
+    <div className="flex h-screen w-[100%] bg-gray-100 p-4">
+      {mainStreamManager && <MyCanvas streamManager={mainStreamManager} />}
+      {/* <div className="w-1/4 flex flex-col gap-2 ml-4">
         {[...Array(parseInt(3))].map((friend, index) => (
           <FriendCanvas key={index} />
         ))}
-      </div>
+      </div> */}
     </div>
   );
 }