react-native-video-merger

** NOTE: The current version only supports the iOS platform, Android platform is not currently supported. **

A package for React Native video merge scenario. You can use this package to achieve the following functions:

1. Merge multiple videos together (the input file support both H.264 and HEVC video), encode in H.264, MP4 file.
2. Resize one or mutiple video file, and supports setting the fill color of the blank area.

Installation

# use npm
npm install react-native-video-merger

# use yarn
yarn add react-native-video-merger

Install iOS dependencies

pod repo update --verbose
cd ios && pod install --repo-update

# If the dependencies cannot be found, please execute this command manually
rm ~/Library/Caches/CocoaPods/search_index.json
pod search SotVideoSDK

Usage

Visit demo project: https://github.com/Bijiabo/react-native-video-merger-example

import {
  mergeVideos,
  MergeVideoParams,
  cleanCacheDir,
} from 'react-native-video-merger';
import type { VideoMergeEvent } from 'react-native-video-merger';

// merge multiple videos
async function mergetVideoTest() {
  const paramsForMergeVideo: MergeVideoParams = {
    urls: ['/User.../a.mp4', '/User.../b.mp4'], // use react-native-fs get fill path
    outputSize: { width: 1080, height: 1080 }, // optional
    backgroundColor: 'rgba(229, 192, 123, 1.00)', // optional
  };
  try {
    const res: VideoMergeEvent = await mergeVideos(
      paramsForMergeVideo,
      onProgress
    );
    // TODO: update UI
  } catch (_error) {
    const error = _error as unknown as VideoMergeEvent;
    // TODO: update UI
  }
}

// clear cache dir
await cleanCacheDir();

Error Code

| Error Code | Error Description | | ---------- | :----------------------------------------------------------- | | 101 | Video is exporting now, please start a new export task later | | 102 | Video urls config is empty. |

Native Module API Design

Basic

All API export promise function to JavaScript, you can read document here:

• Android
• iOS

Module Name

The native module name is VideoMerger.

API for merget video

Basic permoise function

Native module export an API to JavaScript like this:

// JavaScript/TypeScript code
const res: VideoMergeEvent = await VideoMerger.mergeVideos(params);

The parameter type definition can refer to ./src/type.ts:

export interface MergeVideoParams {
  urls: Array<string>;
  outputSize?: {
    width: number;
    height: number;
  };
  backgroundColor?: string;
}

The outputSize and backgroundColor are optional properties.

The promise result type definition can refer to ./src/type.ts, It should be noted here that there are differences between the two platforms for the reject(...) function, may need add a filter logic in src/index.tsx.

export interface VideoMergeEvent {
  errorCode: number;
  errorDescription: string;
  outputFilePath: string;
  progress: number;
}

Notification progress to JavaScript/TypeScript

For native modue (it's easy than UI component), we can directly use event sender function to send to JavaScript layer, document is here: Native Modules / Android / Sending Events to JavaScript.

The event name is RNVideoSDK:dataFromNative, and the event data type is also VideoMergeEvent.

Consider some performance limitations of React Native UI (especially the old architecture), the iOS version native module limit sending progress every 200ms.

API for clear cachr dir

Every time the video merge interface is called, a video file is created in the local sandbox cache directory, we provide a convenience function here to clear all cached video files.

Just need to provide such an interface:

await VideoMerger.cleanCacheDir({});

Version History

v1.0.5-0

• Fix iOS platform black image between videos for special video case (wrong video package format).

License

MIT

Made with create-react-native-library