-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-stream.html
113 lines (96 loc) · 3.59 KB
/
index-stream.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- <title>Socket.IO chat</title> -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="separator">
<h4><span id="client-type">RECIEVER</span>: <span id="client-id"></span></h4>
</div>
<div class="container">
<video autoplay playsinline muted="true"></video>
</div>
<div class="separator">
<h2>↓ TELEMETRY ↓</h2>
</div>
<div class="container">
<table id="telemetry">
<thead>
<tr>
<th scope="col">TIME</th>
<th scope="col">DATA</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="signals.js"></script>
<script src="tm.js"></script>
<script src="media.js"></script>
<script>
const socket = io();
const clientOut = document.getElementById("client-id")
const tmTable = document.getElementById("telemetry")
const tmBody = tmTable.getElementsByTagName('tbody')[0]
const videoOut = document.querySelector("video")
var stream
var pc // RTCPeerConnection
const hash = window.location.hash.substring(1);
if (!hash) {
const clientType = document.getElementById("client-type")
clientType.textContent = "STREAMER"
const newId = Math.floor((1 + Math.random()) * 1e16)
.toString(16).substring(1);
window.location.hash = newId
console.debug(`creating new stream ${newId}`)
createStream(socket, newId)
} else {
console.debug(`joining stream ${hash}`)
joinStream(socket, hash)
}
socket.on("stream_created", async (clientId) => {
console.debug(`client ${clientId} has created a new stream`)
clientOut.textContent = clientId
stream = await captureVideo(videoOut)
})
socket.on("stream_joined", async (clientId) => {
console.debug(`client ${clientId} has joined an existing stream`)
const urlParams = new URLSearchParams(window.location.search);
const credParam = urlParams.get('credentials');
if (!hash) {
appendClient(tmBody, clientId)
pc = await makeOutgoing(socket, stream, credParam)
} else {
clientOut.textContent = clientId
pc = await makeIncoming(socket, videoOut, credParam)
}
})
socket.on("share_candidate", (event) => {
// console.debug("adding shared candidate", event)
console.debug("adding shared candidate...")
pc.addIceCandidate(
new RTCIceCandidate({
candidate: event.candidate,
sdpMLineIndex: event.label,
sdpMid: event.id,
})
)
})
socket.on("share_offer", async (event) => {
console.debug("got offer", event)
pc.setRemoteDescription(new RTCSessionDescription(event))
const answer = pc.createAnswer()
await pc.setLocalDescription(answer)
socket.emit("share_answer", pc.localDescription)
})
socket.on("share_answer", (event) => {
console.debug("got answer", event)
pc.setRemoteDescription(new RTCSessionDescription(event))
})
</script>
</body>
</html>