Skip to content

Commit e7b83ba

Browse files
jeromewujeromewu
committed
Update website
1 parent 1665931 commit e7b83ba

File tree

11 files changed

+88
-17
lines changed

11 files changed

+88
-17
lines changed

‎apps/browser/transcode.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
2121
ffmpeg.on("log", ({ message }) => {
2222
console.log(message);
2323
})
24-
ffmpeg.on("progress", ({ progress, elapsed }) => {
25-
message.innerHTML = `${progress * 100} %, elapsed: ${elapsed / 1000000} s`;
24+
ffmpeg.on("progress", ({ progress, time }) => {
25+
message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`;
2626
});
2727
await ffmpeg.load({
2828
coreURL: "/packages/core/dist/umd/ffmpeg-core.js",

‎apps/website/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
55
### Installation
66

77
```
8-
$ lerna bootstrap
8+
$ npm install
99
```
1010

1111
### Local Development

‎apps/website/docs/getting-started/configuration.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/website/docs/getting-started/installation.md

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,67 @@
1+
import Tabs from '@theme/Tabs';
2+
import TabItem from '@theme/TabItem';
3+
14
# Installation
25

3-
ffmpeg.wasm supports multiple ways of installation:
6+
:::note
7+
ffmpeg.wasm only supports running in browser, see [FAQ](/docs/faq) for more
8+
details
9+
:::
410

511
## Packages Managers
612

7-
To install ffmpeg.wasm using package managers like npm and yarn:
13+
Install ffmpeg.wasm using package managers like npm and yarn:
14+
15+
<Tabs>
16+
<TabItem value="npm" label="npm" default>
817

918
```bash
10-
npm install @ffmpeg/ffmpeg
19+
npm install @ffmpeg/ffmpeg @ffmpeg/util
1120
```
1221

13-
Or
22+
</TabItem>
23+
<TabItem value="yarn" label="yarn">
1424

1525
```bash
16-
yarn add @ffmpeg/ffmpeg
26+
yarn add @ffmpeg/ffmpeg @ffmpeg/util
1727
```
1828

19-
## Vanilla HTML
29+
</TabItem>
30+
</Tabs>
31+
32+
## CDN
2033

21-
To use ffmpeg.wasm directly in your web page:
34+
Install ffmpeg.wasm with minimal setup via installing it via CDN.
35+
36+
<Tabs>
37+
<TabItem value="classic" label="classic" default>
2238

2339
```html
2440
<html>
2541
<head>
2642
<script src="https://unpkg.com/@ffmpeg/[email protected]/dist/umd/ffmpeg.js"></script>
43+
<script src="https://unpkg.com/@ffmpeg/[email protected]/dist/umd/index.js"></script>
2744
<script>
2845
const { FFmpeg } = FFmpegWASM;
46+
const { fetchFile } = FFmpegUtil;
2947
</script>
3048
</head>
3149
</html>
3250
```
3351

34-
Or use it as a module:
52+
</TabItem>
53+
<TabItem value="module" label="module">
3554

3655
```html
3756
<html>
3857
<head>
3958
<script type="module">
4059
import { FFmpeg } from "https://unpkg.com/@ffmpeg/[email protected]/dist/esm/ffmpeg.js";
60+
import { fetchFile } from "https://unpkg.com/@ffmpeg/[email protected]/dist/esm/index.js";
4161
</script>
4262
</head>
4363
</html>
4464
```
65+
66+
</TabItem>
67+
</Tabs>

‎apps/website/docs/getting-started/multi-thread.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/website/docs/getting-started/usage.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Usage
2+
3+
Learn the basics of using ffmpeg.wasm.
4+
5+
:::note
6+
It is recommended to read [introduction](/docs/intro) to fully understand the
7+
rationale.
8+
:::
9+
10+
## Basic
11+
12+
Converting an AVI video to a MP4 video:
13+
14+
```js
15+
import { FFmpeg } from "@ffmpeg/ffmpeg";
16+
import { fetchFile } from "@ffmpeg/util";
17+
18+
const videoURL = "https://github.com/ffmpegwasm/testdata/raw/master/video-15s.avi";
19+
20+
(async () => {
21+
const ffmpeg = new FFmpeg();
22+
// Create a web worker and the worker loads WebAssembly code.
23+
await ffmpeg.load();
24+
// Write a video file to FS.
25+
await ffmpeg.writeFile("input.avi", await fetchFile(videoURL));
26+
// Execute ffmpeg command.
27+
await ffmpeg.exec(["-i", "input.avi", "output.mp4"]);
28+
// Read the output video file from FS, the output file is a Uint8Array typed
29+
// array.
30+
const data = await ffmpeg.readFile("output.mp4");
31+
})();
32+
```

‎apps/website/docs/intro.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,14 @@
11
# Introduction
2+
3+
ffmpeg.wasm is an experimental project to run [FFmpeg](https://www.ffmpeg.org/) right
4+
inside your browser without any back-end servers. It enables maximum security
5+
for end-users and equips your web application with rich multimedia processing
6+
capabilities.
7+
8+
We leverage
9+
[Emscripten](https://emscripten.org/) to compile FFmpeg source code and many
10+
libraries to WebAssembly and develop a minimal but essential library to free
11+
developers from common requirements like running ffmpeg inside web worker and
12+
more.
13+
14+
> Talk about how it works with a diagram

‎apps/website/sidebars.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@ const sidebars = {
2424
label: "Getting Started",
2525
items: [
2626
"getting-started/installation",
27-
"getting-started/configuration",
28-
"getting-started/multi-thread",
27+
"getting-started/usage",
2928
"getting-started/lib-versions",
3029
],
3130
},

‎packages/ffmpeg/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"url": "https://github.com/ffmpegwasm/ffmpeg.wasm/issues"
4343
},
4444
"engines": {
45-
"node": ">=16.6.0"
45+
"node": ">=18.17.0"
4646
},
4747
"homepage": "https://github.com/ffmpegwasm/ffmpeg.wasm#readme",
4848
"publishConfig": {

‎packages/ffmpeg/src/classes.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ export class FFmpeg {
123123
* The progress events are accurate only when the length of
124124
* input and output video/audio file are the same.
125125
*
126+
* @category FFmpeg
126127
*/
127128
public on(
128129
event: "log" | "progress",
@@ -135,6 +136,11 @@ export class FFmpeg {
135136
}
136137
}
137138

139+
/**
140+
* Unlisten to log or prgress events from `ffmpeg.exec()`.
141+
*
142+
* @category FFmpeg
143+
*/
138144
public off(
139145
event: "log" | "progress",
140146
callback: LogEventCallback | ProgressEventCallback

0 commit comments

Comments
 (0)