react-native-image-picker视频压缩实现：使用react-native-video-processing
项目地址: https://gitcode.com/gh_mirrors/reac/react-native-image-picker 在移动应用开发中，视频上传和分享是常见需求，但高分辨率视频往往体积过大，导致上传缓慢和用户流量消耗过多。本文将详细介绍如何结合react-native-image-picker与react-native-video-processing实现视频压缩功能，解决这一痛点。读完本文，你将掌握视频选择、压缩处理的完整流程，并能根据实际需求调整压缩参数。
视频选择基础配置
react-native-image-picker提供了基础的视频选择能力，通过配置选项可初步控制视频质量。在src/types.ts中定义了视频相关参数：
export interface OptionsCommon {
mediaType: MediaType; // 可设置为'video'
videoQuality?: AndroidVideoOptions | iOSVideoOptions; // 基础画质控制
formatAsMp4?: boolean; // 是否强制MP4格式
}
示例应用example/src/App.tsx中展示了视频拍摄和选择的实现：
{
title: 'Take Video',
type: 'capture',
options: {
saveToPhotos: true,
formatAsMp4: true, // 强制转为MP4便于后续处理
mediaType: 'video',
videoQuality: 'low' // 基础压缩选项
}
}
基础压缩通过videoQuality参数实现，Android支持'low'/'high'，iOS支持'low'/'medium'/'high'，但这种压缩能力有限，无法满足自定义比特率、分辨率等高级需求。
视频压缩实现方案
压缩流程设计
使用react-native-video-processing实现高级压缩需以下步骤：
- 通过react-native-image-picker获取视频文件路径
- 调用视频压缩API处理文件
- 获取压缩后文件并上传或展示
核心实现代码
安装依赖后，实现压缩功能：
import RNVideoProcessing from 'react-native-video-processing';
// 视频选择回调处理
const handleVideoSelect = (response) => {
if (response.assets && response.assets[0]) {
const videoUri = response.assets[0].uri;
compressVideo(videoUri); // 调用压缩方法
}
};
// 压缩实现
const compressVideo = async (sourceUri) => {
try {
// 获取原始视频信息
const info = await RNVideoProcessing.getVideoInfo(sourceUri);
// 配置压缩参数
const compressedUri = await RNVideoProcessing.compress(
sourceUri,
{
width: 720, // 目标宽度
height: 1280, // 目标高度
bitrateMultiplier: 0.5, // 比特率乘数
saveToCameraRoll: true,
minimumBitrate: 500000, // 最小比特率
progress: (progress) => console.log('Compression progress:', progress)
}
);
setResponse({...response, assets: [{...response.assets[0], uri: compressedUri}]});
} catch (error) {
console.error('Compression error:', error);
}
};
压缩参数优化策略
根据不同场景调整压缩参数可平衡视频质量和文件大小：
| 参数 | 作用 | 建议值 |
|---|---|---|
| width/height | 控制分辨率 | 720p(720×1280)适合移动端 |
| bitrateMultiplier | 比特率乘数 | 0.3-0.7之间，越小文件越小 |
| minimumBitrate | 最小比特率 | 500kbps避免过度压缩 |
在src/platforms/native.ts中可设置默认视频质量：
const DEFAULT_OPTIONS = {
videoQuality: 'high', // 基础质量选择
formatAsMp4: true // 统一格式便于处理
};
完整实现示例
结合视频选择与压缩的完整组件代码：
import React from 'react';
import {View, Button} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import RNVideoProcessing from 'react-native-video-processing';
const VideoPickerWithCompression = () => {
const launchCamera = () => {
const options = {
mediaType: 'video',
formatAsMp4: true,
videoQuality: 'high' // 先获取高质量视频再压缩
};
ImagePicker.launchCamera(options, (response) => {
if (!response.didCancel && response.assets) {
compressVideo(response.assets[0].uri);
}
});
};
const compressVideo = async (uri) => {
try {
const compressedUri = await RNVideoProcessing.compress(uri, {
width: 720,
height: 1280,
bitrateMultiplier: 0.5
});
console.log('Compressed video:', compressedUri);
// 这里可以上传压缩后的视频
} catch (error) {
console.error('Compression failed:', error);
}
};
return (
<View>
<Button title="拍摄并压缩视频" onPress={launchCamera} />
</View>
);
};
export default VideoPickerWithCompression;
注意事项与兼容性
-
权限配置：
- Android需在AndroidManifest.xml添加存储和相机权限
- iOS需在Info.plist添加NSCameraUsageDescription和NSPhotoLibraryUsageDescription
-
格式兼容性： 通过设置
formatAsMp4: true确保输出MP4格式，避免处理不同编码格式的问题 -
性能优化：
- 压缩过程建议放在非UI线程
- 长视频可分段压缩或显示进度提示
总结与进阶方向
本文介绍了如何使用react-native-image-picker结合react-native-video-processing实现视频压缩功能。基础压缩可通过配置videoQuality参数实现，高级压缩则需使用专业视频处理库。实际开发中可根据网络环境、设备性能动态调整压缩参数，在质量和大小间取得平衡。
进阶方向：
- 实现自适应压缩（根据视频长度自动调整参数）
- 添加视频裁剪、水印等高级功能
- 结合ffmpeg实现更精细的编解码控制
通过合理配置和优化，可显著提升视频上传速度和用户体验，满足社交分享、内容创作等场景需求。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
