qa
This commit is contained in:
@@ -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');
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user