如何在 React Native (Android) / Expo 项目中使用 FFmpeg 访问图像文件？

Question

我制作了一个应用程序，我想在其中使用 React Native 中的 FFmpeg 从 png 创建视频，但我卡在了图像文件路径部分。 FFmpeg 使用 android 的文件系统，所以我不能真正使用像 ./assets/img.png 这样的路径。我需要一个绝对路径 - 不能使用 require('img.png')

这是我的 FFmpeg 代码：

ffmpeg -loop 1 -i img.png -t 10 -r 1 -c:v libx264 output.mp4

如何访问 android 上的 res 或 assets 文件夹？有没有办法将它捆绑到我的应用程序中，以便在我的 android 上我可以通过某种方式通过绝对路径访问它？

我搜索了很多与此类似的问题，大部分答案都是使用 require('img.png') 但这对我不起作用，因为 FFmpeg 的工作方式。有没有办法在 React Native Android 项目中使用 FFmpeg 访问我的图像文件？

Answer 1

您无法从 ffmpeg 命令行访问 res 或 assets 文件夹中的图像：它们不在文件系统中 'files'，它们捆绑在 APK 中（或 APK 文件之一，如果您的应用程序作为 Android 捆绑包分发）。您应该将图像复制到一个临时位置，可能 that the system allocates to your app. You don't need extra permissions to write these files. The name of this directory is not fixed, so you will need to build the ffmpeg command line dynamically. react-native-fs 提供了所有必要的功能。

Answer 2

解决方案 1

为使用 Expo 或 Expo 弹出项目的人找到了更简单的解决方案：

import { Asset } from 'expo-asset';

const content = await Asset.loadAsync(require('../../assets/img.jpg'));
const localUri = content[0].localUri;

这将为您提供项目资产文件夹中图像的 localUri！您必须安装 Expo Asset 才能正常工作并像导入任何其他库一样导入它。

解决方案 2

对于希望从本地资产文件夹而不是 Web uri 获取文件的人，这里是我使用 Expo File System 库找到的解决方案：

const imgUri = `${FileSystem.cacheDirectory}/bg_img.jpg`;
await FileSystem.copyAsync({from: 'asset://assets/images/bg_img.jpg', to: imgUri });

我还在以下位置创建了一个资产图像文件夹：/android/app/src/main/assets/images 并在其中添加了我的 .jpg 文件。

如何在 React Native (Android) / Expo 项目中使用 FFmpeg 访问图像文件？

How to access an image file using FFmpeg in a React Native (Android) / Expo project?

android

ffmpeg

react-native