@stream-io/video-react-native-sdk 1.21.1 → 1.22.0

package/ios/StreamInCallManager.swift

@@ -0,0 +1,303 @@
+import Foundation
+import React
+import UIKit
+import AVFoundation
+import stream_react_native_webrtc
+import AVKit
+import MediaPlayer
+
+enum CallAudioRole {
+    case listener
+    case communicator
+}
+
+enum DefaultAudioDevice {
+    case speaker
+    case earpiece
+}
+
+@objc(StreamInCallManager)
+class StreamInCallManager: RCTEventEmitter {
+    
+    private let audioSessionQueue = DispatchQueue(label: "io.getstream.rn.audioSessionQueue")
+    
+    private var audioManagerActivated = false
+    private var callAudioRole: CallAudioRole = .communicator
+    private var defaultAudioDevice: DefaultAudioDevice = .speaker
+    private var previousVolume: Float = 0.75
+    
+    private struct AudioSessionState {
+        let category: AVAudioSession.Category
+        let mode: AVAudioSession.Mode
+        let options: AVAudioSession.CategoryOptions
+    }
+    
+    private var previousAudioSessionState: AudioSessionState?
+    
+    override func invalidate() {
+        stop()
+        super.invalidate()
+    }
+    
+    override static func requiresMainQueueSetup() -> Bool {
+        return false
+    }
+    
+    
+    @objc(setAudioRole:)
+    func setAudioRole(audioRole: String) {
+        audioSessionQueue.async { [self] in
+            if audioManagerActivated {
+                log("AudioManager is already activated, audio role cannot be changed.")
+                return
+            }
+            self.callAudioRole = audioRole.lowercased() == "listener" ? .listener : .communicator
+        }
+    }
+    
+    @objc(setDefaultAudioDeviceEndpointType:)
+    func setDefaultAudioDeviceEndpointType(endpointType: String) {
+        audioSessionQueue.async { [self] in
+            if audioManagerActivated {
+                log("AudioManager is already activated, default audio device cannot be changed.")
+                return
+            }
+            self.defaultAudioDevice = endpointType.lowercased() == "earpiece" ? .earpiece : .speaker
+        }
+    }
+    
+    @objc
+    func start() {
+        audioSessionQueue.async { [self] in
+            if audioManagerActivated {
+                return
+            }
+            let session = AVAudioSession.sharedInstance()
+            previousAudioSessionState = AudioSessionState(
+                category: session.category,
+                mode: session.mode,
+                options: session.categoryOptions
+            )
+            configureAudioSession()
+            audioManagerActivated = true
+        }
+    }
+    
+    @objc
+    func stop() {
+        audioSessionQueue.async { [self] in
+            if !audioManagerActivated {
+                return
+            }
+            if let prev = previousAudioSessionState {
+                let session = AVAudioSession.sharedInstance()
+                do {
+                    try session.setCategory(prev.category, mode: prev.mode, options: prev.options)
+                } catch {
+                    log("Error restoring previous audio session: \(error.localizedDescription)")
+                }
+                previousAudioSessionState = nil
+            }
+            audioManagerActivated = false
+        }
+    }
+    
+    private func configureAudioSession() {
+        let intendedCategory: AVAudioSession.Category!
+        let intendedMode: AVAudioSession.Mode!
+        let intendedOptions: AVAudioSession.CategoryOptions!
+        
+        if (callAudioRole == .listener) {
+            // enables high quality audio playback but disables microphone
+            intendedCategory = .playback
+            intendedMode = .default
+            intendedOptions = []
+        } else {
+            intendedCategory = .playAndRecord
+            intendedMode = .voiceChat
+            
+            if (defaultAudioDevice == .speaker) {
+                // defaultToSpeaker will route to speaker if nothing else is connected
+                intendedOptions = [.allowBluetooth, .defaultToSpeaker]
+            } else {
+                // having no defaultToSpeaker makes sure audio goes to earpiece if nothing is connected
+                intendedOptions = [.allowBluetooth]
+            }
+        }
+        
+        // START: set the config that webrtc must use when it takes control
+        let rtcConfig = RTCAudioSessionConfiguration.webRTC()
+        rtcConfig.category = intendedCategory.rawValue
+        rtcConfig.mode = intendedMode.rawValue
+        rtcConfig.categoryOptions = intendedOptions
+        RTCAudioSessionConfiguration.setWebRTC(rtcConfig)
+        // END
+        
+        // START: compare current audio session with intended, and update if different
+        let session = RTCAudioSession.sharedInstance()
+        let currentCategory = session.category
+        let currentMode = session.mode
+        let currentOptions = session.categoryOptions
+        let currentIsActive = session.isActive
+        
+        if currentCategory != intendedCategory.rawValue || currentMode != intendedMode.rawValue || currentOptions != intendedOptions || !currentIsActive {
+            session.lockForConfiguration()
+            do {
+                try session.setCategory(intendedCategory, mode: intendedMode, options: intendedOptions)
+                try session.setActive(true)
+                log("configureAudioSession: setCategory success \(intendedCategory.rawValue) \(intendedMode.rawValue) \(intendedOptions.rawValue)")
+            } catch {
+                log("configureAudioSession: setCategory failed due to: \(error.localizedDescription)")
+                do {
+                    try session.setMode(intendedMode)
+                    try session.setActive(true)
+                    log("configureAudioSession: setMode success \(intendedMode.rawValue)")
+                } catch {
+                    log("configureAudioSession: Error setting mode: \(error.localizedDescription)")
+                }
+            }
+            session.unlockForConfiguration()
+        } else {
+            log("configureAudioSession: no change needed")
+        }
+        // END
+    }
+    
+    @objc(showAudioRoutePicker)
+    public func showAudioRoutePicker() {
+        guard #available(iOS 11.0, tvOS 11.0, macOS 10.15, *) else {
+            return
+        }
+        DispatchQueue.main.async {
+            // AVRoutePickerView is the default UI with a
+            // button that users tap to stream audio/video content to a media receiver
+            let routePicker = AVRoutePickerView()
+            // Send a touch up inside event to the button to trigger the audio route picker
+            (routePicker.subviews.first { $0 is UIButton } as? UIButton)?
+                .sendActions(for: .touchUpInside)
+        }
+    }
+    
+    @objc(setForceSpeakerphoneOn:)
+    func setForceSpeakerphoneOn(enable: Bool) {
+        let session = AVAudioSession.sharedInstance()
+        do {
+            try session.overrideOutputAudioPort(enable ? .speaker : .none)
+            try session.setActive(true)
+        } catch {
+            log("Error setting speakerphone: \(error)")
+        }
+    }
+    
+    @objc(setMicrophoneMute:)
+    func setMicrophoneMute(enable: Bool) {
+        log("iOS does not support setMicrophoneMute()")
+    }
+    
+    @objc
+    func logAudioState() {
+        let session = AVAudioSession.sharedInstance()
+        let logString = """
+        Audio State:
+          Category: \(session.category.rawValue)
+          Mode: \(session.mode.rawValue)
+          Output Port: \(session.currentRoute.outputs.first?.portName ?? "N/A")
+          Input Port: \(session.currentRoute.inputs.first?.portName ?? "N/A")
+          Category Options: \(session.categoryOptions)
+          InputNumberOfChannels: \(session.inputNumberOfChannels)
+          OutputNumberOfChannels: \(session.outputNumberOfChannels)
+        """
+        log(logString)
+    }
+    
+    @objc(muteAudioOutput)
+    func muteAudioOutput() {
+        DispatchQueue.main.async { [self] in
+            let volumeView = MPVolumeView()
+            
+            // Add to a temporary view hierarchy to make it functional
+            if let window = getCurrentWindow() {
+                volumeView.frame = CGRect(x: -1000, y: -1000, width: 1, height: 1)
+                window.addSubview(volumeView)
+                
+                // Give it a moment to initialize
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                    if let slider = volumeView.subviews.first(where: { $0 is UISlider }) as? UISlider {
+                        self.previousVolume = slider.value
+                        slider.setValue(0.0, animated: false)
+                        slider.sendActions(for: .valueChanged)
+                        self.log("Audio output muted via slider event")
+                    } else {
+                        self.log("Could not find volume slider")
+                    }
+                    
+                    // Remove from view hierarchy after use
+                    volumeView.removeFromSuperview()
+                }
+            }
+        }
+    }
+    
+    @objc(unmuteAudioOutput)
+    func unmuteAudioOutput() {
+        DispatchQueue.main.async { [self] in
+            let volumeView = MPVolumeView()
+            
+            // Add to a temporary view hierarchy to make it functional
+            if let window = getCurrentWindow() {
+                volumeView.frame = CGRect(x: -1000, y: -1000, width: 1, height: 1)
+                window.addSubview(volumeView)
+                
+                // Give it a moment to initialize
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                    if let slider = volumeView.subviews.first(where: { $0 is UISlider }) as? UISlider {
+                        let targetVolume = self.previousVolume > 0 ? self.previousVolume : 0.75
+                        slider.setValue(targetVolume, animated: false)
+                        slider.sendActions(for: .valueChanged)
+                        self.log("Audio output unmuted via slider event")
+                    } else {
+                        self.log("Could not find volume slider")
+                    }
+                    
+                    // Remove from view hierarchy after use
+                    volumeView.removeFromSuperview()
+                }
+            }
+        }
+    }
+    
+    // MARK: - RCTEventEmitter
+    
+    override func supportedEvents() -> [String]! {
+        // TODO: list events that can be sent to JS
+        return []
+    }
+    
+    @objc
+    override func addListener(_ eventName: String!) {
+        super.addListener(eventName)
+    }
+    
+    @objc
+    override func removeListeners(_ count: Double) {
+        super.removeListeners(count)
+    }
+    
+    // MARK: - Helper Methods
+    private func getCurrentWindow() -> UIWindow? {
+        if #available(iOS 13.0, *) {
+            return UIApplication.shared.connectedScenes
+                .compactMap({ $0 as? UIWindowScene })
+                .first?.windows
+                .first(where: { $0.isKeyWindow })
+        } else {
+            return UIApplication.shared.keyWindow
+        }
+    }
+    
+    // MARK: - Logging Helper
+    private func log(_ message: String) {
+        NSLog("InCallManager: %@", message)
+    }
+    
+}

package/ios/StreamVideoReactNative-Bridging-Header.h

@@ -12,3 +12,4 @@
 #import <WebRTC/RTCVideoRenderer.h>
 #import <WebRTC/RTCVideoFrameBuffer.h>
 #import "WebRTCModule.h"
+#import "WebRTCModuleOptions.h"

package/ios/StreamVideoReactNative.m

@@ -69,7 +69,7 @@ RCT_EXPORT_MODULE();
     if ((self = [super init])) {
         _notificationCenter = CFNotificationCenterGetDarwinNotifyCenter();
         [UIDevice currentDevice].batteryMonitoringEnabled = YES;
-        [self setupObserver];
+        [self setupScreenshareEventObserver];
         [StreamVideoReactNative initializeSharedDictionaries];
     }
     return self;
@@ -85,7 +85,7 @@ RCT_EXPORT_METHOD(currentThermalState:(RCTPromiseResolveBlock)resolve rejecter:(
     resolve(thermalStateString);
 }
 
--(void)dealloc {
+-(void)invalidate {
     if (_busyTonePlayer) {
         if (_busyTonePlayer.isPlaying) {
             [_busyTonePlayer stop];
@@ -93,11 +93,12 @@ RCT_EXPORT_METHOD(currentThermalState:(RCTPromiseResolveBlock)resolve rejecter:(
         _busyTonePlayer = nil;
         [self removeAudioInterruptionHandling];
     }
-    [self clearObserver];
+    [self clearScreenshareEventObserver];
+    [super invalidate];
 }
 
 
--(void)setupObserver {
+-(void)setupScreenshareEventObserver {
     CFNotificationCenterAddObserver(_notificationCenter,
                                     (__bridge const void *)(self),
                                     broadcastNotificationCallback,
@@ -112,7 +113,7 @@ RCT_EXPORT_METHOD(currentThermalState:(RCTPromiseResolveBlock)resolve rejecter:(
                                     CFNotificationSuspensionBehaviorDeliverImmediately);
 }
 
--(void)clearObserver {
+-(void)clearScreenshareEventObserver {
     CFNotificationCenterRemoveObserver(_notificationCenter,
                                        (__bridge const void *)(self),
                                        (__bridge CFStringRef)kBroadcastStartedNotification,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.21.1",
+  "version": "1.22.0",
   "description": "Stream Video SDK for React Native",
   "author": "https://getstream.io",
   "homepage": "https://getstream.io/video/docs/react-native/",
@@ -45,12 +45,12 @@
     "!**/.*"
   ],
   "dependencies": {
-    "@stream-io/video-client": "1.33.0",
-    "@stream-io/video-react-bindings": "1.9.0",
+    "@stream-io/video-client": "1.34.0",
+    "@stream-io/video-react-bindings": "1.10.0",
     "intl-pluralrules": "2.0.1",
     "lodash.merge": "^4.6.2",
-    "react-native-url-polyfill": "1.3.0",
-    "rxjs": "~7.8.1",
+    "react-native-url-polyfill": "^3.0.0",
+    "rxjs": "~7.8.2",
     "text-encoding-polyfill": "0.6.7"
   },
   "peerDependencies": {
@@ -60,16 +60,15 @@
     "@react-native-firebase/app": ">=17.5.0",
     "@react-native-firebase/messaging": ">=17.5.0",
     "@stream-io/noise-cancellation-react-native": ">=0.1.0",
-    "@stream-io/react-native-webrtc": ">=125.4.3",
+    "@stream-io/react-native-webrtc": ">=125.4.4",
     "@stream-io/video-filters-react-native": ">=0.1.0",
     "expo": ">=47.0.0",
     "expo-build-properties": "*",
     "expo-notifications": "*",
     "react": ">=17.0.0",
-    "react-native": ">=0.67.0",
+    "react-native": ">=0.73.0",
     "react-native-callkeep": ">=4.3.11",
     "react-native-gesture-handler": ">=2.8.0",
-    "react-native-incall-manager": ">=4.2.0",
     "react-native-reanimated": ">=2.7.0",
     "react-native-svg": ">=13.6.0",
     "react-native-voip-push-notification": ">=3.3.1"
@@ -116,44 +115,43 @@
     }
   },
   "devDependencies": {
-    "@expo/config-plugins": "10.0.2",
-    "@expo/config-types": "^53.0.4",
-    "@expo/plist": "^0.3.4",
+    "@babel/core": "^7.28.4",
+    "@expo/config-plugins": "54.0.2",
+    "@expo/config-types": "^54.0.8",
+    "@expo/plist": "^0.4.7",
     "@notifee/react-native": "9.1.8",
     "@react-native-community/netinfo": "11.4.1",
     "@react-native-community/push-notification-ios": "1.11.0",
-    "@react-native-firebase/app": "^22.1.0",
-    "@react-native-firebase/messaging": "^22.1.0",
-    "@react-native/babel-preset": "^0.79.2",
-    "@stream-io/noise-cancellation-react-native": "^0.3.0",
-    "@stream-io/react-native-webrtc": "125.4.3",
-    "@stream-io/video-filters-react-native": "^0.7.0",
+    "@react-native-firebase/app": "^23.4.0",
+    "@react-native-firebase/messaging": "^23.4.0",
+    "@react-native/babel-preset": "^0.81.4",
+    "@stream-io/noise-cancellation-react-native": "^0.4.0",
+    "@stream-io/react-native-webrtc": "125.4.4",
+    "@stream-io/video-filters-react-native": "^0.8.0",
     "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "13.2.0",
-    "@tsconfig/node14": "14.1.3",
+    "@testing-library/react-native": "13.3.3",
+    "@tsconfig/node18": "^18.2.4",
     "@types/jest": "^29.5.14",
     "@types/lodash.merge": "^4.6.9",
-    "@types/react": "^19.1.3",
-    "@types/react-native-incall-manager": "^4.0.3",
+    "@types/react": "~19.1.17",
     "@types/react-test-renderer": "^19.1.0",
-    "expo": "~53.0.8",
-    "expo-build-properties": "^0.13.2",
-    "expo-module-scripts": "^4.0.5",
-    "expo-modules-core": "2.2.3",
-    "expo-notifications": "~0.29.14",
+    "expo": "~54.0.12",
+    "expo-build-properties": "^1.0.9",
+    "expo-module-scripts": "^5.0.7",
+    "expo-notifications": "~0.32.12",
     "jest": "^29.7.0",
-    "react": "19.0.0",
-    "react-native": "0.79.2",
+    "react": "19.1.0",
+    "react-native": "^0.81.4",
     "react-native-builder-bob": "~0.23",
     "react-native-callkeep": "^4.3.16",
-    "react-native-gesture-handler": "^2.25.0",
-    "react-native-incall-manager": "^4.2.1",
-    "react-native-reanimated": "~3.17.5",
-    "react-native-svg": "15.11.2",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "~4.1.2",
+    "react-native-svg": "^15.14.0",
     "react-native-voip-push-notification": "3.3.3",
-    "react-test-renderer": "19.0.0",
+    "react-native-worklets": "^0.5.0",
+    "react-test-renderer": "19.1.0",
     "rimraf": "^6.0.1",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.3"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/components/Call/CallContent/CallContent.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  NativeModules,
+  Platform,
   StyleSheet,
   View,
-  NativeModules,
   type ViewStyle,
-  Platform,
 } from 'react-native';
-import InCallManager from 'react-native-incall-manager';
 import {
   CallParticipantsGrid,
   type CallParticipantsGridProps,
@@ -43,6 +42,7 @@ import {
   type ScreenShareOverlayProps,
 } from '../../utility/ScreenShareOverlay';
 import { RTCViewPipIOS } from './RTCViewPipIOS';
+import { getRNInCallManagerLibNoThrow } from '../../../modules/call-manager/PrevLibDetection';
 
 export type StreamReactionType = StreamReaction & {
   icon: string;
@@ -95,7 +95,8 @@ export type CallContentProps = Pick<
      */
     disablePictureInPicture?: boolean;
     /**
-     * Props to set the audio mode for the InCallManager.
+     * @deprecated This prop is deprecated and will be removed in the future. Use `StreamInCallManager` instead.
+     * Props to set the audio mode for the react-native-incall-manager library
      * If media type is video, audio is routed by default to speaker, otherwise it is routed to earpiece.
      * Changing the mode on the fly is not supported.
      * Manually invoke `InCallManager.start({ media })` to achieve this.
@@ -119,9 +120,9 @@ export const CallContent = ({
   layout = 'grid',
   landscape = false,
   supportedReactions,
+  initialInCallManagerAudioMode = 'video',
   iOSPiPIncludeLocalParticipantVideo,
   disablePictureInPicture,
-  initialInCallManagerAudioMode = 'video',
 }: CallContentProps) => {
   const [
     showRemoteParticipantInFloatingView,
@@ -140,8 +141,6 @@ export const CallContent = ({
 
   useAutoEnterPiPEffect(disablePictureInPicture);
 
-  const incallManagerModeRef = useRef(initialInCallManagerAudioMode);
-
   const _remoteParticipants = useRemoteParticipants();
   const remoteParticipants = useDebouncedValue(_remoteParticipants, 300); // we debounce the remote participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
   const localParticipant = useLocalParticipant();
@@ -188,10 +187,15 @@ export const CallContent = ({
   /**
    * This hook is used to handle IncallManager specs of the application.
    */
+  const incallManagerModeRef = useRef(initialInCallManagerAudioMode);
   useEffect(() => {
-    InCallManager.start({ media: incallManagerModeRef.current });
-
-    return () => InCallManager.stop();
+    const prevInCallManager = getRNInCallManagerLibNoThrow();
+    if (prevInCallManager) {
+      prevInCallManager.start({ media: incallManagerModeRef.current });
+      return () => {
+        prevInCallManager.stop();
+      };
+    }
   }, []);
 
   const handleFloatingViewParticipantSwitch = () => {

package/src/components/Call/CallContent/RTCViewPipIOS.tsx

@@ -18,13 +18,19 @@ import {
 import { useDebouncedValue } from '../../../utils/hooks';
 import { shouldDisableIOSLocalVideoOnBackgroundRef } from '../../../utils/internal/shouldDisableIOSLocalVideoOnBackground';
 import { useTrackDimensions } from '../../../hooks/useTrackDimensions';
+import { isInPiPMode$ } from '../../../utils/internal/rxSubjects';
 
 type Props = {
   includeLocalParticipantVideo?: boolean;
+  /**
+   * Callback that is called when the PiP mode state changes.
+   * @param active - true when PiP started, false when PiP stopped
+   */
+  onPiPChange?: (active: boolean) => void;
 };
 
 export const RTCViewPipIOS = React.memo((props: Props) => {
-  const { includeLocalParticipantVideo } = props;
+  const { includeLocalParticipantVideo, onPiPChange } = props;
   const call = useCall();
   const { useParticipants } = useCallStateHooks();
   const _allParticipants = useParticipants({
@@ -112,9 +118,18 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
     return videoStreamToRender?.toURL();
   }, [videoStreamToRender]);
 
+  const handlePiPChange = (event: { nativeEvent: { active: boolean } }) => {
+    isInPiPMode$.next(event.nativeEvent.active);
+    onPiPChange?.(event.nativeEvent.active);
+  };
+
   return (
     <>
-      <RTCViewPipNative streamURL={streamURL} ref={nativeRef} />
+      <RTCViewPipNative
+        streamURL={streamURL}
+        ref={nativeRef}
+        onPiPChange={handlePiPChange}
+      />
       {participantInSpotlight && (
         <DimensionsUpdatedRenderless
           participant={participantInSpotlight}

package/src/components/Call/CallContent/RTCViewPipNative.tsx

@@ -10,8 +10,13 @@ import {
 
 const COMPONENT_NAME = 'RTCViewPip';
 
+export type PiPChangeEvent = {
+  active: boolean;
+};
+
 type RTCViewPipNativeProps = {
   streamURL?: string;
+  onPiPChange?: (event: { nativeEvent: PiPChangeEvent }) => void;
 };
 
 const NativeComponent: HostComponent<RTCViewPipNativeProps> =
@@ -48,6 +53,7 @@ export const RTCViewPipNative = React.memo(
     React.Ref<any>,
     {
       streamURL?: string;
+      onPiPChange?: (event: { nativeEvent: PiPChangeEvent }) => void;
     }
   >((props, ref) => {
     if (Platform.OS !== 'ios') return null;
@@ -58,6 +64,8 @@ export const RTCViewPipNative = React.memo(
         pointerEvents={'none'}
         // eslint-disable-next-line react/prop-types
         streamURL={props.streamURL}
+        // eslint-disable-next-line react/prop-types
+        onPiPChange={props.onPiPChange}
         // @ts-expect-error - types issue
         ref={ref}
       />

package/src/components/Livestream/HostLivestream/HostLivestream.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import InCallManager from 'react-native-incall-manager';
+import { getRNInCallManagerLibNoThrow } from '../../../modules/call-manager/PrevLibDetection';
 
 import { useTheme } from '../../../contexts';
 import {
@@ -89,8 +89,13 @@ export const HostLivestream = ({
 
   // Automatically route audio to speaker devices as relevant for watching videos.
   useEffect(() => {
-    InCallManager.start({ media: 'video' });
-    return () => InCallManager.stop();
+    const prevInCallManager = getRNInCallManagerLibNoThrow();
+    if (prevInCallManager) {
+      prevInCallManager.start({ media: 'video' });
+      return () => {
+        prevInCallManager.stop();
+      };
+    }
   }, []);
 
   const [topViewHeight, setTopViewHeight] = React.useState<number>();

package/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx

@@ -10,6 +10,7 @@ import {
   ViewerLeaveStreamButton as DefaultViewerLeaveStreamButton,
   type ViewerLeaveStreamButtonProps,
 } from './ViewerLeaveStreamButton';
+import { callManager } from '../../../modules/call-manager';
 import { useTheme } from '../../../contexts';
 import { Z_INDEX } from '../../../constants';
 import {
@@ -18,12 +19,11 @@ import {
   LiveIndicator,
 } from '../LivestreamTopView';
 import { IconWrapper, Maximize } from '../../../icons';
-import InCallManager from 'react-native-incall-manager';
 import {
-  VolumeOff,
-  VolumeOn,
   PauseIcon,
   PlayIcon,
+  VolumeOff,
+  VolumeOn,
 } from '../../../icons/LivestreamControls';
 
 /**
@@ -104,10 +104,16 @@ export const ViewerLivestreamControls = ({
   };
 
   const toggleAudio = () => {
-    setIsMuted(!isMuted);
-    InCallManager.setForceSpeakerphoneOn(isMuted);
+    const shouldMute = !isMuted;
+    callManager.speaker.setMute(shouldMute);
+    setIsMuted(shouldMute);
   };
 
+  useEffect(() => {
+    // always unmute audio output on mount for consistency
+    callManager.speaker.setMute(false);
+  }, []);
+
   const togglePlayPause = () => {
     setIsPlaying(!isPlaying);
     showPlayPauseButtonWithTimeout();