You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# 🎥 FFmpeg.js: A WebAssembly-powered FFmpeg Interface for Browsers
2
+
3
+
Welcome to FFmpeg.js, an innovative library that offers a WebAssembly-powered interface for utilizing FFmpeg in the browser. 🌐💡
4
+
5
+
## ❓ Why FFmpeg.js?
6
+
7
+
This project has been inspired by the awesome work of [ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm), but we noted a few drawbacks that might limit its applicability for broader use:
8
+
9
+
1. The project employs a GPL3 build of FFmpeg, limiting its use for commercial projects. 🚫💼
10
+
2. It's developed in JavaScript and hence offers limited typing, restricting the potential for more rigorous static type checks. ❗⌨️
11
+
3. The lack of an object-oriented approach for writing FFmpeg commands. 🔄📝
12
+
13
+
## ✔️ FFmpeg.js to the Rescue!
14
+
15
+
Addressing the issues above, FFmpeg.js:
16
+
17
+
- Provides an LGPL build of FFmpeg, making it commercially more viable, checkout https://ffmpeg.org/legal.html for more detail. 🟢💼
18
+
- Is written in TypeScript, introducing static type checking to enhance code reliability. 👌🔍
19
+
- Offers an object-oriented interface for writing FFmpeg commands, inspired by `fluent-ffmpeg`
20
+
, making it more programmer-friendly. 🎯🔄
21
+
22
+
However, it's important to note that as of now, FFmpeg.js runs only in Chrome, Firefox, and Edge browsers. It doesn't support Safari or Node. 🚧🔍
23
+
24
+
## ⚙️ Setup
25
+
26
+
Setting up FFmpeg.js is a breeze!
27
+
28
+
```bash
29
+
npm i @diffusion-studio/ffmpeg-js
30
+
```
31
+
32
+
This should install the library. Now because ffmpeg.js requires the use of the [SharedArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) you need to enable `Cross-Origin-Opener-Policy: same-origin` and `Cross-Origin-Embedder-Policy: require-corp` on the server side.
33
+
34
+
### ⚡️Vite
35
+
36
+
In a vite environment you can simply add these policies by putting the following into your `vite-config.js`:
37
+
38
+
```js
39
+
...
40
+
server: {
41
+
...
42
+
headers: {
43
+
'Cross-Origin-Embedder-Policy':'require-corp',
44
+
'Cross-Origin-Opener-Policy':'same-origin',
45
+
},
46
+
},
47
+
...
48
+
```
49
+
50
+
## 💻 Usage
51
+
52
+
Somewhere in your project you need to initiate a ffmpeg instance.
By default this will pull a [LGPLv2.1 compliant build](https://github.com/diffusion-studio/ffmpeg-wasm-lgpl-build) of FFmpeg from the [UNPKG delivery network](https://www.unpkg.com).<br> Consequently if you immidiately intent to run commands you need to wait until the binaries have been fetched successfully, like this:
61
+
62
+
```typescript
63
+
ffmpeg.whenReady(async () => {
64
+
awaitffmpeg.exec(['-help']);
65
+
});
66
+
```
67
+
68
+
This will output the ffmpeg help as fast as possible.
69
+
70
+
> HINT: Even though this library intends to provide a object oriented interface for ffmpeg, you can still run commands manually using the `exec` method.
71
+
72
+
When working with files you need to save them to the in-memory file system first:
73
+
74
+
```typescript
75
+
const source ='https://<path to file>/<filename>.mp4';
- Difficult to handle in unit tests, it's probably best if you mock the FFmpeg class and leave the testing to us (which is also good practice).
115
+
- The LGPLv2.1 build of FFmpeg without external libaries doesn't support any mainstream video delivery codecs such as h264/hevc/vp9. But it's very useful for audio processing, run the following commands for more information
116
+
117
+
```typescript
118
+
console.log(awaitffmpeg.codecs());
119
+
console.log(awaitffmpeg.formats());
120
+
```
121
+
122
+
**BUT WAIT THERE IS MORE!** FFmpeg js is compatible with the binaries of `@ffmpeg/core`, which supports all major codecs like those mentioned before. Here is how you can configure it:
123
+
124
+
```typescript
125
+
import {
126
+
FFmpeg,
127
+
FFmpegConfigurationGPLExtended,
128
+
} from'@diffusion-studio/ffmpeg-js';
129
+
130
+
// FFmpegConfigurationGPLExtended will add the type extensions
> More FFmpeg LGPLv2.1 builds with external libraries such as VP9 and LAME will be added soon!
137
+
138
+
We believe that FFmpeg.js will significantly streamline your interaction with FFmpeg in the browser, providing a more effective and efficient coding experience. Happy coding! 🚀🌟
0 commit comments