sendrecv/js: Add an UI for connecting to specified peer id

Part-of: <https://gitlab.freedesktop.org/gstreamer/gst-examples/-/merge_requests/28>

2 files changed, 22 insertions, 0 deletions

diff --git a/webrtc/sendrecv/js/index.html b/webrtc/sendrecv/js/index.html
index 8325070..462a530 100644
--- a/webrtc/sendrecv/js/index.html
+++ b/webrtc/sendrecv/js/index.html
@@ -26,6 +26,13 @@
     <div><video id="stream" autoplay playsinline>Your browser doesn't support video</video></div>
     <div>Status: <span id="status">unknown</span></div>
     <div><textarea id="text" cols=40 rows=4></textarea></div>
+    <br/>
+    <div>
+      <label for="peer-connect">Enter peer id</label>
+      <input id="peer-connect" type="text" name="text">
+      <button onclick="onConnectClicked();">Connect</button>
+    </div>
+
     <div>Our id is <b id="peer-id">unknown</b></div>
     <br/>
     <div>
diff --git a/webrtc/sendrecv/js/webrtc.js b/webrtc/sendrecv/js/webrtc.js
index c532e09..b646b88 100644
--- a/webrtc/sendrecv/js/webrtc.js
+++ b/webrtc/sendrecv/js/webrtc.js
@@ -25,6 +25,16 @@ var ws_conn;
 // Promise for local stream after constraints are approved by the user
 var local_stream_promise;
 
+function onConnectClicked() {
+    var id = document.getElementById("peer-connect").value;
+    if (id == "") {
+        alert("Peer id must be filled out");
+        return;
+    }
+
+    ws_conn.send("SESSION " + id);
+}
+
 function getOurId() {
     return Math.floor(Math.random() * (9000 - 10) + 10).toString();
 }
@@ -115,6 +125,11 @@ function onServerMessage(event) {
         case "HELLO":
             setStatus("Registered with server, waiting for call");
             return;
+        case "SESSION_OK":
+            setStatus("Starting negotiation");
+            if (!peer_connection)
+                createCall(null).then (generateOffer);
+            return;
         default:
             if (event.data.startsWith("ERROR")) {
                 handleIncomingError(event.data);