Skip to content

Latest commit

 

History

History
239 lines (167 loc) · 7.29 KB

README.md

File metadata and controls

239 lines (167 loc) · 7.29 KB

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(...)

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