React Native中RNCamera拍摄视频实时修剪及保存的解决方案咨询

核心思路 #

RNCamera本身不内置视频修剪功能，需借助第三方库实现修剪逻辑，再将处理后的视频保存到本地或相册。

1. 获取拍摄完成的视频路径 #

通过RNCamera的recordAsync方法完成拍摄，拿到视频的本地URI：

import { RNCamera } from 'react-native-camera';

const takeVideo = async () => {
  if (!cameraRef.current) return;
  
  const videoOptions = {
    quality: RNCamera.Constants.VideoQuality["720p"],
    maxDuration: 60,
    mute: false
  };

  const videoData = await cameraRef.current.recordAsync(videoOptions);
  // 调用修剪方法传入视频URI
  trimVideo(videoData.uri);
};

2. 实现视频修剪 #

使用react-native-video-trim库处理视频修剪，先安装依赖：

npm install react-native-video-trim
# 或 yarn add react-native-video-trim

RN 0.60+版本会自动完成原生链接，低版本需手动配置链接。

修剪逻辑示例：

import VideoTrim from 'react-native-video-trim';

const trimVideo = async (originalUri) => {
  // 设定修剪的起始/结束时间（单位：秒）
  const trimStart = 2;
  const trimEnd = 8;

  try {
    const trimmedVideoUri = await VideoTrim.trim(originalUri, trimStart, trimEnd);
    // 修剪完成后调用保存方法
    saveToGallery(trimmedVideoUri);
  } catch (err) {
    console.error('视频修剪失败:', err);
  }
};

3. 保存修剪后的视频到相册 #

使用@react-native-camera-roll/camera-roll库完成相册保存：

import { CameraRoll } from '@react-native-camera-roll/camera-roll';

const saveToGallery = async (videoUri) => {
  try {
    await CameraRoll.save(videoUri, { type: 'video' });
    alert('修剪后的视频已成功保存到相册');
  } catch (err) {
    console.error('保存视频失败:', err);
  }
};

注意事项 #

• 权限配置：
  • Android：在AndroidManifest.xml中添加READ_EXTERNAL_STORAGE、WRITE_EXTERNAL_STORAGE权限
  • iOS：在Info.plist中添加NSPhotoLibraryAddUsageDescription、NSPhotoLibraryUsageDescription权限描述
• 性能优化：修剪长视频时建议添加加载提示，避免用户误操作
• 格式兼容性：确保原视频与修剪后视频的格式一致，避免播放异常

界面示例 #

内容的提问来源于stack exchange，提问作者Sunil Kumar