From 420925992ac8dfc8dcf1547dc596e9c657673bf2 Mon Sep 17 00:00:00 2001 From: shinyoshiaki Date: Sat, 8 Feb 2025 23:22:21 +0900 Subject: [PATCH] Add connection state logging and implement ice connection state change handler --- examples/mediachannel/sendrecv/answer.ts | 38 +++++++++++ examples/mediachannel/sendrecv/offer.html | 82 +++++++++++++++++++++++ examples/mediachannel/sendrecv/offer.ts | 6 ++ packages/webrtc/src/peerConnection.ts | 8 ++- 4 files changed, 133 insertions(+), 1 deletion(-) create mode 100644 examples/mediachannel/sendrecv/answer.ts create mode 100644 examples/mediachannel/sendrecv/offer.html diff --git a/examples/mediachannel/sendrecv/answer.ts b/examples/mediachannel/sendrecv/answer.ts new file mode 100644 index 00000000..a85eb67c --- /dev/null +++ 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 new file mode 100644 index 00000000..0c6ffd08 --- /dev/null +++ b/examples/mediachannel/sendrecv/offer.html @@ -0,0 +1,82 @@ + + + + + + Offer + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/examples/mediachannel/sendrecv/offer.ts b/examples/mediachannel/sendrecv/offer.ts index dbc10ff5..e2fd300f 100644 --- 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 index 8e8e2884..c6bb3679 100644 --- a/packages/webrtc/src/peerConnection.ts +++ b/packages/webrtc/src/peerConnection.ts @@ -111,6 +111,7 @@ export class RTCPeerConnection extends EventTarget { onsignalingstatechange?: CallbackWithValue; ontrack?: CallbackWithValue; 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) {