Expo React Native使用ffmpeg的方式

新建react native项目

npx create-expo-app -t expo-template-blank-typescript

根据教程配置https://github.com/expo/config-plugins/tree/main/packages/ffmpeg-kit-react-native

1. 安装依赖

   yarn add ffmpeg-kit-react-native @config-plugins/ffmpeg-kit-react-native expo-build-properties

   github教程里没说要装expo-build-properties，导致后续步骤报错

2. app.json里添加

   "plugins": [
     [
       "@config-plugins/ffmpeg-kit-react-native",
       {
         "package": "full-gpl"
       }
     ]
   ]

   关于full-gpl含义：https://github.com/tanersener/mobile-ffmpeg/releases

根据上述生成ios和android文件夹

expo prebuild

ios/Podfile里的iOS版本太旧会导致编译失败，可根据ffmpeg sdk的官方要求更改版本号：https://www.npmjs.com/package/ffmpeg-kit-react-native

App.tsx编写如下代码

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { FFmpegKit, ReturnCode } from 'ffmpeg-kit-react-native'
import { useEffect } from 'react';
import * as FileSystem from 'expo-file-system'

export default function App() {
  useEffect(()=>{
    FFmpegKit.execute(`-i https://static-b905bdbb-5254-4483-af4c-16e5bf477a2e.bspapp.com/mpd/wolf.mpd -c copy ${FileSystem.documentDirectory}/${Math.random()}.mp4`)
    .then(async (session) => {
      const returnCode = await session.getReturnCode()
      if (ReturnCode.isSuccess(returnCode)) {
        console.log('SUCCESS')
      } else if (ReturnCode.isCancel(returnCode)) {
        console.log('CANCEL')
      } else {
        console.log('ERROR')
      }
    })
  }, [])

  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

云端编译并在iOS虚拟机上运行

yarn ios

看到SUCCESS的log说明ffmpeg运行成功