diff options
author | Chris Hiszpanski <chris@liburtc.org> | 2021-04-29 01:30:50 -0700 |
---|---|---|
committer | Chris Hiszpanski <chris@liburtc.org> | 2021-05-04 00:58:39 -0700 |
commit | 2745c093dca7105672fd540f9d060a0ef1a1ce69 (patch) | |
tree | 9a0ddb52056f85e48ae6c3ad168db5983c36c6e9 /examples/demo.html | |
parent | 79f4f70de1a6014d53b245b8069c833ce943f943 (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.html | 95 |
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> |