使用 react-native-camera 在 React Native 中录制视频时无法播放音频

Question

我想使用react-native-sound 播放正在通过网址播放的音频，同时我想录制视频，以便我可以在视频中捕捉通过手机扬声器播放的音频。我可以在 android 中实现这一点，但 iOS 让我很难。

我已经在官方 react-native-camera github repo 上问过这个问题，但还没有回复。

首先要做的事情

• [ YES ] 您尝试过最新版本吗？
• [ YES ] 你试过master吗？
• [ YES ] 您是否查找过现有的匹配问题？

平台

在 Android 中没有遇到任何问题

它只发生在 iOS 中。

版本

• Android：使用不同版本的 android，没有遇到任何问题
• iOS：
• react-native-camera: 3.44.3
• 反应原生：0.64.2
• 反应：17.0.1

描述/当前行为

这仅在 iOS 上发生，在 Android 上运行良好。我想在录制视频时播放音频，以便可以通过相机正在使用的麦克风捕获手机扬声器上播放的音频。我播放音频，一旦我调用 recordAsync() 函数，音频就会停止并开始录制，起初我虽然在 iOS 中不可能这样做，因为与 Android 相比，iOS 中的权限策略不同，但我由执行相同操作的客户端提供了本机 iOS 版本的应用程序，因此权限不是问题。

预期行为 预计在我录制视频时允许音频继续播放

复制步骤

尝试使用 react-native-sound 从文件或 URL 播放任何音频，并从 react-native-camera 调用 recordAsync()，

补充

我正在使用react-native-sound 播放音频，因为音频是通过 URL 播放的，这是我的带有道具的 RNCamera 组件：

    <RNCamera
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          captureAudio={true}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          androidRecordAudioPermissionOptions={{
            title: 'Permission to use audio recording',
            message: 'We need your permission to use your audio',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}>
          {({camera, status, recordAudioPermissionStatus}) => {
            if (showFilenameModal) {
             // show a modal to save the video file with a user entered name
            }
            if (status !== 'READY')
              return (
                <View
                  style={{
                    flex: 1,
                    width: globalStyles.WIDTH,
                    backgroundColor: 'black',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <Text>Waiting</Text>
                </View>
              );
            return recording || processing ? (
              <IconButton
                title={'Stop'}
                icon={'stop'}
                disabled={processing}
                onPress={() => {
                  console.log('Stop Recording');
                  camera.stopRecording();
                }}
              />
            ) : (
              <View
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'space-around',
                  marginBottom: 10,
                }}>
                  {/* Button to record video without playing the audio */}
                <IconButton
                  title={'Record'}
                  icon="record"
                  onPress={() => this.startRecording(camera, false)}
                />
                  {/* Button to record video while playing the audio */}
                <IconButton
                  title={'Record with Audio'}
                  icon="record"
                  showSound={true}
                  onPress={() => this.startRecording(camera)}
                /> 
              </View>
            );
          }}
        </RNCamera>

这就是我开始录制的方式：

startRecording = async function (camera, withAudio = true) {
    const {audioPlayer, setVideoStatus} = this.props;
    audioPlayer.stopAudio();
    setVideoStatus({
      recording: true,
      processing: false,
      uri: null,
    });

    if (withAudio) audioPlayer.playAudio();

    const video = await camera.recordAsync({
      quality: RNCamera.Constants.VideoQuality['720p'],
      // I've tried this with different flag combination i.e:
      // captureAudio: true / false,
      // keepAudioSession: true / false,
    });

    console.log(video.uri.substr(7, video.uri.length), video.codec);

    audioPlayer.stopAudio();
    setVideoStatus({
      recording: false,
      processing: true,
    });

    this.setState({
      showFilenameModal: true,
      uri: video.uri,
    });
  };

这是我的 info.plist

  <key>NSCameraUsageDescription</key>
  <string>Allow app to open camera to record video</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>Allow app to save videos to library</string>
  <key>NSAppleMusicUsageDescription</key>
  <string>Allow app to use media library for audio</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>Allow app to use location for getting current state</string>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>Allow app to use location for getting current state</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>Allow app to use microphone to record video with audio</string>

以防万一这些是我的 AndoroidManifest.xml 中的权限：

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

我说的另一个应用，不是基于 react native，我认为是原生 iOS。

Answer 1

感谢 react-native-camera 社区，我能够解决这个问题：

https://github.com/react-native-camera/react-native-camera/issues/3276