如何在react-native-webrtc中切换/强制开启扬声器？

react-native-webrtc本身没有直接提供音频路由控制的API，这属于系统级音频管理能力，但你完全不需要安装完整第三方库，只需要编写极简的原生桥接代码就能实现功能，以下是分平台的实现步骤：

Android 端实现 #

1. 创建原生模块文件
   在Android项目的app/src/main/java/[你的包名]/下新建AudioModule.java：

package com.yourapppackage; // 替换为你的项目包名

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import android.media.AudioManager;

public class AudioModule extends ReactContextBaseJavaModule {
    private AudioManager audioManager;

    public AudioModule(ReactApplicationContext reactContext) {
        super(reactContext);
        audioManager = (AudioManager) reactContext.getSystemService(reactContext.AUDIO_SERVICE);
    }

    @Override
    public String getName() {
        return "AudioModule";
    }

    @ReactMethod
    public void setSpeakerOn(boolean enable) {
        if (enable) {
            audioManager.setMode(AudioManager.MODE_IN_COMMUNICATION);
            audioManager.setSpeakerphoneOn(true);
        } else {
            audioManager.setSpeakerphoneOn(false);
        }
    }
}

2. 注册模块
   同目录下新建AudioPackage.java：

package com.yourapppackage;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class AudioPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new AudioModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

3. 在MainApplication.java中添加包：

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new AudioPackage()); // 添加此行
    return packages;
}

iOS 端实现 #

1. 创建原生模块文件
   在iOS项目中新建AudioModule.h：

#import <React/RCTBridgeModule.h>

@interface AudioModule : NSObject <RCTBridgeModule>
@end

2. 新建AudioModule.m：

#import "AudioModule.h"
#import <AVFoundation/AVFoundation.h>

@implementation AudioModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(setSpeakerOn:(BOOL)enable) {
    dispatch_async(dispatch_get_main_queue(), ^{
        NSError *error;
        AVAudioSession *session = [AVAudioSession sharedInstance];
        [session setCategory:AVAudioSessionCategoryPlayAndRecord withOptions:AVAudioSessionCategoryOptionDefaultToSpeaker error:&error];
        
        if (enable) {
            [session overrideOutputAudioPort:AVAudioSessionPortOverrideSpeaker error:&error];
        } else {
            [session overrideOutputAudioPort:AVAudioSessionPortOverrideNone error:&error];
        }
        
        [session setActive:YES error:&error];
    });
}

@end

React Native JS 层调用 #

在RN代码中导入原生模块并封装切换函数：

import { NativeModules } from 'react-native';
const { AudioModule } = NativeModules;

// 封装扬声器切换函数
export const toggleSpeaker = (enable) => {
  AudioModule.setSpeakerOn(enable);
};

集成到你的通话代码中 #

在CallerVideoScreen组件中，可在获取远端流后默认开启扬声器，或添加切换按钮：

// 在ontrack获取remoteStream后调用，默认开启扬声器
localPC.ontrack = (e) => {
    const newStream = new MediaStream();
    e.streams[0].getTracks().forEach((track) => {
        newStream.addTrack(track);
    });
    setRemoteStream(newStream);
    toggleSpeaker(true);
};

// 添加切换按钮的示例
const [speakerEnabled, setSpeakerEnabled] = React.useState(true);
const handleSpeakerToggle = () => {
  toggleSpeaker(!speakerEnabled);
  setSpeakerEnabled(!speakerEnabled);
};

注意事项 #

• Android 端需在AndroidManifest.xml添加权限：<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
• iOS 端需在Info.plist添加麦克风权限描述：NSMicrophoneUsageDescription
• 通话结束后记得恢复系统音频路由，避免影响其他应用音频播放

内容的提问来源于stack exchange，提问作者Mike K