You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React Native Vision Camera在Android平台遭遇Session/Invalid-Output-Configuration错误

React Native Vision Camera在Android平台遭遇Session/Invalid-Output-Configuration错误

我之前在集成Vision Camera的时候也踩过这个「Session/Invalid-Output-Configuration」的坑,结合你贴的代码来看,这个错误大多是相机输出配置不兼容、权限没处理到位,或者组件参数设置冲突导致的。咱们一步步来调整解决:

一、先修正代码里的几个明显问题

你的代码里有几处小疏漏,先把这些补上:

  1. 缺失的导入:你用了useStateuseRefuseEffect但没从react导入,这会导致隐性错误;
  2. isActive参数硬编码:你直接把isActive={true},但其实应该用你定义的isCameraActive状态,不然页面失焦再回来可能会有配置冲突;
  3. 权限逻辑重复:你同时用了useCameraPermission hook和手动调用Camera.requestCameraPermission(),这会导致权限请求重复,容易出问题;
  4. 冗余的photo/video属性Camera组件里的photovideo={false}是旧版参数,新版已经用权限来控制,不需要在组件上声明。

给你整理了修正后的代码:

import { StyleSheet, View } from 'react-native';
import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
import { useFocusEffect } from '@react-navigation/native';
import { useState, useRef, useEffect, useCallback } from 'react'; // 补上缺失的导入

function HomeScreen() {
  const device = useCameraDevice('back');
  const { hasPermission, requestPermission } = useCameraPermission(); // 用hook的requestPermission
  const [isCameraActive, setIsCameraActive] = useState(true);
  const cameraRef = useRef(null);

  // 页面聚焦/失焦控制相机激活状态
  useFocusEffect(
    useCallback(() => {
      setIsCameraActive(true);
      return () => setIsCameraActive(false);
    }, [])
  );

  // 权限请求逻辑简化
  useEffect(() => {
    if (!hasPermission) {
      requestPermission().then(res => {
        console.log('权限请求结果:', res);
      });
    }
  }, [hasPermission, requestPermission]);

  if (!device || !hasPermission) return null; // 没有设备或权限时返回空

  return (
    <View style={styles.container}>
      <Camera
        ref={cameraRef}
        onInitialized={() => console.log('Camera is ready!')}
        device={device}
        isActive={isCameraActive} // 用状态变量控制激活
        photoQualityBalance="quality"
        style={StyleSheet.absoluteFill}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default HomeScreen;

二、Android端的关键配置调整

这是很多人忽略的点,Android的相机配置有严格的要求:

  1. Manifest权限配置:确保AndroidManifest.xml里已经添加了相机权限,并且启用了硬件加速:
<!-- 相机权限 -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

<!-- 应用主题要启用硬件加速(默认是开启的,但如果自定义主题要确认) -->
<application
  ...
  android:hardwareAccelerated="true">
  1. 相机输出参数兼容:有些Android设备对photoQualityBalance的「quality」模式支持不好,可以先改成「speed」试试,或者指定具体的分辨率:
// 替换photoQualityBalance为具体的分辨率测试
<Camera
  ...
  photoQualityBalance="speed"
  // 或者指定固定分辨率
  // photoResolution={{ width: 1920, height: 1080 }}
/>
  1. 避免同时启用多个输出:确保你没有同时开启photo和video模式,如果你只需要拍照,就不要在任何地方启用video相关的配置,比如不要设置video={true},也不要请求video权限。

三、最后排查硬件兼容问题

如果上面的调整都试过还是报错,那可能是设备的硬件兼容性问题:

  • 有些低端Android设备不支持高分辨率拍照,你可以尝试降低photoQualityBalance到「speed」,或者指定更低的分辨率;
  • 可以先注释掉photoQualityBalance参数,用默认值测试,看是否能正常启动相机;
  • 检查设备的相机是否被其他应用占用,比如系统相机、微信等,关闭其他应用再测试。

按照这个步骤来,应该能解决这个「Session/Invalid-Output-Configuration」的错误,你可以先从代码修正开始试,再调整Android配置~

火山引擎 最新活动