react-jssip-kit 0.7.6 → 0.7.7

package/dist/index.d.ts

@@ -57,10 +57,6 @@ type SipConfiguration = Omit<UAConfiguration, "password" | "uri"> & {
      * Maximum allowed concurrent sessions. Additional sessions are rejected.
      */
     maxSessionCount?: number;
-    /**
-     * Milliseconds to keep enqueued outgoing media before dropping. Defaults to 30000.
-     */
-    pendingMediaTtlMs?: number;
 };
 
 type StartOpts = {
@@ -173,10 +169,6 @@ type SipClientOptions = {
     errorHandler?: SipErrorHandler;
     debug?: boolean | string;
 };
-type MicrophoneRecoveryOptions = {
-    intervalMs?: number;
-    maxRetries?: number;
-};
 declare class SipClient extends EventTargetEmitter<JsSIPEventMap> {
     readonly userAgent: SipUserAgent;
     readonly stateStore: SipStateStore;
@@ -189,8 +181,6 @@ declare class SipClient extends EventTargetEmitter<JsSIPEventMap> {
     private sessionManager;
     private lifecycle;
     private micRecovery;
-    private micRecoveryEnabled;
-    private micRecoveryDefaults;
     private unloadHandler?;
     private stateLogOff?;
     get state(): SipState;
@@ -229,8 +219,6 @@ declare class SipClient extends EventTargetEmitter<JsSIPEventMap> {
     sendDTMFSession(sessionId: string, tones: string | number, options?: DTMFOptions): boolean;
     transferSession(sessionId: string, target: string, options?: ReferOptions): boolean;
     setSessionMedia(sessionId: string, stream: MediaStream): void;
-    enableMicrophoneRecovery(sessionId: string, options?: MicrophoneRecoveryOptions): () => void;
-    disableMicrophoneRecovery(sessionId: string): boolean;
     switchCameraSession(sessionId: string, track: MediaStreamTrack): false | Promise<boolean>;
     enableVideoSession(sessionId: string): boolean;
     disableVideoSession(sessionId: string): boolean;
@@ -274,8 +262,6 @@ declare function useSipActions(): {
         session: jssip_src_RTCSession.RTCSession;
     }[];
     setSessionMedia: (sessionId: string, stream: MediaStream) => void;
-    enableMicrophoneRecovery: (sessionId: string, options?: MicrophoneRecoveryOptions | undefined) => () => void;
-    disableMicrophoneRecovery: (sessionId: string) => boolean;
     switchCamera: (sessionId: string, track: MediaStreamTrack) => false | Promise<boolean>;
     enableVideo: (sessionId: string) => boolean;
     disableVideo: (sessionId: string) => boolean;

package/dist/index.js

@@ -476,7 +476,6 @@ function createSessionHandlers(deps) {
     rtc,
     detachSessionHandlers,
     onSessionFailed,
-    onSessionConfirmed,
     sessionId
   } = deps;
   return {
@@ -497,7 +496,7 @@ function createSessionHandlers(deps) {
     },
     confirmed: (e) => {
       emitter.emit("confirmed", e);
-      onSessionConfirmed?.(sessionId);
+      deps.enableMicrophoneRecovery?.(sessionId);
     },
     ended: (e) => {
       emitter.emit("ended", e);
@@ -609,8 +608,8 @@ var WebRTCSessionController = class {
   }
   cleanup(stopTracks = true) {
     const pc = this.getPC();
+    const isClosed = pc?.connectionState === "closed" || pc?.signalingState === "closed";
     if (pc && typeof pc.getSenders === "function") {
-      const isClosed = pc.connectionState === "closed" || pc.signalingState === "closed";
       if (!isClosed) {
         for (const s of pc.getSenders()) {
           try {
@@ -621,8 +620,14 @@ var WebRTCSessionController = class {
       }
     }
     if (stopTracks && this.mediaStream) {
-      for (const t of this.mediaStream.getTracks())
+      const senderTracks = pc && !isClosed ? new Set(
+        pc.getSenders().map((s) => s.track).filter((t) => Boolean(t))
+      ) : null;
+      for (const t of this.mediaStream.getTracks()) {
+        if (senderTracks?.has(t))
+          continue;
         t.stop();
+      }
     }
     this.mediaStream = null;
     this.currentSession = null;
@@ -701,29 +706,14 @@ var WebRTCSessionController = class {
 var SessionManager = class {
   constructor() {
     this.entries = /* @__PURE__ */ new Map();
-    this.pendingMediaQueue = [];
-    this.pendingMediaTtlMs = 3e4;
-  }
-  setPendingMediaTtl(ms) {
-    if (typeof ms === "number" && ms > 0)
-      this.pendingMediaTtlMs = ms;
-  }
-  enqueueOutgoingMedia(stream) {
-    this.pendingMediaQueue.push({ stream, addedAt: Date.now() });
-  }
-  dequeueOutgoingMedia() {
-    const now = Date.now();
-    while (this.pendingMediaQueue.length) {
-      const next = this.pendingMediaQueue.shift();
-      if (!next)
-        break;
-      if (now - next.addedAt <= this.pendingMediaTtlMs) {
-        return next.stream;
-      } else {
-        next.stream.getTracks().forEach((t) => t.stop());
-      }
+  }
+  stopMediaStream(stream) {
+    if (!stream)
+      return;
+    for (const t of stream.getTracks()) {
+      if (t.readyState !== "ended")
+        t.stop();
     }
-    return null;
   }
   getOrCreateRtc(sessionId, session) {
     let entry = this.entries.get(sessionId);
@@ -765,6 +755,9 @@ var SessionManager = class {
       session: null,
       media: null
     };
+    if (entry.media && entry.media !== stream) {
+      this.stopMediaStream(entry.media);
+    }
     entry.media = stream;
     entry.rtc.setMediaStream(stream);
     this.entries.set(sessionId, entry);
@@ -794,15 +787,16 @@ var SessionManager = class {
     const entry = this.entries.get(sessionId);
     if (entry) {
       entry.rtc.cleanup();
+      this.stopMediaStream(entry.media);
       this.entries.delete(sessionId);
     }
   }
   cleanupAllSessions() {
     for (const [, entry] of this.entries.entries()) {
       entry.rtc.cleanup();
+      this.stopMediaStream(entry.media);
     }
     this.entries.clear();
-    this.pendingMediaQueue = [];
   }
   answer(sessionId, options) {
     const rtc = this.getRtc(sessionId);
@@ -850,35 +844,102 @@ var SessionLifecycle = class {
   }
   handleNewRTCSession(e) {
     const session = e.session;
-    const sessionId = String(session?.id ?? crypto.randomUUID?.() ?? Date.now());
+    const sessionId = String(
+      session?.id ?? crypto.randomUUID?.() ?? Date.now()
+    );
     const currentSessions = this.state.getState().sessions;
     if (currentSessions.length >= this.getMaxSessionCount()) {
       try {
-        session.terminate?.({ status_code: 486, reason_phrase: "Busy Here" });
+        session.terminate?.({
+          status_code: 486,
+          reason_phrase: "Busy Here"
+        });
       } catch {
       }
       if (e.originator === "remote") {
         this.emit("missed", e);
+      } else {
+        this.emitError(
+          "max session count reached",
+          "MAX_SESSIONS_REACHED",
+          "max session count reached"
+        );
       }
-      this.emitError("max session count reached", "MAX_SESSIONS_REACHED", "max session count reached");
       return;
     }
-    const outgoingMedia = e.originator === "local" ? this.sessionManager.dequeueOutgoingMedia() : null;
-    if (outgoingMedia)
-      this.sessionManager.setSessionMedia(sessionId, outgoingMedia);
     const rtc = this.sessionManager.getOrCreateRtc(sessionId, session);
-    if (outgoingMedia)
-      rtc.setMediaStream(outgoingMedia);
     this.sessionManager.setSession(sessionId, session);
     this.attachSessionHandlers(sessionId, session);
-    holdOtherSessions(
-      this.state,
-      sessionId,
-      (id) => {
-        const otherRtc = this.sessionManager.getRtc(id);
-        otherRtc?.hold();
+    if (e.originator === "local" && !rtc.mediaStream) {
+      const maxAttempts = 5;
+      const retryDelayMs = 500;
+      let attempts = 0;
+      let retryScheduled = false;
+      let retryTimer = null;
+      let stopped = false;
+      const tryBindFromPc = (pc) => {
+        if (stopped || !pc || this.sessionManager.getRtc(sessionId)?.mediaStream) {
+          return false;
+        }
+        const audioSender = pc?.getSenders?.()?.find((s) => s.track?.kind === "audio");
+        const audioTrack = audioSender?.track;
+        if (!audioTrack)
+          return false;
+        const outgoingStream = new MediaStream([audioTrack]);
+        this.sessionManager.setSessionMedia(sessionId, outgoingStream);
+        return true;
+      };
+      const scheduleRetry = (pc) => {
+        if (stopped || retryScheduled || attempts >= maxAttempts) {
+          session.off?.("peerconnection", onPeer);
+          return;
+        }
+        retryScheduled = true;
+        attempts += 1;
+        retryTimer = setTimeout(() => {
+          retryScheduled = false;
+          retryTimer = null;
+          if (tryBindFromPc(pc)) {
+            session.off?.("peerconnection", onPeer);
+            return;
+          }
+          scheduleRetry(pc);
+        }, retryDelayMs);
+      };
+      const onPeer = (data) => {
+        if (stopped)
+          return;
+        if (tryBindFromPc(data.peerconnection)) {
+          session.off?.("peerconnection", onPeer);
+          return;
+        }
+        scheduleRetry(data.peerconnection);
+      };
+      const stopRetry = () => {
+        if (stopped)
+          return;
+        stopped = true;
+        if (retryTimer) {
+          clearTimeout(retryTimer);
+          retryTimer = null;
+        }
+        session.off?.("peerconnection", onPeer);
+        session.off?.("ended", stopRetry);
+        session.off?.("failed", stopRetry);
+      };
+      const existingPc = session?.connection;
+      if (!tryBindFromPc(existingPc)) {
+        if (existingPc)
+          scheduleRetry(existingPc);
+        session.on?.("peerconnection", onPeer);
       }
-    );
+      session.on?.("ended", stopRetry);
+      session.on?.("failed", stopRetry);
+    }
+    holdOtherSessions(this.state, sessionId, (id) => {
+      const otherRtc = this.sessionManager.getRtc(id);
+      otherRtc?.hold();
+    });
     const sdpHasVideo = e.request?.body && e.request.body.toString().includes("m=video") || session?.connection?.getReceivers?.()?.some((r) => r.track?.kind === "video");
     upsertSessionState(this.state, sessionId, {
       direction: e.originator,
@@ -892,6 +953,126 @@ var SessionLifecycle = class {
   }
 };
 
+// src/jssip-lib/sip/micRecovery.ts
+var MicRecoveryManager = class {
+  constructor(deps) {
+    this.enabled = false;
+    this.defaults = {
+      intervalMs: 2e3,
+      maxRetries: Infinity
+    };
+    this.active = /* @__PURE__ */ new Map();
+    this.deps = deps;
+  }
+  configure(config) {
+    if (typeof config.enabled === "boolean") {
+      this.enabled = config.enabled;
+    }
+    if (typeof config.intervalMs === "number") {
+      this.defaults.intervalMs = config.intervalMs;
+    }
+    if (typeof config.maxRetries === "number") {
+      this.defaults.maxRetries = config.maxRetries;
+    }
+  }
+  enable(sessionId, options = {}) {
+    if (!this.enabled)
+      return () => {
+      };
+    this.disable(sessionId);
+    const intervalMs = options.intervalMs ?? this.defaults.intervalMs;
+    const maxRetries = options.maxRetries ?? this.defaults.maxRetries;
+    let retries = 0;
+    let stopped = false;
+    const startedAt = Date.now();
+    const warmupMs = Math.max(intervalMs * 2, 2e3);
+    const tick = async () => {
+      if (stopped || retries >= maxRetries)
+        return;
+      const rtc = this.deps.getRtc(sessionId);
+      const session2 = this.deps.getSession(sessionId);
+      if (!rtc || !session2)
+        return;
+      const sessionState = this.deps.getSessionState(sessionId);
+      if (sessionState?.muted)
+        return;
+      const stream = rtc.mediaStream;
+      const track = stream?.getAudioTracks?.()[0];
+      const pc2 = session2?.connection;
+      const sender = pc2?.getSenders?.()?.find((s) => s.track?.kind === "audio");
+      if (!track && !sender)
+        return;
+      if (Date.now() - startedAt < warmupMs)
+        return;
+      if (pc2?.connectionState === "new" || pc2?.connectionState === "connecting" || pc2?.iceConnectionState === "new" || pc2?.iceConnectionState === "checking") {
+        return;
+      }
+      const trackLive = track?.readyState === "live";
+      const senderLive = sender?.track?.readyState === "live";
+      if (trackLive && senderLive)
+        return;
+      this.deps.emitError(
+        {
+          cause: "microphone dropped",
+          trackLive,
+          senderLive
+        },
+        "MICROPHONE_DROPPED",
+        "microphone dropped"
+      );
+      retries += 1;
+      if (trackLive && !senderLive && track) {
+        await rtc.replaceAudioTrack(track);
+        return;
+      }
+      let nextStream;
+      try {
+        const deviceId = track?.getSettings?.().deviceId ?? sender?.track?.getSettings?.().deviceId;
+        nextStream = await this.deps.requestMicrophoneStream(deviceId);
+      } catch (err) {
+        console.warn("[sip] mic recovery failed to get stream", err);
+        return;
+      }
+      const nextTrack = nextStream.getAudioTracks()[0];
+      if (!nextTrack)
+        return;
+      await rtc.replaceAudioTrack(nextTrack);
+      this.deps.setSessionMedia(sessionId, nextStream);
+    };
+    const timer = setInterval(() => {
+      void tick();
+    }, intervalMs);
+    void tick();
+    const session = this.deps.getSession(sessionId);
+    const pc = session?.connection;
+    const onIceChange = () => {
+      const state = pc?.iceConnectionState;
+      if (state === "failed" || state === "disconnected")
+        void tick();
+    };
+    pc?.addEventListener?.("iceconnectionstatechange", onIceChange);
+    const stop = () => {
+      stopped = true;
+      clearInterval(timer);
+      pc?.removeEventListener?.("iceconnectionstatechange", onIceChange);
+    };
+    this.active.set(sessionId, { stop });
+    return stop;
+  }
+  disable(sessionId) {
+    const entry = this.active.get(sessionId);
+    if (!entry)
+      return false;
+    entry.stop();
+    this.active.delete(sessionId);
+    return true;
+  }
+  cleanupAll() {
+    this.active.forEach((entry) => entry.stop());
+    this.active.clear();
+  }
+};
+
 // src/jssip-lib/sip/client.ts
 var SESSION_DEBUG_KEY = "sip-debug-enabled";
 var SipClient = class extends EventTargetEmitter {
@@ -902,12 +1083,6 @@ var SipClient = class extends EventTargetEmitter {
     this.sessionHandlers = /* @__PURE__ */ new Map();
     this.maxSessionCount = Infinity;
     this.sessionManager = new SessionManager();
-    this.micRecovery = /* @__PURE__ */ new Map();
-    this.micRecoveryEnabled = false;
-    this.micRecoveryDefaults = {
-      intervalMs: 2e3,
-      maxRetries: Infinity
-    };
     this.errorHandler = options.errorHandler ?? new SipErrorHandler({
       formatter: options.formatError,
       messages: options.errorMessages
@@ -929,6 +1104,14 @@ var SipClient = class extends EventTargetEmitter {
       attachSessionHandlers: (sessionId, session) => this.attachSessionHandlers(sessionId, session),
       getMaxSessionCount: () => this.maxSessionCount
     });
+    this.micRecovery = new MicRecoveryManager({
+      getRtc: (sessionId) => this.sessionManager.getRtc(sessionId),
+      getSession: (sessionId) => this.sessionManager.getSession(sessionId),
+      getSessionState: (sessionId) => this.stateStore.getState().sessions.find((s) => s.id === sessionId),
+      setSessionMedia: (sessionId, stream) => this.sessionManager.setSessionMedia(sessionId, stream),
+      emitError: (raw, code, fallback) => this.emitError(raw, code, fallback),
+      requestMicrophoneStream: (deviceId) => this.requestMicrophoneStreamInternal(deviceId)
+    });
     if (typeof window !== "undefined") {
       window.sipDebugBridge = (debug) => this.setDebug(debug ?? true);
     }
@@ -945,18 +1128,14 @@ var SipClient = class extends EventTargetEmitter {
       micRecoveryIntervalMs,
       micRecoveryMaxRetries,
       maxSessionCount,
-      pendingMediaTtlMs,
       ...uaCfg
     } = config;
     this.maxSessionCount = typeof maxSessionCount === "number" ? maxSessionCount : Infinity;
-    this.micRecoveryEnabled = Boolean(enableMicRecovery);
-    if (typeof micRecoveryIntervalMs === "number") {
-      this.micRecoveryDefaults.intervalMs = micRecoveryIntervalMs;
-    }
-    if (typeof micRecoveryMaxRetries === "number") {
-      this.micRecoveryDefaults.maxRetries = micRecoveryMaxRetries;
-    }
-    this.sessionManager.setPendingMediaTtl(pendingMediaTtlMs);
+    this.micRecovery.configure({
+      enabled: Boolean(enableMicRecovery),
+      intervalMs: micRecoveryIntervalMs,
+      maxRetries: micRecoveryMaxRetries
+    });
     const debug = cfgDebug ?? this.getPersistedDebug() ?? this.debugPattern;
     this.userAgent.start(uri, password, uaCfg, { debug });
     this.attachUAHandlers();
@@ -976,10 +1155,15 @@ var SipClient = class extends EventTargetEmitter {
   call(target, callOptions = {}) {
     try {
       const opts = this.ensureMediaConstraints(callOptions);
-      if (opts.mediaStream)
-        this.sessionManager.enqueueOutgoingMedia(opts.mediaStream);
       const ua = this.userAgent.getUA();
-      ua?.call(target, opts);
+      const session = ua?.call(target, opts);
+      if (session && opts.mediaStream) {
+        const sessionId = String(session?.id ?? "");
+        if (sessionId) {
+          this.sessionManager.setSessionMedia(sessionId, opts.mediaStream);
+          this.sessionManager.setSession(sessionId, session);
+        }
+      }
     } catch (e) {
       const err = this.emitError(e, "CALL_FAILED", "call failed");
       this.cleanupAllSessions();
@@ -1069,14 +1253,13 @@ var SipClient = class extends EventTargetEmitter {
   cleanupSession(sessionId, session) {
     const targetSession = session ?? this.sessionManager.getSession(sessionId) ?? this.sessionManager.getRtc(sessionId)?.currentSession;
     this.detachSessionHandlers(sessionId, targetSession);
-    this.disableMicrophoneRecovery(sessionId);
+    this.micRecovery.disable(sessionId);
     this.sessionManager.cleanupSession(sessionId);
     removeSessionState(this.stateStore, sessionId);
   }
   cleanupAllSessions() {
     this.sessionManager.cleanupAllSessions();
-    this.micRecovery.forEach((entry) => entry.stop());
-    this.micRecovery.clear();
+    this.micRecovery.cleanupAll();
     this.sessionHandlers.clear();
     this.stateStore.setState({
       sessions: [],
@@ -1090,12 +1273,9 @@ var SipClient = class extends EventTargetEmitter {
       state: this.stateStore,
       rtc,
       detachSessionHandlers: () => this.cleanupSession(sessionId, session),
+      emitError: (raw, code, fallback) => this.emitError(raw, code, fallback),
       onSessionFailed: (err, event) => this.onSessionFailed(err, event),
-      onSessionConfirmed: (confirmedSessionId) => {
-        if (this.micRecoveryEnabled) {
-          this.enableMicrophoneRecovery(confirmedSessionId);
-        }
-      },
+      enableMicrophoneRecovery: (confirmedSessionId) => this.micRecovery.enable(confirmedSessionId),
       sessionId
     });
   }
@@ -1203,102 +1383,6 @@ var SipClient = class extends EventTargetEmitter {
   setSessionMedia(sessionId, stream) {
     this.sessionManager.setSessionMedia(sessionId, stream);
   }
-  enableMicrophoneRecovery(sessionId, options = {}) {
-    const resolved = this.resolveExistingSessionId(sessionId);
-    if (!resolved)
-      return () => {
-      };
-    this.disableMicrophoneRecovery(resolved);
-    const intervalMs = options.intervalMs ?? this.micRecoveryDefaults.intervalMs;
-    const maxRetries = options.maxRetries ?? this.micRecoveryDefaults.maxRetries;
-    let retries = 0;
-    let stopped = false;
-    const startedAt = Date.now();
-    const warmupMs = Math.max(intervalMs * 2, 2e3);
-    const tick = async () => {
-      if (stopped || retries >= maxRetries)
-        return;
-      const rtc = this.sessionManager.getRtc(resolved);
-      const session2 = this.sessionManager.getSession(resolved);
-      if (!rtc || !session2)
-        return;
-      const sessionState = this.stateStore.getState().sessions.find((s) => s.id === resolved);
-      if (sessionState?.muted)
-        return;
-      const stream = rtc.mediaStream;
-      const track = stream?.getAudioTracks?.()[0];
-      const pc2 = session2?.connection;
-      const sender = pc2?.getSenders?.().find((s) => s.track?.kind === "audio");
-      if (!track && !sender)
-        return;
-      if (Date.now() - startedAt < warmupMs)
-        return;
-      if (pc2?.connectionState === "new" || pc2?.connectionState === "connecting" || pc2?.iceConnectionState === "new" || pc2?.iceConnectionState === "checking") {
-        return;
-      }
-      const trackLive = track?.readyState === "live";
-      const senderLive = sender?.track?.readyState === "live";
-      if (trackLive && senderLive)
-        return;
-      this.emitError(
-        {
-          cause: "microphone dropped",
-          trackLive,
-          senderLive
-        },
-        "MICROPHONE_DROPPED",
-        "microphone dropped"
-      );
-      retries += 1;
-      if (trackLive && !senderLive && track) {
-        await rtc.replaceAudioTrack(track);
-        return;
-      }
-      let nextStream;
-      try {
-        const deviceId = track?.getSettings?.().deviceId ?? sender?.track?.getSettings?.().deviceId;
-        nextStream = await this.requestMicrophoneStreamInternal(deviceId);
-      } catch (err) {
-        console.warn("[sip] mic recovery failed to get stream", err);
-        return;
-      }
-      const nextTrack = nextStream.getAudioTracks()[0];
-      if (!nextTrack)
-        return;
-      await rtc.replaceAudioTrack(nextTrack);
-      this.sessionManager.setSessionMedia(resolved, nextStream);
-    };
-    const timer = setInterval(() => {
-      void tick();
-    }, intervalMs);
-    void tick();
-    const session = this.sessionManager.getSession(resolved);
-    const pc = session?.connection;
-    const onIceChange = () => {
-      const state = pc?.iceConnectionState;
-      if (state === "failed" || state === "disconnected")
-        void tick();
-    };
-    pc?.addEventListener?.("iceconnectionstatechange", onIceChange);
-    const stop = () => {
-      stopped = true;
-      clearInterval(timer);
-      pc?.removeEventListener?.("iceconnectionstatechange", onIceChange);
-    };
-    this.micRecovery.set(resolved, { stop });
-    return stop;
-  }
-  disableMicrophoneRecovery(sessionId) {
-    const resolved = this.resolveExistingSessionId(sessionId);
-    if (!resolved)
-      return false;
-    const entry = this.micRecovery.get(resolved);
-    if (!entry)
-      return false;
-    entry.stop();
-    this.micRecovery.delete(resolved);
-    return true;
-  }
   switchCameraSession(sessionId, track) {
     if (!this.sessionExists(sessionId))
       return false;
@@ -1464,8 +1548,6 @@ function useSipActions() {
       getSessionIds: () => client.getSessionIds(),
       getSessions: () => client.getSessions(),
       setSessionMedia: (...args) => client.setSessionMedia(...args),
-      enableMicrophoneRecovery: (...args) => client.enableMicrophoneRecovery(...args),
-      disableMicrophoneRecovery: (...args) => client.disableMicrophoneRecovery(...args),
       switchCamera: (...args) => client.switchCameraSession(...args),
       enableVideo: (...args) => client.enableVideoSession(...args),
       disableVideo: (...args) => client.disableVideoSession(...args)
@@ -1539,6 +1621,7 @@ function createCallPlayer(audioEl) {
     return () => session.off("peerconnection", onPeer);
   };
   function bindToSession(session) {
+    clearAudioStream(audioEl.srcObject);
     if (session?.direction === "outgoing" && session.connection instanceof RTCPeerConnection) {
       cleanupTrackListener = dispose(cleanupTrackListener);
       cleanupTrackListener = attachTracks(session.connection);
@@ -1555,6 +1638,7 @@ function createCallPlayer(audioEl) {
       const e = payload?.data;
       cleanupSessionPeerListener = dispose(cleanupSessionPeerListener);
       cleanupTrackListener = dispose(cleanupTrackListener);
+      clearAudioStream(audioEl.srcObject);
       if (!e?.session)
         return;
       cleanupSessionPeerListener = listenSessionPeerconnection(e.session);