feat(MediaChannel): Add experimental willCloseOnRemote event to Med…

…iaConnection. After it fires, hanging up a call will close the connection on the remote peer gracefully.
peers · Jul 5, 2023 · ed84829 · ed84829
1 parent da712f3
commit ed84829
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/e2e/mediachannel/close.js b/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!";
+ });
  }
 });
 

diff --git a/lib/mediaconnection.ts b/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();