-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
85 lines (75 loc) · 2.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebRTC Offer</title>
<script src="https://webrtc.github.io/adapter/adapter-latest.js" type="application/javascript"></script>
<script src="/socket.io/socket.io.js" type="application/javascript"></script>
</head>
<body>
<h1> Self View </h1>
<video id="selfView" width="320" height="240" autoplay muted></video>
<br/>
<button id="call">Call</button>
<h1> Remote View </h1>
<video id="remoteView" width="320" height="240" autoplay muted></video>
<script type="application/javascript">
var socket = io.connect('https://yuanchieh.com:4200');
var configuration = {
iceServers: [
{urls: "stun:23.21.150.121"},
{urls: "stun:stun.l.google.com:19302"},
{urls: "turn:numb.viagenie.ca", credential: "turnserver", username: "[email protected]"}
]
};
var pc;
// run start(true) to initiate a call
function start(isCaller) {
pc = new RTCPeerConnection(configuration);
// send any ice candidates to the other peer
pc.onicecandidate = function (evt) {
socket.emit('candidate', {"candidate": evt.candidate});
};
// once remote stream arrives, show it in the remote video element
pc.ontrack = function (evt) {
console.log("add remote stream");
console.log(evt);
remoteView.srcObject = evt.streams[0];
};
if(navigator.getUserMedia) {
// get the local stream, show it in the local video element and send it
navigator.mediaDevices.getUserMedia({"audio": true, "video": true}).then((stream) => {
console.log("start streaming");
console.log(stream);
selfView.srcObject = stream;
pc.addStream(stream);
if (isCaller)
pc.createOffer().then((desc)=>gotDescription(desc));
else
pc.createAnswer().then((desc)=> gotDescription(desc));
function gotDescription(desc) {
pc.setLocalDescription(desc);
socket.emit('sdp', {"sdp": desc});
}
}
);
} else {
alert('Your browser does not support getUserMedia API');
}
}
call.addEventListener('click', ()=> {
console.log('webrtc start');
start(true);
});
socket.on('msg', function (data) {
console.log(data);
if (!pc)
start(false);
if (data.sdp)
pc.setRemoteDescription(new RTCSessionDescription(data.sdp));
else if (data.candidate)
pc.addIceCandidate(new RTCIceCandidate(data.candidate));
});
</script>
</body>
</html>