CODEWITHSUNDEEP
imagevideoffmpegreact-native
Timo Schnoelzer
Timo Schnoelzer

Reputation: 105

Merge images to video in React-Native

Using react-native for our front end I have to merge an array of (local)images into a video. This should be processed client side. So using ffmpeg / or (npm) videos how is not possible. Is there any way create a video on iOS and Android by using React-Native?

All hints welcome!

Best, Timo

Upvotes: 3

Views: 7349

Answers (2)

BhuwaneshSisodia
BhuwaneshSisodia

Reputation: 1

    // 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 
     })
    }

OUTPUT enter image description here

Upvotes: 0

Vladimir
Vladimir

Reputation: 412

Try to use react-native-ffmpeg

I had the same task. I solved it by using this module: https://github.com/tanersener/react-native-ffmpeg.

After installation, you can use it like this: 

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

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

Upvotes: 1

Related Questions