diff --git a/frontend/src/remote.jsx b/frontend/src/remote.jsx index a04a314..d3a08bd 100644 --- a/frontend/src/remote.jsx +++ b/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; - try { - if (data.type === 'answer') { - await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(data.answer)); - setStatus('connected'); - setIsControlling(true); - } else if (data.type === 'icecandidate' && data.candidate) { - 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.on('responseAnswer', async({ answer }) => { + console.log('responseAnswer', answer); + await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(answer)); - socket.emit('answer', { - targetId: data.targetId, - type: 'answer', - answer - }); + setStatus('connected'); + setIsControlling(true); + + }) + + socket.on('icecandidate', async(data) => { + console.log('icecandidate', data); + await peerConnectionRef.current.addIceCandidate(new RTCIceCandidate(data.candidate)); }) 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', { - targetId: employeeId, - displayId: selectedDisplay + console.log('startControl') + peerConnectionRef.current = new RTCPeerConnection({ + iceServers: [{urls: 'stun:stun.l.google.com:19302'}] }); - // if (!employeeId) return; - // - // setStatus('connecting'); - // const pc = new RTCPeerConnection({ - // iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] - // }); - // peerConnectionRef.current = pc; - // - // pc.ontrack = (event) => { - // console.log(event) - // if (videoRef.current) { - // videoRef.current.srcObject = event.streams[0]; - // } - // }; - // - // pc.onicecandidate = (event) => { - // if (event.candidate && socketRef.current) { - // socketRef.current.emit('webrtcSignal', { - // targetId: employeeId, - // type: 'icecandidate', - // candidate: event.candidate - // }); - // } - // }; - // - // 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'); - // } + + const offer = await peerConnectionRef.current.createOffer({offerToReceiveVideo: true}) + await peerConnectionRef.current.setLocalDescription(offer); + + peerConnectionRef.current.ontrack = async(event) => { + if (videoRef.current) { + console.log('Tracks:', event.streams[0].getTracks()); + console.log('Video tracks:', event.streams[0].getVideoTracks()); + 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); + }; + + peerConnectionRef.current.onicecandidate = (event) => { + setTimeout(() => { + console.log('onicecandidate:', event); + socketRef.current.emit('icecandidate', {type: 'icecandidate', targetId: employeeId, server:'client', 'candidate': event.candidate}); + }, 2000) + } }; // 🖱️ 입력 이벤트 전달 @@ -253,6 +216,8 @@ export default function RemoteControl() { ref={videoRef} autoPlay playsInline + controls + muted style={{ width: '100%', height: '100%', objectFit: 'contain' }} />