-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdraft.html
92 lines (82 loc) · 2.37 KB
/
draft.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Small Chats example</title>
<script type="text/javascript">
// Creating the peer
const peer = new RTCPeerConnection({
iceServers: [
{
urls: 'turn:turn.anyfirewall.com:443?transport=udp',
credential: 'webrtc',
username: 'webrtc'
},
{
urls: 'stun:stun.stunprotocol.org'
}
]
});
var conn;
// wss://smallchats-server.onrender.com/ws?userid=012345
// wss://localhost:8080/ws?userid=012345
conn = new WebSocket("ws://localhost:8080/ws?userid=012345");
conn.onopen = async function (evt) {
// get user media
const constraints = {
audio: true,
video: true
};
const stream = await navigator.mediaDevices.getUserMedia(constraints);
// display local video
document.getElementById('localVideo').srcObject = stream;
// set track for peer object
stream.getTracks().forEach(track => peer.addTrack(track, stream));
// console.log(btoa(peer.localDescription.sdp))
// conn.send(["offer", btoa(peer.localDescription.sdp)])
}
conn.onclose = function (evt) {
console.log("Connection closed.", evt);
};
conn.onmessage = async function (evt) {
console.log("Message from server: ", evt.data);
var msg = document.getElementById("msg");
msg.innerHTML = evt.data;
// const message = evt.data;
// const idx = message.indexOf(",");
// const messageType = message.substring(0, idx);
// const messageBody = message.substring(idx + 1);
// switch (messageType) {
// case "roomID":
// // client has received roomID
// console.log("Got room ID from server: ",messageBody)
// }
};
peer.addEventListener('track', (event) => {
console.log("Got media stream: ", event.streams)
const [stream] = event.streams;
document.getElementById('remoteVideo').srcObject = stream;
})
// ICE layer
peer.onicecandidate = (event) => {
console.log(JSON.stringify(event.candidate))
conn.send(["iceCandidate", btoa(JSON.stringify(event.candidate))]);
}
</script>
</head>
<body>
<form id="form">
<label for="userid">User ID:</label><br />
<input type="text" id="userid" /><br />
<button type="submit">Submit</button>
<div id="msg">Server message:</div>
</form>
<div class="remote-video">
<div>Call:</div>
<video id="remoteVideo" playsinline autoplay></video>
</div>
<div class="local-video">
<div>Me:</div>
<video id="localVideo" playsinline autoplay muted></video>
</div>
</body>
</html>