This commit is contained in:
2025-10-20 21:15:31 +09:00
parent a0b114c92f
commit 29153400e6

View File

@@ -3,7 +3,6 @@ import { useState, useRef, useEffect } from 'react';
import io from 'socket.io-client'; import io from 'socket.io-client';
const SIGNALING_SERVER = 'http://localhost:3001'; // 실제 서버 주소로 변경 const SIGNALING_SERVER = 'http://localhost:3001'; // 실제 서버 주소로 변경
export default function RemoteControl() { export default function RemoteControl() {
const [employeeId, setEmployeeId] = useState('psn14020'); const [employeeId, setEmployeeId] = useState('psn14020');
const [status, setStatus] = useState('disconnected'); // 'disconnected' | 'connecting' | 'connected' const [status, setStatus] = useState('disconnected'); // 'disconnected' | 'connecting' | 'connected'
@@ -14,6 +13,7 @@ export default function RemoteControl() {
const videoRef = useRef(null); const videoRef = useRef(null);
const socketRef = useRef(null); const socketRef = useRef(null);
const peerConnectionRef = useRef(null); const peerConnectionRef = useRef(null);
const EMPLOYEE_ID = "psn14020_client";
// 🔌 소켓 연결 // 🔌 소켓 연결
useEffect(() => { useEffect(() => {
@@ -23,6 +23,11 @@ export default function RemoteControl() {
}); });
socketRef.current = socket; socketRef.current = socket;
socket.on('connect', () => {
console.log('시그널링 서버 연결됨. 직원 등록 중...');
socket.emit('register', EMPLOYEE_ID);
});
socket.on('availableDisplays', ({ displays }) => { socket.on('availableDisplays', ({ displays }) => {
setDisplays(displays); setDisplays(displays);
if (displays.length > 0 && !selectedDisplay) { if (displays.length > 0 && !selectedDisplay) {
@@ -30,11 +35,11 @@ export default function RemoteControl() {
} }
}); });
socket.on('webrtcSignal', async ({ data }) => { socket.on('webrtcSignal', async (data) => {
if (!peerConnectionRef.current) return; if (!peerConnectionRef.current) return;
try { try {
if (data.type === 'answer') { if (data.type === 'answer') {
await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(data)); await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(data.answer));
setStatus('connected'); setStatus('connected');
setIsControlling(true); setIsControlling(true);
} else if (data.type === 'icecandidate' && data.candidate) { } else if (data.type === 'icecandidate' && data.candidate) {
@@ -67,6 +72,7 @@ export default function RemoteControl() {
peerConnectionRef.current = pc; peerConnectionRef.current = pc;
pc.ontrack = (event) => { pc.ontrack = (event) => {
console.log(event)
if (videoRef.current) { if (videoRef.current) {
videoRef.current.srcObject = event.streams[0]; videoRef.current.srcObject = event.streams[0];
} }
@@ -86,12 +92,14 @@ export default function RemoteControl() {
const offer = await pc.createOffer({ offerToReceiveVideo: true }); const offer = await pc.createOffer({ offerToReceiveVideo: true });
await pc.setLocalDescription(offer); await pc.setLocalDescription(offer);
socketRef.current.emit('requestControl', { socketRef.current.emit('requestControl', {
targetId: employeeId, targetId: employeeId,
offer: offer, offer: offer,
displayId: selectedDisplay displayId: selectedDisplay
}); });
} catch (err) { } catch (err) {
setStatus('disconnected');
console.error('연결 실패:', err); console.error('연결 실패:', err);
setStatus('disconnected'); setStatus('disconnected');
} }