React Native Expo中react-native-vision-camera能否同时启用前后双摄像头？

问题描述 #

使用react-native-vision-camera时，尝试同时渲染前后两个<Camera>组件，但同一时间只有一个摄像头能工作。此前看到旧文章称无法实现，但手机自带相机应用支持该功能，询问当前是否可行。

问题代码 #

import {
  useCameraDevices,
  Camera,
  useCameraDevice,
  useCameraPermission,
} from "react-native-vision-camera";
import { View, Button, Text } from "react-native";
import { useEffect, useState } from "react";

const DualCameraScreen = () => {
  const device1 = useCameraDevice("front");
  const device2 = useCameraDevice("back");
  const { hasPermission, requestPermission } = useCameraPermission();
  const [isRecording, setIsRecording] = useState(false);

  if (!hasPermission) {
    requestPermission();
  }

  const startRecording = async () => {
    setIsRecording(true);
  };

  return (
    <View style={{ flex: 1 }}>
      {device1 && device2 && (
        <View
          style={{ flex: 1, flexDirection: "column", backgroundColor: "green" }}
        >
          <Camera
            style={{ flex: 1 / 3, width: "100%" }}
            device={device1}
            isActive={true}
            video={true}
          />
          <Camera
            style={{ flex: 1 / 3, width: "100%" }}
            device={device2}
            isActive={true}
          />
        </View>
      )}
    </View>
  );
};

export default DualCameraScreen;

解答 #

可行性说明 #

现在部分硬件支持的设备上已经可以实现前后摄像头同时工作，但依赖两个核心条件：

1. 设备硬件支持多摄像头并发（比如苹果A12及以上芯片、高通骁龙8系及以上的安卓设备）；
2. 使用react-native-vision-camera的v3.x及以上版本（v2及以下不支持多摄像头会话）。

你的原有代码无法工作的原因是：直接实例化两个<Camera>组件不符合框架设计，Vision Camera默认一次只能将一个相机设备绑定到会话，无法通过双组件实现多摄并发。

正确实现方式 #

使用Vision Camera v3+提供的MultiCamera API来实现多摄像头同时启用，示例代码如下：

import { useCameraDevices, MultiCamera, useCameraPermission } from "react-native-vision-camera";
import { View, Text } from "react-native";
import { useState } from "react";

const DualCameraScreen = () => {
  const devices = useCameraDevices();
  const frontDevice = devices.front;
  const backDevice = devices.back;
  const { hasPermission, requestPermission } = useCameraPermission();
  const [isActive, setIsActive] = useState(true);

  if (!hasPermission) {
    requestPermission();
  }

  // 检查当前设备是否支持多摄像头并发
  const supportsDualCamera = frontDevice?.supportsConcurrentCamera && backDevice?.supportsConcurrentCamera;

  return (
    <View style={{ flex: 1 }}>
      {supportsDualCamera && frontDevice && backDevice ? (
        <MultiCamera
          style={{ flex: 1, flexDirection: "column" }}
          devices={[frontDevice, backDevice]}
          isActive={isActive}
          video={true}
          // 为每个摄像头单独配置样式和参数
          deviceConfigs={[
            { 
              device: frontDevice, 
              style: { flex: 1/3, width: "100%" } 
            },
            { 
              device: backDevice, 
              style: { flex: 1/3, width: "100%" } 
            }
          ]}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text>当前设备不支持前后摄像头同时启用</Text>
        </View>
      )}
    </View>
  );
};

export default DualCameraScreen;

额外注意事项 #

• 权限配置：确保在AndroidManifest.xml（安卓）和Info.plist（iOS）中正确声明相机权限；
• 录制功能：如果需要同时录制两个摄像头的视频，需使用MultiCamera的专属录制API，而非单独<Camera>的录制方法；
• 性能限制：多摄像头并发会消耗更多系统资源，部分中低端设备即使硬件支持，也可能出现卡顿或发热问题。

内容的提问来源于stack exchange，提问作者Jazzel Mehmood