在 React-Native 中将图像合并到视频中答案

【问题标题】：Merge images to video in React-Native在 React-Native 中将图像合并到视频中
【发布时间】：2016-12-20 22:05:25
【问题描述】：

在我们的前端使用 react-native，我必须将一组（本地）图像合并到一个视频中。这应该在客户端进行处理。所以使用 ffmpeg / 或 (npm) 视频是不可能的。有什么方法可以使用 React-Native 在 iOS 和 Android 上创建视频？

欢迎所有提示！

最好，蒂莫

【问题讨论】：

你需要创建一个 react native 模块。并在本机代码（java，objective-c）中进行所有处理。 React Native 自己无法进行这样的处理。
那是我的后备方案。我希望能找到一个抽象层……谢谢你的回复！

标签： image video ffmpeg react-native

【解决方案1】：

尝试使用 react-native-ffmpeg

我有同样的任务。我通过使用这个模块解决了这个问题：https://github.com/tanersener/react-native-ffmpeg。

安装后可以这样使用：

import { RNFFmpeg } from 'react-native-ffmpeg';

RNFFmpeg.execute('-i imageFilePath -i audioFilePath -c:v mpeg4 output.mp4');

【讨论】：

【解决方案2】：

    // PUT THESE 4 LIBRARIES IN THE IMPORT SECTION
    const RNFS = require('react-native-fs');
    import { RNFFmpeg } from 'react-native-ffmpeg';
    import uuid from 'react-native-uuid';
    import moment from 'moment';

    // FUNCTION
    const mergeFrameWithVideo = async () => {
    const video = 'ENTER YOUR VIDEO URL => https:// OR Local File URL'
    const frame = 'ENTER IMAGE URL => https:// OR Local File URL'
    const name = 'ENTER-FILE-NAME'
    const date = moment().format('DD-MM-YY')
    const saveFilePath = '/storage/emulated/0/Pictures/MergedMedia/' // For Android
    const frameID = uuid.v4() // react-native-uuid OR use any type of random_numbers
    
    RNFFmpeg.execute(
    '-i ' +
    video +
    ' -i ' +
    frame +
    ' -filter_complex [1][0]scale2ref[img][vid];[vid][img]overlay -q:v 0 -codec:a copy ' +
    saveFilePath + name + '-' + date + '-' + frameID + '.mp4').then(async () => {
      await RNFS.scanFile(saveFilePath + name + '-' + date + '-' + frameID + '.mp4')
      // Put Alert function or any other function here & CHECK THE FOLDER 
     })
    }

输出

【讨论】：