rtc-remote/client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

,

Browse Source
This commit is contained in:
bangae1
2025-10-21 14:35:23 +09:00
parent 8644fb1c46
commit c5e32808f4
1 changed files with 41 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/remote.jsx
View File

@@ -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' }}
/>
<div