Expo 51.0.1升级后expo-camera录像功能异常求助

遇到的问题 #

升级至Expo 51.0.1后，expo-camera录像功能失效，出现两个阶段的错误：

1. 初始报错：

   ERROR  Recording failed [Error: Video recording failed: Recording was stopped before any data could be produced.]
   

2. 添加视频质量参数后新报错：

   ERROR  Recording failed:1 [TypeError: Cannot read property 'VideoQuality' of undefined]
   

修复步骤 #

1. 修正 VideoQuality 引用方式 #

Expo Camera v15（对应Expo 51）的API发生变化，VideoQuality不再挂载在CameraView.Constants下，需直接从expo-camera导入：

import { CameraView, useCameraPermissions, VideoQuality } from 'expo-camera';

修改recordAsync调用：

const video = await cameraRef.current.recordAsync({
  quality: VideoQuality['720p'],
});

2. 修复权限获取逻辑 #

录像需要相机和麦克风权限，当前代码的权限处理存在执行顺序问题，调整为组件挂载时主动请求：

import React, { useState, useRef, useEffect } from 'react';

// ... 其他代码

useEffect(() => {
  async function requestPermissions() {
    const cameraPerm = await CameraView.requestCameraPermissionsAsync();
    const micPerm = await CameraView.requestMicrophonePermissionsAsync();
    console.log('相机权限状态:', cameraPerm.status);
    console.log('麦克风权限状态:', micPerm.status);
  }
  requestPermissions();
}, []);

3. 移除冲突依赖 #

package.json中同时存在expo-camera和react-native-camera，两者会导致功能冲突，删除react-native-camera：

npm uninstall react-native-camera
# 或使用yarn
yarn remove react-native-camera

4. 简化录像流程 #

recordAsync是异步函数，会自动处理录像的开始与停止，无需手动调用stopRecording，修改相关逻辑：

const startRecording = async () => {
  if (!cameraRef.current) return;
  
  setIsRecording(true);
  try {
    const video = await cameraRef.current.recordAsync({
      quality: VideoQuality['720p'],
    });
    console.log('录像完成，文件路径:', video.uri);
    setIsRecording(false);
    handleVideoRecorded(video.uri);
  } catch (error) {
    console.error('录像失败:', error);
    setIsRecording(false);
  }
};

// 移除单独的stopRecording函数

对应UI调整为：

{isRecording ? (
  <TouchableOpacity style={styles.button} disabled>
    <Text style={styles.text}>录制中...</Text>
  </TouchableOpacity>
) : (
  <TouchableOpacity style={styles.button} onPress={startRecording}>
    <Text style={styles.text}>开始录制</Text>
  </TouchableOpacity>
)}

5. 确认权限配置 #

在app.json中确保已添加相机和麦克风权限声明：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "需要访问相机进行拍摄",
        "NSMicrophoneUsageDescription": "需要访问麦克风进行录音"
      }
    },
    "android": {
      "permissions": [
        "CAMERA",
        "RECORD_AUDIO"
      ]
    }
  }
}

内容的提问来源于stack exchange，提问作者Pankaj Bhardwaj