feat: add disconnect from webrtc connection

www/src/services/webrtc-service.js

@@ -1,12 +1,20 @@
+import EventEmitter from "../tools/event-emitter";
 import WebsocketService from "./websocket-service";
 
 function WebRTCService() {
   const TYPE_SIGNALING = "signaling";
+  const STATE_CONNECTED = "connected";
+  const STATE_DISCONNECTED = "disconnected";
+  const STATE_CLOSED = "closed";
+  const STATE_FAILED = "failed";
+  const ICE_CONNECTION_STATE_CHANGE_EVENT = "iceconnectionstatechange";
 
   let videoElement;
   let peerConnection;
   let peerId;
 
+  let eventEmitter = new EventEmitter();
+
   WebsocketService.onMessage((data) => {
     let dataObject = JSON.parse(data);
     let sender = dataObject.sender;
@@ -19,10 +27,15 @@ function WebRTCService() {
     peerId = targetId;
     let configuration = getConfiguration();
     peerConnection = new RTCPeerConnection(configuration);
-    console.log("ICE connection state:" + peerConnection.iceConnectionState)
-    peerConnection.oniceconnectionstatechange = (event) => {
-      console.log("ICE connection state changed to:", peerConnection.iceConnectionState);
-    };
+    console.log("ICE connection state:" + peerConnection.iceConnectionState);
+    peerConnection.addEventListener("iceconnectionstatechange", (event) => {
+      let state = peerConnection.iceConnectionState;
+      console.log("ICE connection state changed to:", state);
+      eventEmitter.dispatchEvent(ICE_CONNECTION_STATE_CHANGE_EVENT, state);
+      if (state === STATE_CONNECTED) {
+        videoElement.play();
+      }
+    });
     peerConnection.addEventListener("signalingstatechange", (event) => {
       console.log("Signaling state changed to:", event.target.signalingState);
     });
@@ -43,9 +56,14 @@ function WebRTCService() {
     peerConnection.onnegotiationneeded = () => {
       console.log("Negotiation needed");
       negotiate(targetId);
-    }
+    };
     negotiate(targetId);
   }
+  
+  function disconnect() {
+    peerConnection.close();
+    eventEmitter.dispatchEvent(ICE_CONNECTION_STATE_CHANGE_EVENT, peerConnection.iceConnectionState);
+  }
 
   async function negotiate(targetId) {
     try {
@@ -53,7 +71,7 @@ function WebRTCService() {
         offerToReceiveAudio: true,
         offerToReceiveVideo: true,
       });
-      console.log("Created offer:", offer)
+      console.log("Created offer:", offer);
       await peerConnection.setLocalDescription(offer);
       sendOffer(targetId, offer);
     } catch (error) {
@@ -97,7 +115,7 @@ function WebRTCService() {
 
   function handleAnswer(answer) {
     console.log("Remote answer:", answer);
-    if (peerConnection.signalingState === "stable") return
+    if (peerConnection.signalingState === "stable") return;
     peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
   }
 
@@ -107,6 +125,12 @@ function WebRTCService() {
     peerConnection.addIceCandidate(iceCandidate);
   }
 
+  function onStateChanged(callback) {
+    eventEmitter.on(ICE_CONNECTION_STATE_CHANGE_EVENT, () => {
+      callback(peerConnection.iceConnectionState);
+    });
+  }
+
   function getConfiguration() {
     return {
       iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
@@ -123,9 +147,15 @@ function WebRTCService() {
   }
 
   return {
+    STATE_CONNECTED,
+    STATE_DISCONNECTED,
+    STATE_CLOSED,
+    STATE_FAILED,
     connect,
+    disconnect,
     setVideoElement,
     getVideoElement,
+    onStateChanged,
   };
 }
 

www/src/views/integration-view.jsx

@@ -10,6 +10,16 @@ function IntegrationView(props) {
       ? integration().getName()
       : "Integration"
   );
+  const [connectionState, setConnectionState] = createSignal(
+    WebRTCService.STATE_DISCONNECTED
+  );
+  const showConnectButton = createMemo(
+    () =>
+      connectionState() === WebRTCService.STATE_DISCONNECTED ||
+      connectionState() === WebRTCService.STATE_FAILED ||
+      connectionState() === WebRTCService.STATE_CLOSED
+  );
+  WebRTCService.onStateChanged(handleConnectionStateChanged);
   let videoElement = null;
 
   function handleConnectWebRTC() {
@@ -18,6 +28,14 @@ function IntegrationView(props) {
     WebRTCService.connect(integrationId);
   }
 
+  function handleDisconnectWebRTC() {
+    WebRTCService.disconnect();
+  }
+
+  function handleConnectionStateChanged(state) {
+    setConnectionState(state);
+  }
+
   return (
     <div
       class={
@@ -29,10 +47,24 @@ function IntegrationView(props) {
       <h1>{title}</h1>
       <div class="d-flex flex-row">
         <div class="d-flex flex-row justify-content-end flex-fill">
-          <button class="btn btn-dark me-2 mb-3" onClick={handleConnectWebRTC}>
-            <i class="bi bi-plug-fill me-2"></i>
-            Connect
-          </button>
+          <Show when={showConnectButton()}>
+            <button
+              class="btn btn-dark me-2 mb-3"
+              onClick={handleConnectWebRTC}
+            >
+              <i class="bi bi-plug-fill me-2"></i>
+              Connect
+            </button>
+          </Show>
+          <Show when={!showConnectButton()}>
+            <button
+              class="btn btn-dark me-2 mb-3"
+              onClick={handleDisconnectWebRTC}
+            >
+              <i class="bi bi-x-lg me-2"></i>
+              Disconnect
+            </button>
+          </Show>
         </div>
       </div>
       <div class="flex-fill d-flex flex-column justify-content-center align-items-center rounded overflow-hidden">
@@ -40,9 +72,6 @@ function IntegrationView(props) {
           ref={videoElement}
           class="w-100 h-100"
           style="background-color: #000"
-          controls={true}
-          muted={false}
-          autoplay={true}
         ></video>
       </div>
     </div>