@stream-io/video-client 1.44.4 → 1.44.6-beta.0

package/dist/src/Call.d.ts

@@ -162,7 +162,7 @@ export declare class Call {
     /**
      * A flag indicating whether the call was created by the current user.
      */
-    get isCreatedByMe(): boolean;
+    get isCreatedByMe(): boolean | "" | undefined;
     /**
      * Update from the call response from the "call.ring" event
      * @internal

package/dist/src/helpers/AudioBindingsWatchdog.d.ts

@@ -0,0 +1,37 @@
+import type { AudioTrackType } from '../types';
+import { CallState } from '../store';
+import { Tracer } from '../stats';
+/**
+ * Tracks audio element bindings and periodically warns about
+ * remote participants whose audio streams have no bound element.
+ */
+export declare class AudioBindingsWatchdog {
+    private state;
+    private tracer;
+    private bindings;
+    private enabled;
+    private watchdogInterval?;
+    private readonly unsubscribeCallingState;
+    private logger;
+    constructor(state: CallState, tracer: Tracer);
+    /**
+     * Registers an audio element binding for the given session and track type.
+     * Warns if a different element is already bound to the same key.
+     */
+    register: (audioElement: HTMLAudioElement, sessionId: string, trackType: AudioTrackType) => void;
+    /**
+     * Removes the audio element binding for the given session and track type.
+     */
+    unregister: (sessionId: string, trackType: AudioTrackType) => void;
+    /**
+     * Enables or disables the watchdog.
+     * When disabled, the periodic check stops but bindings are still tracked.
+     */
+    setEnabled: (enabled: boolean) => void;
+    /**
+     * Stops the watchdog and unsubscribes from callingState changes.
+     */
+    dispose: () => void;
+    private start;
+    private stop;
+}

package/dist/src/helpers/DynascaleManager.d.ts

@@ -1,8 +1,9 @@
 import { AudioTrackType, DebounceType, VideoTrackType } from '../types';
 import { VideoDimension } from '../gen/video/sfu/models/models';
 import { ViewportTracker } from './ViewportTracker';
+import { AudioBindingsWatchdog } from './AudioBindingsWatchdog';
 import type { TrackSubscriptionDetails } from '../gen/video/sfu/signal_rpc/signal';
-import type { CallState } from '../store';
+import { CallState } from '../store';
 import type { StreamSfuClient } from '../StreamSfuClient';
 import { SpeakerManager } from '../devices';
 import { Tracer } from '../stats';
@@ -40,6 +41,7 @@ export declare class DynascaleManager {
     private audioContext;
     private sfuClient;
     private pendingSubscriptionsUpdate;
+    readonly audioBindingsWatchdog: AudioBindingsWatchdog | undefined;
     private videoTrackSubscriptionOverridesSubject;
     videoTrackSubscriptionOverrides$: import("rxjs").Observable<VideoTrackSubscriptionOverrides>;
     incomingVideoSettings$: import("rxjs").Observable<{

package/dist/src/types.d.ts

@@ -5,6 +5,7 @@ import type { RejectReason, StreamClientOptions, TokenProvider, User } from './c
 import type { Comparator } from './sorting';
 import type { StreamVideoWriteableStateStore } from './store';
 import { AxiosError } from 'axios';
+import type { Call } from './Call';
 export type StreamReaction = Pick<ReactionResponse, 'type' | 'emoji_code' | 'custom'>;
 export declare enum VisibilityState {
     UNKNOWN = "UNKNOWN",
@@ -316,22 +317,53 @@ export type StartCallRecordingFnType = {
     (request: StartRecordingRequest): Promise<StartRecordingResponse>;
     (request: StartRecordingRequest, type: CallRecordingType): Promise<StartRecordingResponse>;
 };
+type StreamRNVideoSDKCallManagerRingingParams = {
+    isRingingTypeCall: boolean;
+};
+type StreamRNVideoSDKCallManagerSetupParams = StreamRNVideoSDKCallManagerRingingParams & {
+    defaultDevice: AudioSettingsRequestDefaultDeviceEnum;
+};
+type StreamRNVideoSDKEndCallReason = 
+/** Call ended by the local user (e.g., hanging up). */
+'local'
+/** Call ended by the remote party, or outgoing call was not answered. */
+ | 'remote'
+/** Call was rejected/declined by the user. */
+ | 'rejected'
+/** Remote party was busy. */
+ | 'busy'
+/** Call was answered on another device. */
+ | 'answeredElsewhere'
+/** No response to an incoming call. */
+ | 'missed'
+/** Call failed due to an error (e.g., network issue). */
+ | 'error'
+/** Call was canceled before the remote party could answer. */
+ | 'canceled'
+/** Call restricted (e.g., airplane mode, dialing restrictions). */
+ | 'restricted'
+/** Unknown or unspecified disconnect reason. */
+ | 'unknown';
+type StreamRNVideoSDKCallingX = {
+    joinCall: (call: Call, activeCalls: Call[]) => Promise<void>;
+    endCall: (call: Call, reason?: StreamRNVideoSDKEndCallReason) => Promise<void>;
+    registerOutgoingCall: (call: Call) => Promise<void>;
+};
 export type StreamRNVideoSDKGlobals = {
+    callingX: StreamRNVideoSDKCallingX;
     callManager: {
         /**
          * Sets up the in call manager.
          */
-        setup({ defaultDevice, }: {
-            defaultDevice: AudioSettingsRequestDefaultDeviceEnum;
-        }): void;
+        setup({ defaultDevice, isRingingTypeCall, }: StreamRNVideoSDKCallManagerSetupParams): void;
         /**
          * Starts the in call manager.
          */
-        start(): void;
+        start({ isRingingTypeCall, }: StreamRNVideoSDKCallManagerRingingParams): void;
         /**
          * Stops the in call manager.
          */
-        stop(): void;
+        stop({ isRingingTypeCall }: StreamRNVideoSDKCallManagerRingingParams): void;
     };
     permissions: {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.44.4",
+  "version": "1.44.6-beta.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "browser": "dist/index.browser.es.js",

package/src/Call.ts

@@ -421,6 +421,7 @@ export class Call {
         const currentUserId = this.currentUserId;
         if (currentUserId && blockedUserIds.includes(currentUserId)) {
           this.logger.info('Leaving call because of being blocked');
+          globalThis.streamRNVideoSDK?.callingX?.endCall(this, 'restricted');
           await this.leave({ message: 'user blocked' }).catch((err) => {
             this.logger.error('Error leaving call after being blocked', err);
           });
@@ -465,6 +466,10 @@ export class Call {
           (isAcceptedElsewhere || isRejectedByMe) &&
           !hasPending(this.joinLeaveConcurrencyTag)
         ) {
+          globalThis.streamRNVideoSDK?.callingX?.endCall(
+            this,
+            isAcceptedElsewhere ? 'answeredElsewhere' : 'rejected',
+          );
           this.leave().catch(() => {
             this.logger.error(
               'Could not leave a call that was accepted or rejected elsewhere',
@@ -480,6 +485,10 @@ export class Call {
     const receiver_id = this.clientStore.connectedUser?.id;
     const ended_at = callSession?.ended_at;
     const created_by_id = this.state.createdBy?.id;
+
+    if (this.currentUserId && created_by_id === this.currentUserId) {
+      globalThis.streamRNVideoSDK?.callingX?.registerOutgoingCall(this);
+    }
     const rejected_by = callSession?.rejected_by;
     const accepted_by = callSession?.accepted_by;
     let leaveCallIdle = false;
@@ -636,16 +645,30 @@ export class Call {
 
       if (callingState === CallingState.RINGING && reject !== false) {
         if (reject) {
-          await this.reject(reason ?? 'decline');
+          const reasonToEndCallReason = {
+            timeout: 'missed',
+            cancel: 'canceled',
+            busy: 'busy',
+            decline: 'rejected',
+          } as const;
+          const rejectReason = reason ?? 'decline';
+          const endCallReason =
+            reasonToEndCallReason[
+              rejectReason as keyof typeof reasonToEndCallReason
+            ] ?? 'rejected';
+          globalThis.streamRNVideoSDK?.callingX?.endCall(this, endCallReason);
+          await this.reject(rejectReason);
         } else {
           // if reject was undefined, we still have to cancel the call automatically
           // when I am the creator and everyone else left the call
           const hasOtherParticipants = this.state.remoteParticipants.length > 0;
           if (this.isCreatedByMe && !hasOtherParticipants) {
+            globalThis.streamRNVideoSDK?.callingX?.endCall(this, 'canceled');
             await this.reject('cancel');
           }
         }
       }
+      globalThis.streamRNVideoSDK?.callingX?.endCall(this);
 
       this.statsReporter?.stop();
       this.statsReporter = undefined;
@@ -680,7 +703,9 @@ export class Call {
       this.cancelAutoDrop();
       this.clientStore.unregisterCall(this);
 
-      globalThis.streamRNVideoSDK?.callManager.stop();
+      globalThis.streamRNVideoSDK?.callManager.stop({
+        isRingingTypeCall: this.ringing,
+      });
 
       this.camera.dispose();
       this.microphone.dispose();
@@ -720,7 +745,9 @@ export class Call {
    * A flag indicating whether the call was created by the current user.
    */
   get isCreatedByMe() {
-    return this.state.createdBy?.id === this.currentUserId;
+    return (
+      this.currentUserId && this.state.createdBy?.id === this.currentUserId
+    );
   }
 
   /**
@@ -766,6 +793,7 @@ export class Call {
     video?: boolean;
   }): Promise<GetCallResponse> => {
     await this.setup();
+
     const response = await this.streamClient.get<GetCallResponse>(
       this.streamClientBasePath,
       params,
@@ -805,6 +833,7 @@ export class Call {
    */
   getOrCreate = async (data?: GetOrCreateCallRequest) => {
     await this.setup();
+
     const response = await this.streamClient.post<
       GetOrCreateCallResponse,
       GetOrCreateCallRequest
@@ -930,60 +959,73 @@ export class Call {
     joinResponseTimeout?: number;
     rpcRequestTimeout?: number;
   } = {}): Promise<void> => {
-    await this.setup();
     const callingState = this.state.callingState;
 
     if ([CallingState.JOINED, CallingState.JOINING].includes(callingState)) {
       throw new Error(`Illegal State: call.join() shall be called only once`);
     }
 
+    if (data?.ring) {
+      this.ringingSubject.next(true);
+    }
+    const callingX = globalThis.streamRNVideoSDK?.callingX;
+    if (callingX) {
+      // for Android/iOS, we need to start the call in the callingx library as soon as possible
+      await callingX.joinCall(this, this.clientStore.calls);
+    }
+
+    await this.setup();
+
     this.joinResponseTimeout = joinResponseTimeout;
     this.rpcRequestTimeout = rpcRequestTimeout;
-
     // we will count the number of join failures per SFU.
     // once the number of failures reaches 2, we will piggyback on the `migrating_from`
     // field to force the coordinator to provide us another SFU
     const sfuJoinFailures = new Map<string, number>();
     const joinData: JoinCallData = data;
     maxJoinRetries = Math.max(maxJoinRetries, 1);
-    for (let attempt = 0; attempt < maxJoinRetries; attempt++) {
-      try {
-        this.logger.trace(`Joining call (${attempt})`, this.cid);
-        await this.doJoin(data);
-        delete joinData.migrating_from;
-        delete joinData.migrating_from_list;
-        break;
-      } catch (err) {
-        this.logger.warn(`Failed to join call (${attempt})`, this.cid);
-        if (
-          (err instanceof ErrorFromResponse && err.unrecoverable) ||
-          (err instanceof SfuJoinError && err.unrecoverable)
-        ) {
-          // if the error is unrecoverable, we should not retry as that signals
-          // that connectivity is good, but the coordinator doesn't allow the user
-          // to join the call due to some reason (e.g., ended call, expired token...)
-          throw err;
-        }
+    try {
+      for (let attempt = 0; attempt < maxJoinRetries; attempt++) {
+        try {
+          this.logger.trace(`Joining call (${attempt})`, this.cid);
+          await this.doJoin(data);
+          delete joinData.migrating_from;
+          delete joinData.migrating_from_list;
+          break;
+        } catch (err) {
+          this.logger.warn(`Failed to join call (${attempt})`, this.cid);
+          if (
+            (err instanceof ErrorFromResponse && err.unrecoverable) ||
+            (err instanceof SfuJoinError && err.unrecoverable)
+          ) {
+            // if the error is unrecoverable, we should not retry as that signals
+            // that connectivity is good, but the coordinator doesn't allow the user
+            // to join the call due to some reason (e.g., ended call, expired token...)
+            throw err;
+          }
 
-        // immediately switch to a different SFU in case of recoverable join error
-        const switchSfu =
-          err instanceof SfuJoinError &&
-          SfuJoinError.isJoinErrorCode(err.errorEvent);
-
-        const sfuId = this.credentials?.server.edge_name || '';
-        const failures = (sfuJoinFailures.get(sfuId) || 0) + 1;
-        sfuJoinFailures.set(sfuId, failures);
-        if (switchSfu || failures >= 2) {
-          joinData.migrating_from = sfuId;
-          joinData.migrating_from_list = Array.from(sfuJoinFailures.keys());
-        }
+          // immediately switch to a different SFU in case of recoverable join error
+          const switchSfu =
+            err instanceof SfuJoinError &&
+            SfuJoinError.isJoinErrorCode(err.errorEvent);
+
+          const sfuId = this.credentials?.server.edge_name || '';
+          const failures = (sfuJoinFailures.get(sfuId) || 0) + 1;
+          sfuJoinFailures.set(sfuId, failures);
+          if (switchSfu || failures >= 2) {
+            joinData.migrating_from = sfuId;
+            joinData.migrating_from_list = Array.from(sfuJoinFailures.keys());
+          }
 
-        if (attempt === maxJoinRetries - 1) {
-          throw err;
+          if (attempt === maxJoinRetries - 1) {
+            throw err;
+          }
         }
+        await sleep(retryInterval(attempt));
       }
-
-      await sleep(retryInterval(attempt));
+    } catch (error) {
+      callingX?.endCall(this, 'error');
+      throw error;
     }
   };
 
@@ -1166,7 +1208,9 @@ export class Call {
     // re-apply them on later reconnections or server-side data fetches
     if (!this.deviceSettingsAppliedOnce && this.state.settings) {
       await this.applyDeviceConfig(this.state.settings, true, false);
-      globalThis.streamRNVideoSDK?.callManager.start();
+      globalThis.streamRNVideoSDK?.callManager.start({
+        isRingingTypeCall: this.ringing,
+      });
       this.deviceSettingsAppliedOnce = true;
     }
 
@@ -1711,6 +1755,7 @@ export class Call {
       if (SfuJoinError.isJoinErrorCode(e)) return;
       if (strategy === WebsocketReconnectStrategy.UNSPECIFIED) return;
       if (strategy === WebsocketReconnectStrategy.DISCONNECT) {
+        globalThis.streamRNVideoSDK?.callingX?.endCall(this, 'error');
         this.leave({ message: 'SFU instructed to disconnect' }).catch((err) => {
           this.logger.warn(`Can't leave call after disconnect request`, err);
         });

package/src/devices/SpeakerManager.ts

@@ -85,6 +85,7 @@ export class SpeakerManager {
       this.defaultDevice = defaultDevice;
       globalThis.streamRNVideoSDK?.callManager.setup({
         defaultDevice,
+        isRingingTypeCall: this.call.ringing,
       });
     }
   }

package/src/devices/devices.ts

@@ -11,7 +11,7 @@ import {
 } from 'rxjs';
 import { BrowserPermission } from './BrowserPermission';
 import { lazy } from '../helpers/lazy';
-import { isFirefox, isSafari } from '../helpers/browsers';
+import { isFirefox } from '../helpers/browsers';
 import { dumpStream, Tracer } from '../stats';
 import { getCurrentValue } from '../store/rxUtils';
 import { videoLoggerSystem } from '../logger';
@@ -61,8 +61,6 @@ const getDevices = (
  */
 export const checkIfAudioOutputChangeSupported = () => {
   if (typeof document === 'undefined') return false;
-  // Safari uses WebAudio API for playing audio, so we check the AudioContext prototype
-  if (isSafari()) return 'setSinkId' in AudioContext.prototype;
   const element = document.createElement('audio');
   return 'setSinkId' in element;
 };

package/src/events/call.ts

@@ -69,6 +69,7 @@ export const watchCallRejected = (call: Call) => {
     } else {
       if (rejectedBy[eventCall.created_by.id]) {
         call.logger.info('call creator rejected, leaving call');
+        globalThis.streamRNVideoSDK?.callingX?.endCall(call, 'remote');
         await call.leave({ message: 'ring: creator rejected' });
       }
     }
@@ -80,6 +81,7 @@ export const watchCallRejected = (call: Call) => {
  */
 export const watchCallEnded = (call: Call) => {
   return function onCallEnded() {
+    globalThis.streamRNVideoSDK?.callingX?.endCall(call, 'remote');
     const { callingState } = call.state;
     if (
       callingState !== CallingState.IDLE &&
@@ -113,6 +115,7 @@ export const watchSfuCallEnded = (call: Call) => {
       // update the call state to reflect the call has ended.
       call.state.setEndedAt(new Date());
       const reason = CallEndedReason[e.reason];
+      globalThis.streamRNVideoSDK?.callingX?.endCall(call, 'remote');
       await call.leave({ message: `callEnded received: ${reason}` });
     } catch (err) {
       call.logger.error(

package/src/helpers/AudioBindingsWatchdog.ts

@@ -0,0 +1,118 @@
+import type { AudioTrackType } from '../types';
+import { CallingState, CallState } from '../store';
+import { createSubscription } from '../store/rxUtils';
+import { videoLoggerSystem } from '../logger';
+import { Tracer } from '../stats';
+
+const toBindingKey = (
+  sessionId: string,
+  trackType: AudioTrackType = 'audioTrack',
+) => `${sessionId}/${trackType}`;
+
+/**
+ * Tracks audio element bindings and periodically warns about
+ * remote participants whose audio streams have no bound element.
+ */
+export class AudioBindingsWatchdog {
+  private bindings = new Map<string, HTMLAudioElement>();
+  private enabled = true;
+  private watchdogInterval?: NodeJS.Timeout;
+  private readonly unsubscribeCallingState: () => void;
+  private logger = videoLoggerSystem.getLogger('AudioBindingsWatchdog');
+
+  constructor(
+    private state: CallState,
+    private tracer: Tracer,
+  ) {
+    this.unsubscribeCallingState = createSubscription(
+      state.callingState$,
+      (callingState) => {
+        if (!this.enabled) return;
+        if (callingState !== CallingState.JOINED) {
+          this.stop();
+        } else {
+          this.start();
+        }
+      },
+    );
+  }
+
+  /**
+   * Registers an audio element binding for the given session and track type.
+   * Warns if a different element is already bound to the same key.
+   */
+  register = (
+    audioElement: HTMLAudioElement,
+    sessionId: string,
+    trackType: AudioTrackType,
+  ) => {
+    const key = toBindingKey(sessionId, trackType);
+    const existing = this.bindings.get(key);
+    if (existing && existing !== audioElement) {
+      this.logger.warn(
+        `Audio element already bound to ${sessionId} and ${trackType}`,
+      );
+      this.tracer.trace('audioBinding.alreadyBoundWarning', trackType);
+    }
+    this.bindings.set(key, audioElement);
+  };
+
+  /**
+   * Removes the audio element binding for the given session and track type.
+   */
+  unregister = (sessionId: string, trackType: AudioTrackType) => {
+    this.bindings.delete(toBindingKey(sessionId, trackType));
+  };
+
+  /**
+   * Enables or disables the watchdog.
+   * When disabled, the periodic check stops but bindings are still tracked.
+   */
+  setEnabled = (enabled: boolean) => {
+    this.enabled = enabled;
+    if (enabled) {
+      this.start();
+    } else {
+      this.stop();
+    }
+  };
+
+  /**
+   * Stops the watchdog and unsubscribes from callingState changes.
+   */
+  dispose = () => {
+    this.stop();
+    this.unsubscribeCallingState();
+  };
+
+  private start = () => {
+    clearInterval(this.watchdogInterval);
+    this.watchdogInterval = setInterval(() => {
+      const danglingUserIds: string[] = [];
+      for (const p of this.state.participants) {
+        if (p.isLocalParticipant) continue;
+        const { audioStream, screenShareAudioStream, sessionId, userId } = p;
+        if (audioStream && !this.bindings.has(toBindingKey(sessionId))) {
+          danglingUserIds.push(userId);
+        }
+        if (
+          screenShareAudioStream &&
+          !this.bindings.has(toBindingKey(sessionId, 'screenShareAudioTrack'))
+        ) {
+          danglingUserIds.push(userId);
+        }
+      }
+      if (danglingUserIds.length > 0) {
+        const key = 'audioBinding.danglingWarning';
+        this.tracer.traceOnce(key, key, danglingUserIds);
+        this.logger.warn(
+          `Dangling audio bindings detected. Did you forget to bind the audio element? user_ids: ${danglingUserIds}.`,
+        );
+      }
+    }, 3000);
+  };
+
+  private stop = () => {
+    clearInterval(this.watchdogInterval);
+  };
+}

package/src/helpers/DynascaleManager.ts

@@ -15,14 +15,16 @@ import {
   takeWhile,
 } from 'rxjs';
 import { ViewportTracker } from './ViewportTracker';
+import { AudioBindingsWatchdog } from './AudioBindingsWatchdog';
 import { isFirefox, isSafari } from './browsers';
+import { isReactNative } from './platforms';
 import {
   hasScreenShare,
   hasScreenShareAudio,
   hasVideo,
 } from './participantUtils';
 import type { TrackSubscriptionDetails } from '../gen/video/sfu/signal_rpc/signal';
-import type { CallState } from '../store';
+import { CallState } from '../store';
 import type { StreamSfuClient } from '../StreamSfuClient';
 import { SpeakerManager } from '../devices';
 import { getCurrentValue, setCurrentValue } from '../store/rxUtils';
@@ -71,10 +73,11 @@ export class DynascaleManager {
   private callState: CallState;
   private speaker: SpeakerManager;
   private tracer: Tracer;
-  private useWebAudio = isSafari();
+  private useWebAudio = false;
   private audioContext: AudioContext | undefined;
   private sfuClient: StreamSfuClient | undefined;
   private pendingSubscriptionsUpdate: NodeJS.Timeout | null = null;
+  readonly audioBindingsWatchdog: AudioBindingsWatchdog | undefined;
 
   private videoTrackSubscriptionOverridesSubject =
     new BehaviorSubject<VideoTrackSubscriptionOverrides>({});
@@ -120,6 +123,9 @@ export class DynascaleManager {
     this.callState = callState;
     this.speaker = speaker;
     this.tracer = tracer;
+    if (!isReactNative()) {
+      this.audioBindingsWatchdog = new AudioBindingsWatchdog(callState, tracer);
+    }
   }
 
   /**
@@ -129,7 +135,8 @@ export class DynascaleManager {
     if (this.pendingSubscriptionsUpdate) {
       clearTimeout(this.pendingSubscriptionsUpdate);
     }
-    const context = this.getOrCreateAudioContext();
+    this.audioBindingsWatchdog?.dispose();
+    const context = this.audioContext;
     if (context && context.state !== 'closed') {
       document.removeEventListener('click', this.resumeAudioContext);
       await context.close();
@@ -447,6 +454,7 @@ export class DynascaleManager {
         });
     resizeObserver?.observe(videoElement);
 
+    const isVideoTrack = trackType === 'videoTrack';
     // element renders and gets bound - track subscription gets
     // triggered first other ones get skipped on initial subscriptions
     const publishedTracksSubscription = boundParticipant.isLocalParticipant
@@ -454,9 +462,7 @@ export class DynascaleManager {
       : participant$
           .pipe(
             distinctUntilKeyChanged('publishedTracks'),
-            map((p) =>
-              trackType === 'videoTrack' ? hasVideo(p) : hasScreenShare(p),
-            ),
+            map((p) => (isVideoTrack ? hasVideo(p) : hasScreenShare(p))),
             distinctUntilChanged(),
           )
           .subscribe((isPublishing) => {
@@ -480,15 +486,11 @@ export class DynascaleManager {
     // https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
     videoElement.muted = true;
 
+    const trackKey = isVideoTrack ? 'videoStream' : 'screenShareStream';
     const streamSubscription = participant$
-      .pipe(
-        distinctUntilKeyChanged(
-          trackType === 'videoTrack' ? 'videoStream' : 'screenShareStream',
-        ),
-      )
+      .pipe(distinctUntilKeyChanged(trackKey))
       .subscribe((p) => {
-        const source =
-          trackType === 'videoTrack' ? p.videoStream : p.screenShareStream;
+        const source = isVideoTrack ? p.videoStream : p.screenShareStream;
         if (videoElement.srcObject === source) return;
         videoElement.srcObject = source ?? null;
         if (isSafari() || isFirefox()) {
@@ -532,6 +534,8 @@ export class DynascaleManager {
     const participant = this.callState.findParticipantBySessionId(sessionId);
     if (!participant || participant.isLocalParticipant) return;
 
+    this.audioBindingsWatchdog?.register(audioElement, sessionId, trackType);
+
     const participant$ = this.callState.participants$.pipe(
       map((ps) => ps.find((p) => p.sessionId === sessionId)),
       takeWhile((p) => !!p),
@@ -561,19 +565,12 @@ export class DynascaleManager {
     let sourceNode: MediaStreamAudioSourceNode | undefined = undefined;
     let gainNode: GainNode | undefined = undefined;
 
+    const isAudioTrack = trackType === 'audioTrack';
+    const trackKey = isAudioTrack ? 'audioStream' : 'screenShareAudioStream';
     const updateMediaStreamSubscription = participant$
-      .pipe(
-        distinctUntilKeyChanged(
-          trackType === 'screenShareAudioTrack'
-            ? 'screenShareAudioStream'
-            : 'audioStream',
-        ),
-      )
+      .pipe(distinctUntilKeyChanged(trackKey))
       .subscribe((p) => {
-        const source =
-          trackType === 'screenShareAudioTrack'
-            ? p.screenShareAudioStream
-            : p.audioStream;
+        const source = isAudioTrack ? p.audioStream : p.screenShareAudioStream;
         if (audioElement.srcObject === source) return;
 
         setTimeout(() => {
@@ -630,6 +627,7 @@ export class DynascaleManager {
     audioElement.autoplay = true;
 
     return () => {
+      this.audioBindingsWatchdog?.unregister(sessionId, trackType);
       sinkIdSubscription?.unsubscribe();
       volumeSubscription.unsubscribe();
       updateMediaStreamSubscription.unsubscribe();