Expo项目中实现视频裁剪功能的可用库及实现方案咨询

适配Expo的现成裁剪库 #

首推Expo生态原生支持的expo-video-editor，无需修改原生配置，同时支持Expo托管工作流和裸工作流，完全满足按指定时间区间裁剪视频的需求，还内置了压缩、分辨率调整等适配社交动态上传的配套功能。
使用步骤：

• 安装依赖：npx expo install expo-video-editor
• 在app.json中补充存储相关权限配置，iOS需添加NSPhotoLibraryAddUsageDescription、安卓需添加WRITE_EXTERNAL_STORAGE权限声明
• 核心裁剪调用逻辑如下：

import * as VideoEditor from 'expo-video-editor';

const cropResult = await VideoEditor.cropAsync(videoUri, {
  startTime: 3, // 开始时间，单位秒
  endTime: 15, // 结束时间，单位秒
  quality: VideoEditor.VideoQuality['720p'],
  saveToCameraRoll: false,
});
const croppedVideoUri = cropResult.uri;

基于FFmpeg的自定义实现方案 #

如果需要更灵活的自定义处理逻辑，可以使用Expo适配的ffmpeg-kit库实现裁剪：

• 提前安装路径依赖：npx expo install expo-file-system
• 安装FFmpeg相关依赖：npx expo install @config-plugins/ffmpeg-kit-react-native ffmpeg-kit-react-native
• 在app.json的plugins数组中添加"@config-plugins/ffmpeg-kit-react-native"完成配置
• 核心裁剪逻辑使用FFmpeg快速裁剪命令，无需重新编码，执行速度快：

import * as FileSystem from 'expo-file-system';
import { FFmpegKit, ReturnCode } from 'ffmpeg-kit-react-native';

const startTime = 3; // 单位秒
const duration = 12; // 裁剪总时长，即结束时间减开始时间
const outputUri = `${FileSystem.cacheDirectory}cropped_video.mp4`;

const command = `-i ${inputVideoUri} -ss ${startTime} -t ${duration} -c:v copy -c:a copy ${outputUri}`;
const session = await FFmpegKit.execute(command);
const returnCode = await session.getReturnCode();

if (ReturnCode.isSuccess(returnCode)) {
  // 裁剪成功，outputUri即为裁剪后视频地址
}

适配社交动态场景的优化建议 #

• 若需要限制输出文件大小，可将FFmpeg命令中的-c:v copy替换为-c:v h264 -crf 23，通过调整crf数值平衡画质和文件体积
• 裁剪完成后建议先本地预览确认内容符合预期，再执行上传逻辑
• 所有依赖均适配Expo最新版本，无需执行原生pod install或者安卓gradle修改，避免了第三方非Expo适配库无法运行的问题

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