# 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

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

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

### Install iOS dependencies

```sh
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

```tsx
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](https://reactnative.dev/docs/native-modules-android#promises)
- [iOS](https://reactnative.dev/docs/native-modules-ios#promises)

### Module Name

The native module name is `VideoMerger`.

### API for merget video

### Basic permoise function

Native module export an API to JavaScript like this:

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

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

```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`.

```ts
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](https://reactnative.dev/docs/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:

```ts
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](https://github.com/callstack/react-native-builder-bob)