feat: functionality to gracefully unload / disconnect a stream

demo/demo.ts

@@ -89,7 +89,7 @@
       // turn:<username>:<password>@turn.eyevinn.technology:3478
       const m = server.match(/^turn:(\S+):(\S+)@(\S+):(\d+)/);
       if (m) {
         const [_, username, credential, host, port] = m;
         iceServers.push({
           urls: 'turn:' + host + ':' + port,
           username: username,
@@ -151,6 +151,11 @@
     await player.load(new URL(channelUrl));
   });
 
+  const stopButton = document.querySelector<HTMLButtonElement>('#stop');
+  stopButton?.addEventListener('click', async () => {
+    await player.unload();
+  });
+
   clientTimeMsElement = document.querySelector<HTMLSpanElement>('#localTimeMs');
   window.setInterval(updateClientClock, 1);
 });

demo/index.html

@@ -59,6 +59,7 @@ <h1>Media Server independent WebRTC player</h1>
         <label for="channelUrl">URL</label>
         <input id="channelUrl" type="text" value="" />
         <button id="play">Play</button>
+        <button id="stop">Stop</button>
         <input type="checkbox" id="preroll" />
         <label for="preroll">Preroll</label>
         <label for="prerollUrl">VMAP</label>

src/adapters/Adapter.ts

@@ -1,4 +1,4 @@
 const DEFAULT_CONNECT_TIMEOUT = 2000;
 
 export interface AdapterConnectOptions {
   timeout: number;
@@ -9,4 +9,5 @@
   getPeer(): RTCPeerConnection | undefined;
   resetPeer(newPeer: RTCPeerConnection): void;
   connect(opts?: AdapterConnectOptions): Promise<void>;
+  disconnect(): Promise<void>;
 }

src/adapters/EyevinnAdapter.ts

@@ -6,14 +6,14 @@
   private localPeer: RTCPeerConnection | undefined;
   private channelUrl: URL;
   private debug: boolean;
   private iceGatheringTimeout: any;
   private waitingForCandidates = false;
   private resourceUrl: URL | undefined = undefined;
 
   constructor(
     peer: RTCPeerConnection,
     channelUrl: URL,
     onError: (error: string) => void
   ) {
     this.channelUrl = channelUrl;
     this.debug = true;
@@ -60,17 +60,21 @@
     );
   }
 
+  async disconnect() {
+    return;
+  }
+
   private log(...args: any[]) {
     if (this.debug) {
       console.log('WebRTC-player', ...args);
     }
   }
 
   private error(...args: any[]) {
     console.error('WebRTC-player', ...args);
   }
 
   private onIceGatheringStateChange(event: Event) {
     if (!this.localPeer) {
       this.log('Local RTC peer not initialized');
       return;

src/adapters/WHEPAdapter.ts

@@ -51,7 +51,7 @@
     return this.localPeer;
   }
 
   async connect(opts?: AdapterConnectOptions) {
     try {
       await this.initSdpExchange();
     } catch (error) {
@@ -59,6 +59,18 @@
     }
   }
 
+  async disconnect() {
+    if (this.resource) {
+      this.log(`Disconnecting by removing resource ${this.resource}`);
+      const response = await fetch(this.resource, {
+        method: 'DELETE'
+      });
+      if (response.ok) {
+        this.log(`Successfully removed resource`);
+      }
+    }
+  }
+
   private async initSdpExchange() {
     clearTimeout(this.iceGatheringTimeout);
 
@@ -109,7 +121,7 @@
     this.log(candidate.candidate);
   }
 
   private onIceGatheringStateChange(event: Event) {
     if (this.localPeer) {
       this.log('IceGatheringState', this.localPeer.iceGatheringState);
       if (
@@ -147,7 +159,7 @@
   private getResouceUrlFromHeaders(headers: Headers): string | null {
     if (headers.get('Location') && headers.get('Location')?.match(/^\//)) {
       const resourceUrl = new URL(
         headers.get('Location')!,
         this.channelUrl.origin
       );
       return resourceUrl.toString();

src/adapters/WHPPAdapter.ts

@@ -37,6 +37,10 @@ export class WHPPAdapter implements Adapter {
     }
   }
 
+  async disconnect() {
+    return;
+  }
+
   private log(...args: any[]) {
     if (this.debug) {
       console.log('WebRTC-player', ...args);

src/index.ts

@@ -240,6 +240,11 @@ export class WebRTCPlayer extends EventEmitter {
     this.videoElement.muted = false;
   }
 
+  async unload() {
+    await this.adapter.disconnect();
+    this.stop();
+  }
+
   stop() {
     clearInterval(this.statsInterval);
     this.peer.close();