feat: datachannel forwarding (#312)

* feat: datachannel forwarding

* simplify

* check ready state

* handle collisions + reserved labels

* lint fix

* fix examples

Author: tarrencev

examples/echotest/index.html

@@ -63,6 +63,9 @@ <h3>Pion</h3>
         </div>
       </div>
 
+      <div class="row">
+        <div class="col-12 pt-4">Media</div>
+      </div>
       <div class="row">
         <div class="col-6 pt-2">
           <span
@@ -263,11 +266,50 @@ <h3>Pion</h3>
             <pre
               id="api"
               class="d-block border"
-              style="background-color: #f8f9fa; height: 117px"
+              style="
+                background-color: #f8f9fa;
+                height: 117px;
+                width: 320px;
+                margin: 5px 0;
+              "
             ></pre>
           </div>
         </div>
       </div>
+      <div class="row">
+        <div class="col-12 pt-4">Data</div>
+      </div>
+      <div class="row">
+        <div class="col-6 pt-2">
+          <textarea
+            id="local-data"
+            class="d-block border"
+            style="
+              background-color: #f8f9fa;
+              height: 117px;
+              width: 320px;
+              margin: 5px 0;
+              padding: 5px;
+            "
+            placeholder="Send a message"
+          ></textarea>
+          <button type="button" class="btn btn-primary" onclick="send()">
+            send
+          </button>
+        </div>
+        <div class="col-6 pt-2">
+          <pre
+            id="remote-data"
+            class="d-block border"
+            style="
+              background-color: #f8f9fa;
+              height: 117px;
+              width: 320px;
+              margin: 5px 0;
+            "
+          ></pre>
+        </div>
+      </div>
     </div>
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
@@ -286,13 +328,16 @@ <h3>Pion</h3>
       integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
       crossorigin="anonymous"
     ></script>
-    <script src="https://unpkg.com/ion-sdk-js@1.4.1/dist/ion-sdk.min.js"></script>
+    <script src="https://unpkg.com/ion-sdk-js@1.5.0/dist/ion-sdk.min.js"></script>
     <script>
       const localVideo = document.getElementById("local-video");
       const remoteVideo = document.getElementById("remote-video");
+      const localData = document.getElementById("local-data");
+      const remoteData = document.getElementById("remote-data");
       const sizeTag = document.getElementById("size-tag");
       const brTag = document.getElementById("br-tag");
       let simulcast = false;
+      let localDataChannel;
 
       remoteVideo.addEventListener("loadedmetadata", function () {
         sizeTag.innerHTML = `${remoteVideo.videoWidth}x${remoteVideo.videoHeight}`;
@@ -325,14 +370,21 @@ <h3>Pion</h3>
         })
           .then((media) => {
             localStream = media;
-            localVideo.srcObject = media.stream;
+            localVideo.srcObject = media;
             localVideo.autoplay = true;
             localVideo.controls = true;
             localVideo.muted = true;
             joinBtns.style.display = "none";
             clientLocal.publish(media);
           })
           .catch(console.error);
+        localDataChannel = clientLocal.createDataChannel("data");
+      };
+
+      const send = () => {
+        if (localDataChannel.readyState === "open") {
+          localDataChannel.send(localData.value);
+        }
       };
 
       let remoteStream;
@@ -356,6 +408,12 @@ <h3>Pion</h3>
         }
       };
 
+      clientRemote.ondatachannel = ({ channel }) => {
+        channel.onmessage = ({ data }) => {
+          remoteData.innerHTML = data;
+        };
+      };
+
       const api = {
         streamId: "",
         video: "high",

examples/pubsubtest/index.html

@@ -134,7 +134,7 @@ <h3>Pion</h3>
       integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
       crossorigin="anonymous"
     ></script>
-    <script src="https://unpkg.com/ion-sdk-js@1.1.1/dist/ion-sdk.min.js"></script>
+    <script src="https://unpkg.com/ion-sdk-js@1.5.0/dist/ion-sdk.min.js"></script>
     <script>
       const localVideo = document.getElementById("local-video");
       const remotesDiv = document.getElementById("remotes");
@@ -158,18 +158,18 @@ <h3>Pion</h3>
 
       let localStream;
       const start = () => {
-        clientLocal.getUserMedia({
+        IonSDK.LocalStream.getUserMedia({
           resolution: "vga",
           audio: true,
         })
           .then((media) => {
             localStream = media;
-            localVideo.srcObject = media.stream;
+            localVideo.srcObject = media;
             localVideo.autoplay = true;
             localVideo.controls = true;
             localVideo.muted = true;
             joinBtns.style.display = "none";
-            media.publish(media);
+            clientLocal.publish(media);
           })
           .catch(console.error);
       };

examples/racetest/sdk.html renamed to examples/racetest/index.html

@@ -73,7 +73,7 @@ <h3>Pion</h3>
       integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
       crossorigin="anonymous"
     ></script>
-    <script src="https://unpkg.com/ion-sdk-js@1.0.20/dist/ion-sdk.min.js"></script>
+    <script src="https://unpkg.com/ion-sdk-js@1.5.0/dist/ion-sdk.min.js"></script>
     <script>
       const localVideo = document.getElementById("local-video");
       const remotesDiv = document.getElementById("remotes");
@@ -82,14 +82,6 @@ <h3>Pion</h3>
       const joinBtn = document.getElementById("join-btn");
       const publishBtn = document.getElementById("publish-btn");
 
-      const config = {
-        iceServers: [
-          {
-            urls: "stun:stun.l.google.com:19302",
-          },
-        ],
-      };
-
       class Peer {
         constructor() {
           this.signal = new IonSDK.IonSFUJSONRPCSignal(