Skip to content

Commit 5b29a8d

Browse files
committed
puplished v0.0.2
1 parent 1c05af8 commit 5b29a8d

File tree

11 files changed

+162
-44
lines changed

11 files changed

+162
-44
lines changed

README.md

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Welcome to FFmpeg.js, an innovative library that offers a WebAssembly-powered interface for utilizing FFmpeg in the browser. 🌐💡
44

5-
### [👥Join our Discord](https://discord.gg/EmUMFvMdhT)
5+
### [👥Join our Discord](https://discord.gg/n3mpzfejAb)
66

77
----
88

@@ -25,7 +25,7 @@ Addressing the issues above, FFmpeg.js:
2525

2626
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. 🚧🔍
2727

28-
## ⚙️ Setup
28+
## 🚀 Setup
2929

3030
Setting up FFmpeg.js is a breeze!
3131

@@ -117,14 +117,23 @@ Take a look at these tests for more examples:
117117

118118
- Webassembly is limited to 2GB
119119
- 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).
120-
- 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
120+
- There is no hardware accileration available, making video encoding/decoding rather slow.
121+
122+
## ⚙️ Configurations
123+
124+
Currently there are two different FFmpeg configurations available with more on the way.
125+
126+
- `lgpl-base` (default): It is a compilation of FFmpeg without any external libraries, which is useful for audio & video muxing/demuxing and audio encoding/decoding. It is v2.1LGPL compliant and can therefore be used for commercial projects.
127+
- `gpl-extended`: This is the [@ffmpeg/core](https://github.com/ffmpegwasm/ffmpeg.wasm-core) configuration, that has been built with `--enable-gpl` and `--enable-nonfree` and can therefore only be used for commercial projects if the entire codebase is publicly accessible. It supports popular delivery codecs such as `h264/h265/vp9` etc.
128+
129+
For more information about the supported codecs and muxers run the following commands:
121130

122131
```typescript
123132
console.log(await ffmpeg.codecs());
124133
console.log(await ffmpeg.formats());
125134
```
126135

127-
**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:
136+
This is how you can switch the configuration:
128137

129138
```typescript
130139
import {
@@ -134,10 +143,15 @@ import {
134143

135144
// FFmpegConfigurationGPLExtended will add the type extensions
136145
const ffmpeg = new FFmpeg<FFmpegConfigurationGPLExtended>({
137-
lib: 'gpl-extended',
146+
config: 'gpl-extended',
138147
});
139148
```
140149
Thats it!
141-
> More FFmpeg LGPLv2.1 builds with external libraries such as VP9 and LAME will be added soon!
142150

143151
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! 🚀🌟
152+
153+
### DISCLAIMER
154+
155+
*The information contained in this text is provided for informational purposes only. It is not intended as a comprehensive guide to the GPL and LGPL license usages nor does it offer legal advice. Laws and regulations surrounding software licenses can be complex and may change over time. The author and provider of this information cannot be held responsible for any errors, omissions, or any outcomes related to your use of this information.*
156+
157+
*While every effort has been made to ensure the information presented here is accurate as of the date of publication, no guarantee is given as to its currency or applicability to your specific situation. You should not rely upon this information as a substitute for consultation with a legal professional or other competent advisors. Always consult with a qualified professional familiar with your particular circumstances before making decisions that could have legal implications.*

examples/package-lock.json

Lines changed: 7 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

examples/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313
"vite": "^4.3.9"
1414
},
1515
"dependencies": {
16-
"@diffusion-studio/ffmpeg-js": "file:.."
16+
"@diffusion-studio/ffmpeg-js": "^0.0.2"
1717
}
1818
}

examples/src/main.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import typescriptLogo from './typescript.svg';
33
import viteLogo from '/vite.svg';
44
import { FFmpeg } from '@diffusion-studio/ffmpeg-js';
55

6-
const logger = () => null;
7-
const ffmpeg = new FFmpeg({ logger, lib: "lgpl-base" });
6+
const ffmpeg = new FFmpeg({ log: false });
87

98
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
109
<div>

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@diffusion-studio/ffmpeg-js",
33
"private": false,
4-
"version": "0.0.1",
4+
"version": "0.0.2",
55
"description": "FFmpeg.js - Use FFmpeg in the browser powered by WebAssembly",
66
"type": "module",
77
"files": [
@@ -54,7 +54,7 @@
5454
"homepage": "https://github.com/diffusion-studio/ffmpeg-js#readme",
5555
"scripts": {
5656
"dev": "vite",
57-
"build": "tsc && vite build",
57+
"build": "rm -r -f ./dist && tsc && vite build",
5858
"preview": "vite preview",
5959
"test": "npx playwright test --project=chromium",
6060
"prettier": "npx prettier --write ./src"

playwright.config.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export default defineConfig({
1414
command: 'npm run dev',
1515
url: 'http://localhost:5173/',
1616
},
17-
1817
testDir: './src/tests',
1918
/* Run tests in files in parallel */
2019
fullyParallel: false,
@@ -47,9 +46,9 @@ export default defineConfig({
4746
use: { ...devices['Desktop Firefox'] },
4847
},
4948

50-
{
51-
name: 'webkit',
52-
use: { ...devices['Desktop Safari'] },
53-
},
49+
// {
50+
// name: 'webkit',
51+
// use: { ...devices['Desktop Safari'] },
52+
// },
5453
],
5554
});
File renamed without changes.

src/ffmpeg.ts

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { IFFmpegConfiguration } from './interfaces';
22
import { FFmpegBase } from './ffmpeg-base';
33
import * as types from './types';
4-
import libs from './lib-config';
4+
import configs from './ffmpeg-config';
5+
import { noop } from './utils';
56

67
export class FFmpeg<
78
Config extends IFFmpegConfiguration<
@@ -14,11 +15,19 @@ export class FFmpeg<
1415
private _output?: types.OutputOptions<Config>;
1516
private _middleware: string[] = [];
1617

17-
public constructor(settings: types.FFmpegSettings = { lib: 'lgpl-base' }) {
18-
super({
19-
logger: settings.logger ?? console.log,
20-
source: settings.source ?? libs[settings.lib],
21-
});
18+
public constructor(settings: types.FFmpegSettings = {}) {
19+
let logger = console.log;
20+
let source = configs[settings?.config ?? "lgpl-base"];
21+
22+
if (settings?.log == false) {
23+
logger = noop;
24+
}
25+
26+
if (settings?.source) {
27+
source = settings.source;
28+
}
29+
30+
super({ logger, source });
2231
}
2332

2433
/**

src/tests/base.spec.ts

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { test, expect, Page } from '@playwright/test';
2+
3+
// Annotate entire file as serial.
4+
test.describe.configure({ mode: 'serial' });
5+
6+
let page: Page;
7+
8+
test.describe('FFmpegBase functionalities', async () => {
9+
/**
10+
* Get index page and wait until ffmpeg is ready
11+
*/
12+
test.beforeAll(async ({ browser }) => {
13+
page = await browser.newPage();
14+
await page.goto('http://localhost:5173/');
15+
16+
const ready = await page.evaluate(async () => {
17+
if (!ffmpeg.isReady) {
18+
await new Promise<void>((resolve) => {
19+
ffmpeg.whenReady(resolve);
20+
});
21+
}
22+
23+
return ffmpeg.isReady;
24+
});
25+
expect(ready).toBe(true);
26+
});
27+
28+
test('test intercepting logs', async () => {
29+
const messages = await page.evaluate(async () => {
30+
const _messages: string[] = [];
31+
ffmpeg.onMessage(((msg) => {
32+
_messages.push(msg);
33+
}));
34+
await ffmpeg.exec(["-help"]);
35+
return _messages;
36+
});
37+
expect(messages.length).toBeGreaterThan(0);
38+
expect(messages.at(0)).toBeTruthy();
39+
expect(messages.at(0)?.length).toBeGreaterThan(0);
40+
});
41+
42+
test('test removing onMessage callback', async () => {
43+
const messages = await page.evaluate(async () => {
44+
const _messages0: string[] = [];
45+
const _messages1: string[] = [];
46+
47+
const cb0 = (msg: string) => _messages0.push(msg)
48+
const cb1 = (msg: string) => _messages1.push(msg)
49+
50+
ffmpeg.onMessage(cb0);
51+
ffmpeg.onMessage(cb1);
52+
53+
await ffmpeg.exec(["-help"]);
54+
55+
ffmpeg.removeOnMessage(cb1);
56+
57+
return [_messages0, _messages1];
58+
});
59+
60+
expect(messages[0].length).toBeGreaterThan(0);
61+
expect(messages[1].length).toBeGreaterThan(0);
62+
// callback function 1 should have recieved
63+
// half as many messages than callback funtion 0
64+
expect(messages[1].length).toBeGreaterThan(messages[0].length / 2);
65+
});
66+
67+
68+
test('test clearing memory works', async () => {
69+
const result = await page.evaluate(async () => {
70+
const inputName = 'input.ogg';
71+
const outputName = 'output.wav';
72+
await ffmpeg.writeFile(inputName, 'http://localhost:5173/samples/audio.ogg');
73+
await ffmpeg.exec(['-i', inputName, outputName]);
74+
const render = ffmpeg.readFile(outputName).length;
75+
76+
ffmpeg.clearMemory();
77+
// try to read memory again should fail
78+
let input = null;
79+
let output = null;
80+
81+
// input and output should stay null
82+
try {
83+
input = ffmpeg.readFile(inputName);
84+
} catch (e) { }
85+
try {
86+
output = ffmpeg.readFile(outputName);
87+
} catch (e) { }
88+
89+
return { render, input, output }
90+
});
91+
92+
expect(result.render).toBeGreaterThan(0);
93+
expect(result.output).toBe(null);
94+
expect(result.input).toBe(null);
95+
});
96+
});

src/tests/export.spec.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,18 @@ test.describe('FFmpeg basic exporting', async () => {
123123
expect(length).toBeGreaterThan(0);
124124
});
125125

126+
test('test converting mp4 into gif', async () => {
127+
const length = await page.evaluate(async () => {
128+
const result = await ffmpeg
129+
.input({ source: 'http://localhost:5173/samples/video.mp4' })
130+
.ouput({ format: 'gif' })
131+
.export();
132+
133+
return result?.length;
134+
});
135+
expect(length).toBeGreaterThan(0);
136+
});
137+
126138
test('test adding wav audio track to mp4', async () => {
127139
const length = await page.evaluate(async () => {
128140
const result = await ffmpeg

0 commit comments

Comments
 (0)