add unpublish button

Softvelum · Jun 24, 2022 · 057cc43 · 057cc43
1 parent c943908
commit 057cc43
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/src/index.html b/src/index.html
@@ -80,7 +80,17 @@ <h3> Logs </h3>
       })
 
       document.addEventListener("DOMContentLoaded", function(event) {
+        var publisher;
+
         document.getElementById("publishBtn").addEventListener("click", function () {
+          if (publisher) {
+              document.getElementById("publishBtn").value = "Publish";
+              publisher.stop();
+              publisher = null;
+              return;
+          }
+          document.getElementById("publishBtn").value = "Unpublish";
+
           var config = {
             whipUrl:      document.getElementById("publishUrl").value,
             logLevel:     'info',
@@ -101,7 +111,8 @@ <h3> Logs </h3>
 
           document.getElementById("resolution").disabled = true;
           document.getElementById("bandwidth").disabled = true;
-          var publisher = new WebRTCjs(config);
+
+          publisher = new WebRTCjs(config);
           publisher.publish();
         });
       });

diff --git a/src/index.js b/src/index.js
@@ -59,7 +59,7 @@ export default class WebRTCjs {
     this.stream = await navigator.mediaDevices.getUserMedia(constraints);
 
     this.pc = new RTCPeerConnection();
-
+   
 
     if (this.pc.connectionState != undefined) {
         this.pc.onconnectionstatechange = (event) => {
@@ -96,7 +96,7 @@ export default class WebRTCjs {
 
     this.logger.info('url:', this.settings.whipUrl);
 
-    var fetched;
+    let fetched;
     try {
       //Do the post request to the WHIP endpoint with the SDP offer
       fetched = await fetch (this.settings.whipUrl, {
@@ -109,6 +109,17 @@ export default class WebRTCjs {
       this.callback('onConnectionError', 'Connection error');
     }
 
+    if (!fetched.ok) {
+      this.logger.error('Connection error ' + fetched.status); //todo handle connection error w/o try/catch
+      this.callback('onConnectionError', 'Connection error ' + fetched.status);
+      this.logger.error(fetched);
+      return;
+    }
+
+    if (fetched.headers.get("location")) {
+      this.location = new URL(fetched.headers.get("location"), this.settings.whipUrl);
+    }
+
     //Get the SDP answer
     const answer = await fetched.text();
     this.logger.info('answer:', answer);
@@ -138,6 +149,44 @@ export default class WebRTCjs {
             .catch(e => console.error(e));
       }
     });
+  }
+
+  async stop()
+  {
+    if (!this.pc) {
+      // Already stopped
+      return
+    }
+
+    if (this.location) {
+      let fetched;
+      try {
+        //Send a delete
+        fetched = await fetch(this.location, {
+          method: "DELETE"
+        });
+      } catch (error) {
+        this.logger.error('failed to delete session with error ' + error); //todo handle connection error w/o try/catch
+        this.callback('onConnectionError', 'Connection error ' + error);
+      }
+
+      if (!fetched.ok) {
+        this.logger.error('failed to delete session ' + fetched.status); //todo handle connection error w/o try/catch
+        this.callback('onConnectionError', 'failed to delete session ' + fetched.status);
+        this.logger.error(fetched);
+        return;
+      }
+      this.callback('onConnectionStateChange', 'session deleted');
+    }
+
+
+    this.settings.videoElement.srcObject = null;
+    // wait a little before pc.close to send some frames to Nimble to make it handle DELETE requests
+    // if we run close right after DELETE nimble will wait to ice timeout and delete session only after that
+    await new Promise(r => setTimeout(r, 200));
+    this.pc.close();
+    this.pc = null;
 
+    this.callback('onConnectionStateChange', 'disconnected');
   }
 }