feat(MediaChannel): Add experimental `willCloseOnRemote` event to MediaConnection.

After it fires, hanging up a call will close the connection on the remote peer gracefully.

e2e/mediachannel/close.js

@@ -14,7 +14,6 @@ const messages = document.getElementById("messages");
 const errorMessage = document.getElementById("error-message");
 
 const stream = window["sender-stream"].captureStream(30);
-// const stream =  await navigator.mediaDevices.getUserMedia({video: true, audio: true})
 const peer = new Peer({ debug: 3 });
 /**
  * @type {import("peerjs").MediaConnection}
@@ -29,18 +28,19 @@ peer
 	})
 	.once("call", (call) => {
 		mediaConnection = call;
-		mediaConnection.on("stream", function (stream) {
-			console.log("stream", stream);
-			const video = document.getElementById("receiver-stream");
-			console.log("video element", video);
-			video.srcObject = stream;
-			video.play();
-		});
-		mediaConnection.once("close", () => {
-			messages.textContent = "Closed!";
-		});
+		mediaConnection
+			.once("stream", function (stream) {
+				const video = document.getElementById("receiver-stream");
+				video.srcObject = stream;
+				video.play();
+			})
+			.once("close", () => {
+				messages.textContent = "Closed!";
+			})
+			.once("willCloseOnRemote", () => {
+				messages.textContent = "Connected!";
+			});
 		call.answer(stream);
-		messages.innerText = "Connected!";
 	});
 
 callBtn.addEventListener("click", async () => {
@@ -50,17 +50,16 @@ callBtn.addEventListener("click", async () => {
 	const receiverId = receiverIdInput.value;
 	if (receiverId) {
 		mediaConnection = peer.call(receiverId, stream);
-		mediaConnection.on("stream", (stream) => {
-			console.log("stream", stream);
-			const video = document.getElementById("receiver-stream");
-			console.log("video element", video);
-			video.srcObject = stream;
-			video.play();
-			messages.innerText = "Connected!";
-		});
-		mediaConnection.on("close", () => {
-			messages.textContent = "Closed!";
-		});
+		mediaConnection
+			.once("stream", (stream) => {
+				const video = document.getElementById("receiver-stream");
+				video.srcObject = stream;
+				video.play();
+				messages.innerText = "Connected!";
+			})
+			.once("close", () => {
+				messages.textContent = "Closed!";
+			});
 	}
 });
 

lib/mediaconnection.ts

@@ -16,6 +16,12 @@ export type MediaConnectionEvents = {
 	 * ```
 	 */
 	stream: (stream: MediaStream) => void;
+	/**
+	 * Emitted when the auxiliary data channel is established.
+	 * After this event, hanging up will close the connection cleanly on the remote peer.
+	 * @beta
+	 */
+	willCloseOnRemote: () => void;
 };
 
 /**
@@ -71,6 +77,11 @@ export class MediaConnection extends BaseConnection<MediaConnectionEvents> {
 	override _initializeDataChannel(dc: RTCDataChannel): void {
 		this._dc = dc;
 
+		this.dataChannel.onopen = () => {
+			logger.log(`DC#${this.connectionId} dc connection success`);
+			this.emit("willCloseOnRemote");
+		};
+
 		this.dataChannel.onclose = () => {
 			logger.log(`DC#${this.connectionId} dc closed for:`, this.peer);
 			this.close();