A WebWorker implementation that eases the use of ffmpeg library in the browser.
npm install ffmpeg-webworker-madviseA WebWorker implementation that eases the use of ffmpeg library in the browser.
This fork contains fixed version of ffmep-all-codecs file (_madvise function issue). Terminate function added
This builds upon an existing work geniusly done by the folks at
Ffmpeg.js and
videoconverter.js
See it here (original version)
``bash`
npm install --save ffmpeg-webworker
or:
`bash`
yarn add ffmpeg-webworker
`js
import { FFMPEGWebworkerClient } from 'ffmpeg-webworker';
import React from 'react';
const workerClient = new FFMPEGWebworkerClient();
class FFMPEG extends React.Component {
constructor(props) {
super(props);
this.state = {
stdOutputText: '',
ffmpegReady: false,
};
this.updateStdOutputText = this.updateStdOutputText.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.handleListCodecs = this.handleListCodecs.bind(this);
}
componentWillMount() {
workerClient.on('onReady', () => this.setState({ ffmpegReady: true }));
workerClient.on('onStdout', (msg) => this.updateStdOutputText(msg));
workerClient.on('onFileReceived', (msg) => this.updateStdOutputText(msg));
workerClient.on('onDone', (data) => {
this.updateStdOutputText('Command Completed, check the console');
console.log(data);
});
}
updateStdOutputText(text) {
this.setState({
stdOutputText: ${this.state.stdOutputText} \n\n ${text},
});
}
handleInputChange(e) {
this.setState({ stdOutputText: '' });
const file = e.currentTarget.files[0];
// Set the file for processing
workerClient.inputFile = file;
// Run a valid ffmpeg command
workerClient.runCommand('-ss 00:00:05 -c copy -t 12 sliced-output.mp4');
}
Input({ onChange }) {
return (
type="file"
accept="audio/,video/"
onChange={(e) => onChange(e)}
/>
);
}
StdOutput({ text, ffmpegReady }) {
return (
{ffmpegReady ? 'FFMPEG is ready' : 'Loading FFMPEG'}
{text}
handleListCodecs(e) {
e.preventDefault();
this.setState({ stdOutputText: '' });
// Run a valid ffmpeg command
workerClient.runCommand('-codecs');
}
render() {
return (
`
The default export from the library is a standard NodeJS event emitter client
would listen to and dispatch events based on interactions with an already loaded
ffmpeg webworker Javascript library inside of a webworker.
It supports the following properties:
Receives an event from the ffmpeg webworker. Below are the supported commands:
- _onReady_: The webworker has loaded ffmpeg successfully.
- _onStdout_: Listens to standard ffmpeg-js message outputs.
- _onStart_: Command has been received and started.
- _onDone_: Command has been completed. Receives the data from ffmpeg as the
first parameter.
- _onFileReceived_: Input file has been set on the client.
The file that ffmpeg-webworker would be working with on issue of command.
An instance of the web worker that has ffmpeg-js loaded in it.
Converts the passed file to a file buffer array.
Detects if the inputFile has been passed in correctly.
Converts already set input file in the library to Buffer Array for processing
Accepts a valid ffmpeg command to be run against the input file
Logs messages to standard console.
This is the default exported property of the module. It ease the interaction
with the already initialized and loaded ffmpeg webworker Javascript library.
Other exported modules are:
The official web worker implementation that makes easier the loading of
ffmpeg-js and running command in a worker.
Official listener for FFMPEGWebworker.
`js static
import { FFMPEGWebworkerClient } from 'ffmpeg-webworker';
const webworkerClient = new FFMPEGWebworkerClient();
// The above is same as
// import webworkerClient from "ffmpeg-webworker";
webworkerClient.on('ready', () => {
console.log('FFMPEG has been loaded, and can receive commands');
});
``
This library has been made possible with the awesome work by folks at
Ffmpeg.js and ffmpeg-webworker