summaryrefslogtreecommitdiff
path: root/examples/demo.html
diff options
context:
space:
mode:
authorChris Hiszpanski <chris@liburtc.org>2021-04-29 01:30:50 -0700
committerChris Hiszpanski <chris@liburtc.org>2021-05-04 00:58:39 -0700
commit2745c093dca7105672fd540f9d060a0ef1a1ce69 (patch)
tree9a0ddb52056f85e48ae6c3ad168db5983c36c6e9 /examples/demo.html
parent79f4f70de1a6014d53b245b8069c833ce943f943 (diff)
Adds signaling to demo
Adds simple HTTP/1.0 signaling to demo. Demo long-polls demo server (demo.liburtc.org) for an offer and posts an answer. Similarily, long-polls and posts candidates.
Diffstat (limited to 'examples/demo.html')
-rw-r--r--examples/demo.html95
1 files changed, 94 insertions, 1 deletions
diff --git a/examples/demo.html b/examples/demo.html
index 03e07b9..0be9df8 100644
--- a/examples/demo.html
+++ b/examples/demo.html
@@ -4,12 +4,105 @@
<title>liburtc demo</title>
<script src="//webrtchacks.github.io/adapter/adapter-latest.js"></script>
<script>
- // call liburtc peer
+ // 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>