-
Notifications
You must be signed in to change notification settings - Fork 0
/
receiver.html
executable file
·78 lines (70 loc) · 3.38 KB
/
receiver.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<title>WebRTC Receiver</title>
</head>
<body>
<video id="remoteVideo" autoplay playsinline controls></video>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client/dist/socket.io.min.js"></script>
<button id="restartBtn" onclick="restartCamera()">Restart</button>
<script>
const hostIp = location.hostname
const socket = io('http://' + hostIp + ':5001');
const remoteVideo = document.getElementById('remoteVideo');
let peerConnection;
let pendingCandidates = [];
function restartCamera() {
socket.emit('message', { type: 'restart', restart: true, username: userId });
}
socket.on('message', async message => {
console.log('Received message:', message);
console.log("to: ", message.to)
console.log(message.sid)
if (message.type === 'offer') {
peerConnection = new RTCPeerConnection();
console.log('PeerConnection created');
peerConnection.onicecandidate = event => {
if (event.candidate) {
console.log('ICE candidate generated:', event.candidate);
socket.emit('message', { type: 'candidate', candidate: event.candidate, name: "client", to: message.sid, username: userId });
}
};
peerConnection.ontrack = event => {
remoteVideo.srcObject = null
remoteVideo.srcObject = event.streams[0];
console.log('Received remote track:', event.streams[0]);
console.log(event.streams[0].getVideoTracks())
};
await peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
console.log('Offer set as remote description:', message.offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
console.log('Answer created and set as local description:', answer);
socket.emit('message', { type: 'answer', answer: answer, name: "client", to: message.sid, username: userId });
// Add any pending ICE candidates
pendingCandidates.forEach(async candidate => {
await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
console.log('Added pending ICE candidate:', candidate);
});
pendingCandidates = [];
} else if (message.type === 'candidate') {
if (peerConnection && peerConnection.remoteDescription) {
await peerConnection.addIceCandidate(new RTCIceCandidate(message.candidate));
console.log('Added ICE candidate:', message.candidate);
} else {
// Queue candidate if remote description is not set yet
pendingCandidates.push(message.candidate);
console.log('Queued ICE candidate:', message.candidate);
}
}
});
socket.on('connect', () => {
console.log('Connected to signaling server');
socket.emit('message', { type: 'connection', name: "client", username: userId });
});
socket.on('disconnect', () => {
console.log('Disconnected from signaling server');
});
</script>
</body>
</html>