,

frontend/src/remote.jsx

@@ -8,7 +8,7 @@ export default function RemoteControl() {
     const [status, setStatus] = useState('disconnected'); // 'disconnected' | 'connecting' | 'connected'
     const [displays, setDisplays] = useState([]);
     const [selectedDisplay, setSelectedDisplay] = useState(null);
-    const [isControlling, setIsControlling] = useState(false);
+    const [isControlling, setIsControlling] = useState(true);
 
     const videoRef = useRef(null);
     const socketRef = useRef(null);
@@ -38,35 +38,19 @@ export default function RemoteControl() {
             console.log(displays);
         });
 
-        socket.on('webrtcSignal', async (data) => {
+
-            if (!peerConnectionRef.current) return;
+        socket.on('responseAnswer', async({ answer }) => {
-            try {
+            console.log('responseAnswer', answer);
-                if (data.type === 'answer') {
+            await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(answer));
-                    await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(data.answer));
+
             setStatus('connected');
             setIsControlling(true);
-                } else if (data.type === 'icecandidate' && data.candidate) {
+
+        })
+
+        socket.on('icecandidate', async(data) => {
+            console.log('icecandidate', data);
             await peerConnectionRef.current.addIceCandidate(new RTCIceCandidate(data.candidate));
-                }
-            } catch (err) {
-                console.error('WebRTC 처리 오류:', err);
-            }
-        });
-
-        socket.on('offer', async (data) => {
-            console.log('offer', data);
-            peerConnectionRef.current = new RTCPeerConnection({
-                iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
-            });
-            await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(data.offer));
-            const answer = await peerConnectionRef.current.createAnswer();
-            await peerConnectionRef.current.setLocalDescription(answer);
-
-            socket.emit('answer', {
-                targetId: data.targetId,
-                type: 'answer',
-                answer
-            });
         })
 
         socket.on('error', async ( data ) => {
@@ -74,61 +58,40 @@ export default function RemoteControl() {
             setStatus('disconnected');
         });
 
-        socket.on('requestControl', async (data) => {
-            console.log(data)
-        })
-
         return () => {
             socket.disconnect();
         };
-    }, [selectedDisplay]);
+    }, []);
 
     // ▶️ 연결 시작
     const startControl = async () => {
-        socketRef.current.emit('requestControl', {
+        console.log('startControl')
-            targetId: employeeId,
+        peerConnectionRef.current = new RTCPeerConnection({
-            displayId: selectedDisplay
+            iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
         });
-        // if (!employeeId) return;
+
-        //
+        const offer = await peerConnectionRef.current.createOffer({offerToReceiveVideo: true})
-        // setStatus('connecting');
+        await peerConnectionRef.current.setLocalDescription(offer);
-        // const pc = new RTCPeerConnection({
+
-        //     iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+        peerConnectionRef.current.ontrack = async(event) => {
-        // });
+            if (videoRef.current) {
-        // peerConnectionRef.current = pc;
+                console.log('Tracks:', event.streams[0].getTracks());
-        //
+                console.log('Video tracks:', event.streams[0].getVideoTracks());
-        // pc.ontrack = (event) => {
+                videoRef.current.srcObject = event.streams[0];
-        //     console.log(event)
+            }
-        //     if (videoRef.current) {
+        };
-        //         videoRef.current.srcObject = event.streams[0];
+        socketRef.current.emit('requestOffer', {type:'offer', displayId: selectedDisplay, targetId: employeeId, offer})
-        //     }
+
-        // };
+        peerConnectionRef.current.oniceconnectionstatechange = () => {
-        //
+            console.log('ICE state:', peerConnectionRef.current.iceConnectionState);
-        // pc.onicecandidate = (event) => {
+        };
-        //     if (event.candidate && socketRef.current) {
+
-        //         socketRef.current.emit('webrtcSignal', {
+        peerConnectionRef.current.onicecandidate = (event) => {
-        //             targetId: employeeId,
+            setTimeout(() => {
-        //             type: 'icecandidate',
+                console.log('onicecandidate:', event);
-        //             candidate: event.candidate
+                socketRef.current.emit('icecandidate', {type: 'icecandidate', targetId: employeeId, server:'client', 'candidate': event.candidate});
-        //     });
+            }, 2000)
-        //     }
+        }
-        // };
-        //
-        // try {
-        //     const offer = await pc.createOffer({ offerToReceiveVideo: true });
-        //     await pc.setLocalDescription(offer);
-        //
-        //
-        //     socketRef.current.emit('requestControl', {
-        //         targetId: employeeId,
-        //         offer: offer,
-        //         displayId: selectedDisplay
-        //     });
-        // } catch (err) {
-        //     setStatus('disconnected');
-        //     console.error('연결 실패:', err);
-        //     setStatus('disconnected');
-        // }
     };
 
     // 🖱️ 입력 이벤트 전달
@@ -253,6 +216,8 @@ export default function RemoteControl() {
                         ref={videoRef}
                         autoPlay
                         playsInline
+                        controls
+                        muted
                         style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                     />
                     <div