forked from nielsbaloe/webrtc-php
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (128 loc) · 4.94 KB
/
index.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#videoGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 5px;
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<div id="videoGrid">
<!-- Video elements for 8 users and the local user -->
<video id="localVideo" autoplay="true" muted="muted"></video>
<video id="user1" autoplay="true"></video>
<video id="user2" autoplay="true"></video>
<video id="user3" autoplay="true"></video>
<video id="user4" autoplay="true"></video>
<video id="user5" autoplay="true"></video>
<video id="user6" autoplay="true"></video>
<video id="user7" autoplay="true"></video>
<video id="user8" autoplay="true"></video>
</div>
<script type="text/javascript">
let localStream = null;
let pcs = {};
let ws = null;
const videoGrid = document.getElementById('videoGrid');
const configuration = {
'iceServers': [
{ 'urls': 'stun:stun.stunprotocol.org:3478' },
{ 'urls': 'stun:stun.l.google.com:19302' }
]
};
// Get local media (audio + video)
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => {
const localVideo = document.getElementById('localVideo');
localStream = stream;
localVideo.srcObject = stream;
connectToServer(); // Connect to signaling server after obtaining media
}).catch(error => {
console.error("Error accessing media devices.", error);
});
function connectToServer() {
const unique = Math.floor(100000 + Math.random() * 900000);
ws = new EventSource(`serverGet.php?unique=${unique}`);
// Send function for signaling
ws.send = function(message) {
const xhr = new XMLHttpRequest();
xhr.open('POST', `serverPost.php?unique=${unique}`, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(message);
};
ws.onmessage = function(event) {
const messages = event.data.split('_MULTIPLEVENTS_');
messages.forEach(msg => handleSignalingMessage(JSON.parse(msg)));
};
// Notify server of new user
publish('new-user', null);
}
function handleSignalingMessage(message) {
const { event, data, user } = message;
switch (event) {
case 'new-user':
if (!pcs[user]) startConnection(user);
break;
case 'offer':
if (!pcs[user]) startConnection(user);
pcs[user].setRemoteDescription(new RTCSessionDescription(data));
pcs[user].createAnswer().then(answer => {
pcs[user].setLocalDescription(answer);
publish('answer', answer, user);
});
break;
case 'answer':
pcs[user].setRemoteDescription(new RTCSessionDescription(data));
break;
case 'candidate':
pcs[user].addIceCandidate(new RTCIceCandidate(data));
break;
}
}
function startConnection(user) {
const pc = new RTCPeerConnection(configuration);
pcs[user] = pc;
// Add local stream tracks to the peer connection
localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
// Handle remote stream
pc.ontrack = function(event) {
const videoElement = document.getElementById(`user${user}`);
if (videoElement) videoElement.srcObject = event.streams[0];
};
// Handle ICE candidates
pc.onicecandidate = function(event) {
if (event.candidate) {
publish('candidate', event.candidate, user);
}
};
// Create and send an offer
pc.createOffer().then(offer => {
pc.setLocalDescription(offer);
publish('offer', offer, user);
});
}
function publish(event, data, user = null) {
ws.send(JSON.stringify({ event, data, user }));
}
</script>
</body>
</html>