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
|
<!DOCTYPE html>
<html>
<head>
<title>liburtc demo</title>
<script src="//webrtchacks.github.io/adapter/adapter-latest.js"></script>
<script>
// send offer and get answer
let sendOffer = offer => {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
resolve(new RTCSessionDescription({
type: "offer",
sdp: xhr.responseText
}));
}
};
xhr.open("POST", "http://localhost/offer");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(offer));
});
};
function sendCandidate(candidate) {
let req = new XMLHttpRequest();
req.open("POST", "http://localhost/candidate");
req.setRequestHeader("Content-Type", "application/json");
req.send(JSON.stringify(candidate));
};
window.onload = function demo() {
// create new peer connection
let pc = new RTCPeerConnection({
iceCandidatePoolSize: 4,
iceServers: [
{ urls: "stun:stun.liburtc.org" }
]
});
// (callback) called upon discovery of new local ICE candidate
pc.onicecandidate = function(event) {
if (event.candidate) {
console.log("local candidate:\n%c%s", "color: brown", event.candidate.candidate);
}
};
// (callback) called upon reception of new remote video track
pc.ontrack = function(event) {
document.getElementById("remoteVideo").srcObject = event.streams[0];
};
// create offer and send to remote
pc.createOffer({ offerToReceiveVideo: true }).then(function(offer) {
console.log("local offer:\n%c%s", "color: orange", offer.sdp);
pc.setLocalDescription(offer);
sendOffer(offer).then(function(answer) {
console.log("remote answer:\n%c%s", "color: green", answer.sdp);
pc.setRemoteDescription(answer)
.catch(function(reason) {
console.log(reason);
});
});
}).catch(function(reason) {
console.log(reason);
});
}
</script>
<style>
html, body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
main {
margin-left: auto;
margin-right: auto;
width: 80%;
}
p {
text-align: left;
}
video {
background-color: #eee;
border: solid 1px #bbb;
width: 100%;
}
</style>
</head>
<body>
<h1>liburtc demo</h1>
<main>
<p>
In this demo, this web browser is the caller and liburtc is the callee.
</p>
<p>
This browser creates an offer and relays it to liburtc via a simple
signaling server (HTTP/1.0 long-polling). liburtc replies with an
answer, again via the signaling service.
</p>
<video autoplay controls muted playsinline id="remoteVideo"></video>
</main>
</body>
</html>
|
