Processing

All components come with built-in ability to process videos using @modfy/core.

Learn more about how Auth is handled for the core package.

The components support all the processing types from @modfy/core, learn more about them here.

Types

There are five processing types:

1. disabled No processing happens here
2. other Let you control the processing and is dependant of the component itself
3. sync This uses our servers to process the video synchronously
4. async This uses our servers to process the video asynchronously
5. client This uses the clients browser to process video locally.

Sync Processing

There are two extra props you have to pass to the component when sync is enabled.

1. modfy This is the instance of the modfy class from @modfy/core
2. callback This will give you the returned video, once it is finished processing. (Uint8Array)

import Modfy from '@modfy/core'

import {Trim} from '@modfy/react-video-components'

const Component = () => {

const modfy = new Modfy({token: '', secretToken: ''})

return (

<Trim

src={"/video.mp4"}

type="sync"

callback={(trimmedVideo) => {}

modfy={modfy}

/>

)

}

Client Processing

This is the exact same above except to get this fully working you need Client Side Processing

import Modfy from '@modfy/core'

import {Trim} from '@modfy/react-video-components'

const Component = () => {

const modfy = new Modfy({token: '', secretToken: '', clientSide: true})

return (

<Trim

src={"/video.mp4"}

type="sync"

callback={(trimmedVideo) => {}

modfy={modfy}

/>

)

}

Async Processing

There are two extra props you have to pass to the component when async is enabled.

1. modfy This is the instance of the modfy class from @modfy/core
2. webhook This is the webhook url where you want to get the processed video.
3. callback This is an optional prop which returns {id: string, uuid: string}

import Modfy from '@modfy/core'

import {Trim} from '@modfy/react-video-components'

const Component = () => {

const modfy = new Modfy({token: '', secretToken: '', clientSide: true})

return (

<Trim

src={"/video.mp4"}

type="sync"

callback={(videoStatus) => {}

modfy={modfy}

webhook={"https://yourdomain.com/videoCallback"}

/>

)

}