@dev-talha-anwar/ffmpeg-wasm-media-editor v1.0.18

A Simple Javascript library for web media editing using ffmpeg.wasm

Installation

$ npm i @dev-talha-anwar/ffmpeg-wasm-media-editor

Note: Following Steps Are Important

Headers

you must set following headers in order to use this package \ Cross-Origin-Opener-Policy = same-origin \ Cross-Origin-Embedder-Policy = require-corp

For ReactJs create a file named "setupProxy.js" in src folder with following content in it

module.exports = (app) => {
  app.use((_, res, next) => {
    res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
    res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
    next();
  });
};

For NextJs copy following code in your page to set server side headers or you can add this code in next.config.js file.

async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
        ],
      },
    ]
  }

FFMPEG core files

you must host ffmpeg core files to you domain and pass the path of ffmpeg-core.js in constructor (core files are provided in the core directory of the library) \ you must upload all your assets files (fonts,stickers) on the same domain and provide path in constructor

Usage

ffmpeg-wasm-media-editor provides simple to use APIs, to edit a media you only need few lines of code:

import FFMPEGWasmMediaEditor from "@dev-talha-anwar/ffmpeg-wasm-media-editor";

(async () => {
    let editor = await new FFMPEGWasmMediaEditor(
      'http://localhost:3000/core/ffmpeg-core.js', 
      p => console.log(p),
      true,[
        'http://localhost:3000/fonts/font.ttf', 
      ],[
        'http://localhost:3000/stickers/sticker.png', 
      ],
    ).init('/samplevideo.mp4', '/samplevideo.mp4');
    
    editor
    .addTrim('00:00:00', '00:00:05')
    .addCrop('245','245','100','25')
    .addText('0','0',"Stack Overflow","24","white","0","FF0000","5")
    .addFilter("5")
    .addSticker("0","100","100","100","100")
    .addImage('/logo.png','/logo.png', "100","100","200","200")
    await editor.run();
    const data = await editor.getOutput();
    console.log(data);
})();