capacitor-plugin-video-editor

Capacitor plugin to edit videos

Install (Capacitor 6.x)

npm install @whiteguru/capacitor-plugin-video-editor
npx cap sync

or for Capacitor 5.x

npm install @whiteguru/capacitor-plugin-video-editor@^5.0.6
npx cap sync

or for Capacitor 4.x

npm install @whiteguru/capacitor-plugin-video-editor@^4.0.4
npx cap sync

or for Capacitor 3.x

npm install @whiteguru/capacitor-plugin-video-editor@^3.0.1
npx cap sync

Android

This API requires the following permissions be added to your AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>

You can also specify those permissions only for the Android versions where they will be requested:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>

The storage permissions are for reading video files.

Read about Setting Permissions in the Android Guide for more information on setting Android permissions.

Example

import {
  VideoEditor,
  MediaFileResult,
} from '@whiteguru/capacitor-plugin-video-editor';

const sourceVideoPath =
  'file:///var/mobile/Containers/Data/...../sourceVideo.mp4';

// Transcode with progress
const progressListener = await VideoEditor.addListener(
  'transcodeProgress',
  info => console.log('info', info),
);

VideoEditor.edit({
  path: sourceVideoPath,
  transcode: {
    width: 720,
    height: 480,
    keepAspectRatio: true,
  },
  trim: {
    startsAt: 3 * 1000, // from 00:03
    endsAt: 10 * 1000, // to 00:10
  },
}).then(
  (mediaFileResult: MediaFileResult) => {
    progressListener.remove();

    console.log('mediaPath', mediaFileResult.file.path);
  },
  error => {
    console.error('error', error);
  },
);

// Thumbnail
VideoEditor.thumbnail({
  path: sourceVideoPath,
  width: 150,
  height: 150,
  at: 4 * 1000, // at 00:04
}).then(
  (thumbMediaFileResult: MediaFileResult) => {
    console.log('thumbPath', thumbMediaFileResult.file.path);
  },
  error => {
    console.error('error', error);
  },
);

API

• edit(...)
• thumbnail(...)
• addListener('transcodeProgress', ...)
• Interfaces

edit(...)

edit(options: EditOptions) => Promise<MediaFileResult>

| Param | Type | | ------------- | --------------------------------------------------- | | options | EditOptions |

Returns: Promise<MediaFileResult>

thumbnail(...)

thumbnail(options: ThumbnailOptions) => Promise<MediaFileResult>

| Param | Type | | ------------- | ------------------------------------------------------------- | | options | ThumbnailOptions |

Returns: Promise<MediaFileResult>

addListener('transcodeProgress', ...)

addListener(eventName: 'transcodeProgress', listenerFunc: (info: ProgressInfo) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

| Param | Type | | ------------------ | ------------------------------------------------------------------------ | | eventName | 'transcodeProgress' | | listenerFunc | (info: ProgressInfo) => void |

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Interfaces

MediaFileResult

| Prop | Type | | ---------- | ----------------------------------------------- | | file | MediaFile |

MediaFile

| Prop | Type | Description | | ---------- | ------------------- | ----------------------------------------------- | | name | string | The name of the file, without path information. | | path | string | The full path of the file, including the name. | | type | string | The file's mime type | | size | number | The size of the file, in bytes. |

EditOptions

| Prop | Type | | --------------- | ------------------------------------------------------------- | | path | string | | trim | TrimOptions | | transcode | TranscodeOptions |

TrimOptions

| Prop | Type | Description | | -------------- | ------------------- | ------------------------ | | startsAt | number | StartsAt in milliseconds | | endsAt | number | EndsAt in milliseconds |

TranscodeOptions

| Prop | Type | | --------------------- | -------------------- | | height | number | | width | number | | keepAspectRatio | boolean | | fps | number |

ThumbnailOptions

| Prop | Type | Description | | ------------ | ------------------- | -------------------------------------------------------------------- | | path | string | | | at | number | The time position where the frame will be retrieved in milliseconds. | | width | number | | | height | number | |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

ProgressInfo

| Prop | Type | | -------------- | ------------------- | | progress | number |