@stream-io/video-client 1.44.3 → 1.44.5

package/dist/src/devices/BrowserPermission.d.ts

@@ -1,6 +1,8 @@
+import { Tracer } from '../stats';
 interface BrowserPermissionConfig {
     constraints: DisplayMediaStreamOptions;
     queryName: PermissionName;
+    tracer: Tracer | undefined;
 }
 export type BrowserPermissionState = PermissionState | 'prompting';
 export declare class BrowserPermission {

package/dist/src/devices/CameraManagerState.d.ts

@@ -1,4 +1,5 @@
 import { DeviceManagerState } from './DeviceManagerState';
+import { Tracer } from '../stats';
 export type CameraDirection = 'front' | 'back' | undefined;
 export declare class CameraManagerState extends DeviceManagerState {
     private directionSubject;
@@ -8,7 +9,7 @@ export declare class CameraManagerState extends DeviceManagerState {
      * back - means the camera facing the environment
      */
     direction$: import("rxjs").Observable<CameraDirection>;
-    constructor();
+    constructor(tracer: Tracer | undefined);
     /**
      * The preferred camera direction
      * front - means the camera facing the user

package/dist/src/devices/MicrophoneManagerState.d.ts

@@ -1,12 +1,13 @@
 import { TrackDisableMode } from './DeviceManagerState';
 import { AudioDeviceManagerState } from './AudioDeviceManagerState';
+import { Tracer } from '../stats';
 export declare class MicrophoneManagerState extends AudioDeviceManagerState<MediaTrackConstraints> {
     private speakingWhileMutedSubject;
     /**
      * An Observable that emits `true` if the user's microphone is muted, but they're speaking.
      */
     speakingWhileMuted$: import("rxjs").Observable<boolean>;
-    constructor(disableMode: TrackDisableMode);
+    constructor(disableMode: TrackDisableMode, tracer: Tracer | undefined);
     /**
      * `true` if the user's microphone is muted but they're speaking.
      */

package/dist/src/devices/devices.d.ts

@@ -9,12 +9,12 @@ export declare const checkIfAudioOutputChangeSupported: () => boolean;
  * Keeps track of the browser permission to use microphone. This permission also
  * affects an ability to enumerate audio devices.
  */
-export declare const getAudioBrowserPermission: (...args: never[]) => BrowserPermission;
+export declare const getAudioBrowserPermission: (...args: (Tracer | undefined)[]) => BrowserPermission;
 /**
  * Keeps track of the browser permission to use camera. This permission also
  * affects an ability to enumerate video devices.
  */
-export declare const getVideoBrowserPermission: (...args: never[]) => BrowserPermission;
+export declare const getVideoBrowserPermission: (...args: (Tracer | undefined)[]) => BrowserPermission;
 /**
  * Prompts the user for a permission to use audio devices (if not already granted
  * and was not prompted before) and lists the available 'audioinput' devices,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.44.3",
+  "version": "1.44.5",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "browser": "dist/index.browser.es.js",
@@ -46,7 +46,7 @@
     "@openapitools/openapi-generator-cli": "^2.25.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@stream-io/audio-filters-web": "^0.7.2",
+    "@stream-io/audio-filters-web": "^0.7.3",
     "@stream-io/node-sdk": "^0.7.28",
     "@total-typescript/shoehorn": "^0.1.2",
     "@types/sdp-transform": "^2.15.0",

package/src/devices/BrowserPermission.ts

@@ -3,10 +3,12 @@ import { isReactNative } from '../helpers/platforms';
 import { disposeOfMediaStream } from './utils';
 import { withoutConcurrency } from '../helpers/concurrency';
 import { videoLoggerSystem } from '../logger';
+import { Tracer } from '../stats';
 
 interface BrowserPermissionConfig {
   constraints: DisplayMediaStreamOptions;
   queryName: PermissionName;
+  tracer: Tracer | undefined;
 }
 
 export type BrowserPermissionState = PermissionState | 'prompting';
@@ -162,6 +164,9 @@ export class BrowserPermission {
 
   private setState(state: BrowserPermissionState) {
     if (this.state !== state) {
+      const { tracer, queryName } = this.permission;
+      const traceKey = `navigator.mediaDevices.${queryName}.permission`;
+      tracer?.trace(traceKey, { previous: this.state, state });
       this.state = state;
       this.listeners.forEach((listener) => listener(state));
     }

package/src/devices/CameraManager.ts

@@ -25,7 +25,12 @@ export class CameraManager extends DeviceManager<CameraManagerState> {
     call: Call,
     devicePersistence: Required<DevicePersistenceOptions>,
   ) {
-    super(call, new CameraManagerState(), TrackType.VIDEO, devicePersistence);
+    super(
+      call,
+      new CameraManagerState(call.tracer),
+      TrackType.VIDEO,
+      devicePersistence,
+    );
   }
 
   private isDirectionSupportedByDevice() {

package/src/devices/CameraManagerState.ts

@@ -3,6 +3,7 @@ import { DeviceManagerState } from './DeviceManagerState';
 import { isReactNative } from '../helpers/platforms';
 import { getVideoBrowserPermission } from './devices';
 import { RxUtils } from '../store';
+import { Tracer } from '../stats';
 
 export type CameraDirection = 'front' | 'back' | undefined;
 
@@ -18,8 +19,8 @@ export class CameraManagerState extends DeviceManagerState {
     .asObservable()
     .pipe(distinctUntilChanged());
 
-  constructor() {
-    super('stop-tracks', getVideoBrowserPermission());
+  constructor(tracer: Tracer | undefined) {
+    super('stop-tracks', getVideoBrowserPermission(tracer));
   }
 
   /**

package/src/devices/MicrophoneManager.ts

@@ -51,7 +51,7 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
   ) {
     super(
       call,
-      new MicrophoneManagerState(disableMode),
+      new MicrophoneManagerState(disableMode, call.tracer),
       TrackType.AUDIO,
       devicePersistence,
     );
@@ -169,7 +169,6 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
                 deviceId,
                 label,
               };
-              console.log(event);
               this.call.tracer.trace('mic.capture_report', event);
               this.call.streamClient.dispatchEvent(event);
             },

package/src/devices/MicrophoneManagerState.ts

@@ -4,6 +4,7 @@ import { TrackDisableMode } from './DeviceManagerState';
 import { AudioDeviceManagerState } from './AudioDeviceManagerState';
 import { getAudioBrowserPermission, resolveDeviceId } from './devices';
 import { AudioBitrateProfile } from '../gen/video/sfu/models/models';
+import { Tracer } from '../stats';
 
 export class MicrophoneManagerState extends AudioDeviceManagerState<MediaTrackConstraints> {
   private speakingWhileMutedSubject = new BehaviorSubject<boolean>(false);
@@ -15,10 +16,10 @@ export class MicrophoneManagerState extends AudioDeviceManagerState<MediaTrackCo
     .asObservable()
     .pipe(distinctUntilChanged());
 
-  constructor(disableMode: TrackDisableMode) {
+  constructor(disableMode: TrackDisableMode, tracer: Tracer | undefined) {
     super(
       disableMode,
-      getAudioBrowserPermission(),
+      getAudioBrowserPermission(tracer),
       AudioBitrateProfile.VOICE_STANDARD_UNSPECIFIED,
     );
   }

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;
 };
@@ -93,10 +91,11 @@ const videoDeviceConstraints = {
  * affects an ability to enumerate audio devices.
  */
 export const getAudioBrowserPermission = lazy(
-  () =>
+  (tracer: Tracer | undefined) =>
     new BrowserPermission({
       constraints: audioDeviceConstraints,
       queryName: 'microphone' as PermissionName,
+      tracer,
     }),
 );
 
@@ -105,10 +104,11 @@ export const getAudioBrowserPermission = lazy(
  * affects an ability to enumerate video devices.
  */
 export const getVideoBrowserPermission = lazy(
-  () =>
+  (tracer: Tracer | undefined) =>
     new BrowserPermission({
       constraints: videoDeviceConstraints,
       queryName: 'camera' as PermissionName,
+      tracer,
     }),
 );
 
@@ -132,11 +132,11 @@ const getDeviceChangeObserver = lazy((tracer: Tracer | undefined) => {
 export const getAudioDevices = lazy((tracer?: Tracer) => {
   return merge(
     getDeviceChangeObserver(tracer),
-    getAudioBrowserPermission().asObservable(),
+    getAudioBrowserPermission(tracer).asObservable(),
   ).pipe(
     startWith([]),
     concatMap(() =>
-      getDevices(getAudioBrowserPermission(), 'audioinput', tracer),
+      getDevices(getAudioBrowserPermission(tracer), 'audioinput', tracer),
     ),
     shareReplay(1),
   );
@@ -151,11 +151,11 @@ export const getAudioDevices = lazy((tracer?: Tracer) => {
 export const getVideoDevices = lazy((tracer?: Tracer) => {
   return merge(
     getDeviceChangeObserver(tracer),
-    getVideoBrowserPermission().asObservable(),
+    getVideoBrowserPermission(tracer).asObservable(),
   ).pipe(
     startWith([]),
     concatMap(() =>
-      getDevices(getVideoBrowserPermission(), 'videoinput', tracer),
+      getDevices(getVideoBrowserPermission(tracer), 'videoinput', tracer),
     ),
     shareReplay(1),
   );
@@ -170,11 +170,11 @@ export const getVideoDevices = lazy((tracer?: Tracer) => {
 export const getAudioOutputDevices = lazy((tracer?: Tracer) => {
   return merge(
     getDeviceChangeObserver(tracer),
-    getAudioBrowserPermission().asObservable(),
+    getAudioBrowserPermission(tracer).asObservable(),
   ).pipe(
     startWith([]),
     concatMap(() =>
-      getDevices(getAudioBrowserPermission(), 'audiooutput', tracer),
+      getDevices(getAudioBrowserPermission(tracer), 'audiooutput', tracer),
     ),
     shareReplay(1),
   );
@@ -259,28 +259,24 @@ export const getAudioStream = async (
   };
 
   try {
-    await getAudioBrowserPermission().prompt({
+    await getAudioBrowserPermission(tracer).prompt({
       throwOnNotAllowed: true,
       forcePrompt: true,
     });
     return await getStream(constraints, tracer);
   } catch (error) {
+    const logger = videoLoggerSystem.getLogger('devices');
     if (isNotFoundOrOverconstrainedError(error) && trackConstraints?.deviceId) {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { deviceId, ...relaxedConstraints } = trackConstraints;
-      videoLoggerSystem
-        .getLogger('devices')
-        .warn(
-          'Failed to get audio stream, will try again with relaxed constraints',
-          { error, constraints, relaxedConstraints },
-        );
+      logger.warn(
+        'Failed to get audio stream, will try again with relaxed constraints',
+        { error, constraints, relaxedConstraints },
+      );
       return getAudioStream(relaxedConstraints, tracer);
     }
 
-    videoLoggerSystem.getLogger('devices').error('Failed to get audio stream', {
-      error,
-      constraints,
-    });
+    logger.error('Failed to get audio stream', { error, constraints });
     throw error;
   }
 };
@@ -304,28 +300,24 @@ export const getVideoStream = async (
     },
   };
   try {
-    await getVideoBrowserPermission().prompt({
+    await getVideoBrowserPermission(tracer).prompt({
       throwOnNotAllowed: true,
       forcePrompt: true,
     });
     return await getStream(constraints, tracer);
   } catch (error) {
+    const logger = videoLoggerSystem.getLogger('devices');
     if (isNotFoundOrOverconstrainedError(error) && trackConstraints?.deviceId) {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { deviceId, ...relaxedConstraints } = trackConstraints;
-      videoLoggerSystem
-        .getLogger('devices')
-        .warn(
-          'Failed to get video stream, will try again with relaxed constraints',
-          { error, constraints, relaxedConstraints },
-        );
-      return getVideoStream(relaxedConstraints);
+      logger.warn(
+        'Failed to get video stream, will try again with relaxed constraints',
+        { error, constraints, relaxedConstraints },
+      );
+      return getVideoStream(relaxedConstraints, tracer);
     }
 
-    videoLoggerSystem.getLogger('devices').error('Failed to get video stream', {
-      error,
-      constraints,
-    });
+    logger.error('Failed to get video stream', { error, constraints });
     throw 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();