react native ffmpeg 视频处理
ffmpeg-kit-react-native
直接使用ffmpeg-kit-react-native就好了。
yarn add ffmpeg-kit-react-native1 使用到的官方参考及项目地址
ffmpeg-kit仓库地址
ffmpeg-kit-test仓库地址
ffmpeg官方参考文档
ffmpeg-kit-Android使用参考
用 ffmpeg 压缩视频命令参考
2 FFmpegKit概述3
FFmpegKit是一个封装了 FFmpeg 库的脚本
FFmpegKit是一个在应用程序中运行FFmpeg/FFprobe命令的包装库
支持安卓、iOS、macOS 和 tvOS
基于v4.4-dev带有可选系统和外部库的FFmpeg
Github、Maven Central和CocoaPods 上提供了 8 个预构建的二进制包。
根据 许可LGPL 3.0，或者GPL v3.0如果启用了 GPL 许可的库
2 Android端引入
2.1 会遇到的错误
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* What went wrong:
Execution failed for task ':app:mergeDebugNativeLibs'.> More than one file was found with OS independent path 'lib/armeabi-v7a/libc++_shared.so'. If you are using jniLibs and CMake IMPORTED targets, see https://developer.android.com/studio/preview/features#automatic_packaging_of_prebuilt_dependencies_used_by_cmake* 错误说明：本地项目和第三方库引用的相同的.so文件，或者是两个第三方库引入了相同的.so文件，
导致编译的时候不知道以哪个为主
2.2 如何处理
参考 https://www.freesion.com/article/5027886785/
根据启动RN项目是给到的提示
在Android Studio 修改android/app目录的下的build.gradle文件的android{}中添加这样一行代码。然后点击Sync
packagingOptions {pickFirst 'lib/x86/libc++_shared.so'pickFirst 'lib/arm64-v8a/libc++_shared.so'pickFirst 'lib/x86_64/libc++_shared.so'pickFirst 'lib/armeabi-v7a/libc++_shared.so'}
3 react native 传递ffmpe 命令给android原生层执行
3.1AndroidManifest.xml注册权限
- 权限注册
3.2 使用react-native-image-crop-picker获取视频路径，生成ffmpe命令传递给andorid原生层执行
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
import ToastExample from '../../native/ToastExample';export default class App extends Component {constructor(props) {super(props);this.state = {path: ''};}/*** 从图库中选择视频*/pickVideo = () => {ImagePicker.openPicker({mediaType: 'video'}).then((image) => {console.log(image);this.setState({ path: image.path });}).catch((error) => {console.log(error);});};toast = () => {const command = `-i ${ this.state.path } -r 20 /sdcard/$MuMu共享文件夹/1111.mp4`console.log(command)ToastExample.show(command);};render() {return (<View style={{ flex: 1 }}><Text> videoPick </Text><Button title="选择视频" onPress={this.pickVideo} /><Button title="toast" onPress={this.toast} /></View>);}
}3.3 android 原生层代码实现
@ReactMethodpublic void show(String message) {Log.d(TAG, message);
// Toast.makeText(getReactApplicationContext(), message, duration).show();FFmpegSession session = FFmpegKit.execute(message);if (ReturnCode.isSuccess(session.getReturnCode())) {// SUCCESSLog.d(TAG, "show: SUCCESS"+ session.getOutput());} else if (ReturnCode.isCancel(session.getReturnCode())) {// CANCELLog.d(TAG, "show: CANCEL");} else {// FAILURELog.d(TAG, String.format("Command failed with state %s and rc %s.%s", session.getState(), session.getReturnCode(), session.getFailStackTrace()));}}
4 ffmpeg常用命令整理
4.1 视频压缩流程
- 选择视频：android mp4
- 压缩后的视频在上传后， 压缩 并 上传 （上传），压缩后的文件被删除掉
4.2 先 视频裁剪
ffmpeg -ss 00:00:00 -i video.mp4 -vcodec copy -acodec copy -t 00:00:31 output1.mp4
4.3 后 压缩
-i this.state.path−r20/sdcard/{ this.state.path } -r 20 /sdcard/this.state.path−r20/sdcard/MuMu共享文件夹/1111.mp4
4.4 提取音频（放到手机里）
ffmpeg -i 人生若只如初见.flv -vn r.mp3
#-vn 解析 video no简写，忽略视频
4.5 压缩mp3
ffmpeg -i input.mp3 -ab 128 output.mp3 //这里将比特率设为128
H264 与h265 的区别
h265在视频运动，视频丢帧情况下更牛逼，更好
react native ffmpeg 视频处理相关推荐
- 一个使用react native实现的短视频APP
黄豆仔短视频APP 一个使用react native实现的短视频APP.该项目是我没事搞着玩,用react native 写的.用了很多的库同时也修改了几个库: react-native-card-s ...
- Pano React Native SDK 来了！快速实现移动端音视频和白板
前言 React Native 是 Facebook 于2015年4月开源的跨平台移动应用开发框架,支持iOS和安卓两大平台.React Native 着力于提高多平台开发的开发效率 -- Learn ...
- React Native 入门实战视频教程（36 个视频）
React Native 入门实战视频教程(36 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示 ...
- 菜鸟窝Android百度云视频,菜鸟窝React Native 视频系列教程
菜鸟窝React Native 视频系列教程 交流QQ群:276960232 Hi,我是RichardCao,现任新美大酒店旅游事业群的Android Developer.15年加入饿了么即时配送BU ...
- React Native 入门实战视频教程（37 个视频）
我这里有视频教程,全部是我自己辛苦录的,有兴趣的可以看下. React Native 入门实战视频教程(37 个视频) 从零开始入门学习 React Native 开发,手把手教你写 App 项目 # ...
- React Native 入门实战视频教程（4 个视频）
React Native 入门实战视频教程(4 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示在 ...
- 如何用 React Native 开发实时音视频应用
对于 Web.iOS.Android 开发者来讲,React Native 给跨平台开发工作带来了很大的帮助.仅用 JavaScript 就可以创建运行于移动端的应用.同时,你也可以将 React N ...
- react native 实现surfaceview播放视频
本文在react native的js页面中调用android层写的surfaceview播放视频 1.我们搭建好rn环境后,创建rn项目并运行到设备上(本文省略),在项目的目录下 /android/a ...
- 爱奇艺龙勇：如何搭建自己的React Native框架-CSDN公开课-专题视频课程
爱奇艺龙勇:如何搭建自己的React Native框架-6139人已学习 课程介绍 主要讲解React Native开发语法,React JS原理.React JS与Native通信协 ...
最新文章
- 工业界AI项目落地的繁琐过程
- [BUAA软工]提问回顾与个人总结
- getdata提取曲线数据_Origin如何从图表中获取数据
- 《F4+2团队项目系统设计改进》
- java城市级联一次查询_我的城市没有任何设计活动，所以我自己组织了一次。...
- Mysql的持久层_持久层(数据层,Dao层) MyBatis框架
- 深度解析TCP/IP---网络原理的重重之重
- 超图神经网络 Hypergraph Neural Networks
- dell最新计算机如何U盘引导,详解戴尔台式电脑如何bios设置U盘启动
- ASO优化的盲点：Apple ID权重必须考量
- C#使用iTextSharp给PDF文件添加水印，PDF文件加密,PDF文件旋转
- css中的单位换算_关于网页中pt和px的单位换算！
- Unity Toon Shader 卡通着色器（一）：卡通着色
- 新媒体运营教程：完整的用户增长5步方案!
- STM8S 模拟I2C程序
- 纯干货，面试题分享，让你打有准备的战！
- Java高铁的速度是火车的两倍_亚洲最大的三座高铁站, 全部都是特等站, 毫无疑问都在中国...
- 云服务器标准方式登录Linux
- 响应式网页设计之JavaScript与CSS交互
- L24 word2vec