npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@shm-open/ffmpeg

v0.10.4

Published

FFmpeg WebAssembly version

Downloads

0

Readme

ffmpeg.wasm

Node Version Actions Status CodeQL npm (tag) Maintenance License: MIT Code Style Downloads Total Downloads Month

ffmpeg.wasm is a pure Webassembly / Javascript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.

AVI to MP4 Demo

Try it: https://ffmpegwasm.netlify.app

Installation

Node

$ npm install @ffmpeg/ffmpeg @ffmpeg/core

As we are using the latest experimental features, you need to add few flags to run in Node.js

$ node --experimental-wasm-threads --experimental-wasm-bulk-memory transcode.js

Browser

Or, using a script tag in the browser (only works in some browsers, see list below):

SharedArrayBuffer is only available to pages that are cross-origin isolated. So you need to host your own server with Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin headers to use ffmpeg.wasm.

<script src="static/js/ffmpeg.min.js"></script>
<script>
  const { createFFmpeg } = FFmpeg;
  ...
</script>

Only browsers with SharedArrayBuffer support can use ffmpeg.wasm, you can check HERE for the complete list.

Usage

ffmpeg.wasm provides simple to use APIs, to transcode a video you only need few lines of code:

const fs = require('fs');
const { createFFmpeg, fetchFile } = require('@ffmpeg/ffmpeg');

const ffmpeg = createFFmpeg({ log: true });

(async () => {
  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'test.avi', await fetchFile('./test.avi'));
  await ffmpeg.run('-i', 'test.avi', 'test.mp4');
  await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', 'test.mp4'));
  process.exit(0);
})();

Use other version of ffmpeg.wasm-core / @ffmpeg/core

For each version of ffmpeg.wasm, there is a default version of @ffmpeg/core (you can find it in devDependencies section of package.json), but sometimes you may need to use newer version of @ffmpeg/core to use the latest/experimental features.

Node

Just install the specific version you need:

$ npm install @ffmpeg/core@latest

Or use your own version with customized path

const ffmpeg = createFFmpeg({
  corePath: '../../../src/ffmpeg-core.js',
});

Browser

const ffmpeg = createFFmpeg({
  corePath: 'static/js/ffmpeg-core.js',
});

For the list available versions and their changelog, please check: https://github.com/ffmpegwasm/ffmpeg.wasm-core/releases

Multi-threading

Multi-threading need to be configured per external libraries, only following libraries supports it now:

x264

Run it multi-threading mode by default, no need to pass any arguments.

libvpx / webm

Need to pass -row-mt 1, but can only use one thread to help, can speed up around 30%

Documentation

FAQ

What is the license of ffmpeg.wasm?

There are two components inside ffmpeg.wasm:

  • @ffmpeg/ffmpeg (https://github.com/ffmpegwasm/ffmpeg.wasm)
  • @ffmpeg/core (https://github.com/ffmpegwasm/ffmpeg.wasm-core)

@ffmpeg/core contains WebAssembly code which is transpiled from original FFmpeg C code with minor modifications, but overall it still following the same licenses as FFmpeg and its external libraries (as each external libraries might have its own license).

@ffmpeg/ffmpeg contains kind of a wrapper to handle the complexity of loading core and calling low-level APIs. It is a small code base and under MIT license.

Can I use ffmpeg.wasm in Firefox?

Yes, but only for Firefox 79+ with proper header in both client and server, visit https://ffmpegwasm.netlify.app to try whether your Firefox works.

For more details: https://github.com/ffmpegwasm/ffmpeg.wasm/issues/106

What is the maximum size of input file?

2 GB, which is a hard limit in WebAssembly. Might become 4 GB in the future.

How can I build my own ffmpeg.wasm?

In fact, it is ffmpeg.wasm-core most people would like to build.

To build on your own, you can check build.sh inside https://github.com/ffmpegwasm/ffmpeg.wasm-core repository.

Also you can check this series of posts to learn more fundamental concepts:

  • https://jeromewu.github.io/build-ffmpeg-webassembly-version-part-1-preparation/
  • https://jeromewu.github.io/build-ffmpeg-webassembly-version-part-2-compile-with-emscripten/
  • https://jeromewu.github.io/build-ffmpeg-webassembly-version-part-3-v0.1/
  • https://jeromewu.github.io/build-ffmpeg-webassembly-version-part-4-v0.2/

Why it doesn't work in my local environment?

When calling ffmpeg.load(), by default it looks for http://localhost:3000/node_modules/@ffmpeg/core/dist/ to download essential files (ffmpeg-core.js, ffmpeg-core.wasm, ffmpeg-core.worker.js). It is necessary to make sure you have those files served there.

If you have those files serving in other location, you can rewrite the default behavior when calling createFFmpeg():

const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({
  corePath: "http://localhost:3000/public/ffmpeg-core.js",
  // Use public address if you don't want to host your own.
  // corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js'
  log: true,
});