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,
    fps: 30,
  },
  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	Description
height	number
width	number
keepAspectRatio	boolean	Keep Aspect Ratio, default true
fps	number	Frames per second, default 30

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