Add connection state logging and implement ice connection state chang…

…e handler
shinyoshiaki · Feb 8, 2025 · 4209259 · 4209259
1 parent 6849a4b
commit 4209259
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 1 deletion.
diff --git a/examples/mediachannel/sendrecv/answer.ts b/examples/mediachannel/sendrecv/answer.ts
@@ -0,0 +1,38 @@
+import { Server } from "ws";
+import {
+  RTCPeerConnection,
+  useSdesRTPStreamId,
+} from "../../../packages/webrtc/src";
+
+const server = new Server({ port: 8888 });
+console.log("start");
+
+server.on("connection", (socket) => {
+  socket.on("message", async (data) => {
+    const offer = JSON.parse(data as string);
+
+    const pc = new RTCPeerConnection({
+      iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+      headerExtensions: {
+        video: [useSdesRTPStreamId()],
+        audio: [],
+      },
+    });
+    pc.onconnectionstatechange = () => {
+      console.log("connection state", pc.connectionState);
+    };
+    pc.oniceconnectionstatechange = () => {
+      console.log("ice connection state", pc.iceConnectionState);
+    };
+
+    const transceiver = pc.addTransceiver("video", { direction: "recvonly" });
+
+    transceiver.onTrack.subscribe((track, transceiver) => {
+      transceiver.sender.replaceTrack(track);
+    });
+
+    await pc.setRemoteDescription(offer);
+    await pc.setLocalDescription(await pc.createAnswer());
+    socket.send(JSON.stringify(pc.localDescription));
+  });
+});
diff --git a/examples/mediachannel/sendrecv/offer.html b/examples/mediachannel/sendrecv/offer.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Offer</title>
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/babel-regenerator-runtime@6.5.0/runtime.min.js"></script>
+</head>
+
+<body>
+  <div class="main">
+    <div class="section" id="app1"></div>
+  </div>
+  <script type="text/babel">
+    let rtc;
+    const App = () => {
+      const videoRef = React.useRef();
+      const videoRef2 = React.useRef();
+      const videoRef3 = React.useRef();
+
+      const main = async () => {
+        const socket = new WebSocket("ws://localhost:8888");
+        await new Promise((r) => (socket.onopen = r));
+        console.log("open websocket");
+
+        const peer = (rtc = new RTCPeerConnection({
+          iceServers: [],
+        }));
+
+        socket.onmessage = async (ev) => {
+          const answer = JSON.parse(ev.data);
+          console.log("answer", answer.sdp);
+          await peer.setRemoteDescription(answer);
+        };
+
+        peer.oniceconnectionstatechange = () => {
+          console.log("oniceconnectionstatechange", peer.iceConnectionState);
+        };
+        peer.onicecandidate = (ev) => {
+          if (!ev.candidate) {
+            console.log("offer", peer.localDescription.sdp);
+            socket.send(JSON.stringify(peer.localDescription));
+          }
+        };
+
+        peer.ontrack = (e) => {
+          console.log("ontrack", e);
+          videoRef.current.srcObject = new MediaStream([e.track]);
+        };
+
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: true,
+          audio: false,
+        });
+
+        peer.addTrack(stream.getVideoTracks()[0],);
+
+        await peer.setLocalDescription(await peer.createOffer());
+      };
+
+      React.useEffect(() => {
+        main();
+      }, []);
+
+      return (
+        <div>
+          offer
+          <video ref={videoRef} autoPlay muted />
+          <video ref={videoRef2} autoPlay muted />
+          <video ref={videoRef3} autoPlay muted />
+        </div>
+      );
+    };
+
+    ReactDOM.render(<App />, document.getElementById("app1"));
+  </script>
+</body>
+
+</html>
diff --git a/examples/mediachannel/sendrecv/offer.ts b/examples/mediachannel/sendrecv/offer.ts
@@ -14,6 +14,12 @@ server.on("connection", async (socket) => {
       video: [useSdesMid(), useAbsSendTime()],
     },
   });
+  pc.onconnectionstatechange = () => {
+    console.log("connection state", pc.connectionState);
+  };
+  pc.oniceconnectionstatechange = () => {
+    console.log("ice connection state", pc.iceConnectionState);
+  };
 
   const video = pc.addTransceiver("video");
   video.onTrack.subscribe((track) => {

diff --git a/packages/webrtc/src/peerConnection.ts b/packages/webrtc/src/peerConnection.ts
@@ -111,6 +111,7 @@ export class RTCPeerConnection extends EventTarget {
   onsignalingstatechange?: CallbackWithValue<any>;
   ontrack?: CallbackWithValue<RTCTrackEvent>;
   onconnectionstatechange?: Callback;
+  oniceconnectionstatechange?: Callback;
 
   private readonly router = new RtpRouter();
   private certificate?: RTCCertificate;
@@ -1540,13 +1541,18 @@ export class RTCPeerConnection extends EventTarget {
     this.iceConnectionState = newState;
     this.iceConnectionStateChange.execute(newState);
     this.emit("iceconnectionstatechange", newState);
+    if (this.oniceconnectionstatechange) {
+      this.oniceconnectionstatechange();
+    }
   }
 
   private setSignalingState(state: RTCSignalingState) {
     log("signalingStateChange", state);
     this.signalingState = state;
     this.signalingStateChange.execute(state);
-    if (this.onsignalingstatechange) this.onsignalingstatechange({});
+    if (this.onsignalingstatechange) {
+      this.onsignalingstatechange({});
+    }
   }
 
   private setConnectionState(state: ConnectionState) {