Update website
This commit is contained in:
Jerome Wu
parent
b277631f38
commit
8a9ffadf85
@ -21,8 +21,8 @@
|
||||
ffmpeg.on("log", ({ message }) => {
|
||||
console.log(message);
|
||||
})
|
||||
ffmpeg.on("progress", ({ progress, elapsed }) => {
|
||||
message.innerHTML = `${progress * 100} %, elapsed: ${elapsed / 1000000} s`;
|
||||
ffmpeg.on("progress", ({ progress, time }) => {
|
||||
message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`;
|
||||
});
|
||||
await ffmpeg.load({
|
||||
coreURL: "/packages/core/dist/umd/ffmpeg-core.js",
|
||||
|
||||
@ -5,7 +5,7 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
|
||||
### Installation
|
||||
|
||||
```
|
||||
$ lerna bootstrap
|
||||
$ npm install
|
||||
```
|
||||
|
||||
### Local Development
|
||||
|
||||
@ -1 +0,0 @@
|
||||
# Configuration
|
||||
@ -1,44 +1,67 @@
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
# Installation
|
||||
|
||||
ffmpeg.wasm supports multiple ways of installation:
|
||||
:::note
|
||||
ffmpeg.wasm only supports running in browser, see [FAQ](/docs/faq) for more
|
||||
details
|
||||
:::
|
||||
|
||||
## Packages Managers
|
||||
|
||||
To install ffmpeg.wasm using package managers like npm and yarn:
|
||||
Install ffmpeg.wasm using package managers like npm and yarn:
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="npm" label="npm" default>
|
||||
|
||||
```bash
|
||||
npm install @ffmpeg/ffmpeg
|
||||
npm install @ffmpeg/ffmpeg @ffmpeg/util
|
||||
```
|
||||
|
||||
Or
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="yarn">
|
||||
|
||||
```bash
|
||||
yarn add @ffmpeg/ffmpeg
|
||||
yarn add @ffmpeg/ffmpeg @ffmpeg/util
|
||||
```
|
||||
|
||||
## Vanilla HTML
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
To use ffmpeg.wasm directly in your web page:
|
||||
## CDN
|
||||
|
||||
Install ffmpeg.wasm with minimal setup via installing it via CDN.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="classic" label="classic" default>
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.12.0/dist/umd/ffmpeg.js"></script>
|
||||
<script src="https://unpkg.com/@ffmpeg/util@0.12.0/dist/umd/index.js"></script>
|
||||
<script>
|
||||
const { FFmpeg } = FFmpegWASM;
|
||||
const { fetchFile } = FFmpegUtil;
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
Or use it as a module:
|
||||
</TabItem>
|
||||
<TabItem value="module" label="module">
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<script type="module">
|
||||
import { FFmpeg } from "https://unpkg.com/@ffmpeg/ffmpeg@0.12.0/dist/esm/ffmpeg.js";
|
||||
import { fetchFile } from "https://unpkg.com/@ffmpeg/util@0.12.0/dist/esm/index.js";
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
# Use Mutlithreading
|
||||
32
apps/website/docs/getting-started/usage.md
Normal file
32
apps/website/docs/getting-started/usage.md
Normal file
@ -0,0 +1,32 @@
|
||||
# Usage
|
||||
|
||||
Learn the basics of using ffmpeg.wasm.
|
||||
|
||||
:::note
|
||||
It is recommended to read [introduction](/docs/intro) to fully understand the
|
||||
rationale.
|
||||
:::
|
||||
|
||||
## Basic
|
||||
|
||||
Converting an AVI video to a MP4 video:
|
||||
|
||||
```js
|
||||
import { FFmpeg } from "@ffmpeg/ffmpeg";
|
||||
import { fetchFile } from "@ffmpeg/util";
|
||||
|
||||
const videoURL = "https://github.com/ffmpegwasm/testdata/raw/master/video-15s.avi";
|
||||
|
||||
(async () => {
|
||||
const ffmpeg = new FFmpeg();
|
||||
// Create a web worker and the worker loads WebAssembly code.
|
||||
await ffmpeg.load();
|
||||
// Write a video file to FS.
|
||||
await ffmpeg.writeFile("input.avi", await fetchFile(videoURL));
|
||||
// Execute ffmpeg command.
|
||||
await ffmpeg.exec(["-i", "input.avi", "output.mp4"]);
|
||||
// Read the output video file from FS, the output file is a Uint8Array typed
|
||||
// array.
|
||||
const data = await ffmpeg.readFile("output.mp4");
|
||||
})();
|
||||
```
|
||||
@ -1 +1,14 @@
|
||||
# Introduction
|
||||
|
||||
ffmpeg.wasm is an experimental project to run [FFmpeg](https://www.ffmpeg.org/) right
|
||||
inside your browser without any back-end servers. It enables maximum security
|
||||
for end-users and equips your web application with rich multimedia processing
|
||||
capabilities.
|
||||
|
||||
We leverage
|
||||
[Emscripten](https://emscripten.org/) to compile FFmpeg source code and many
|
||||
libraries to WebAssembly and develop a minimal but essential library to free
|
||||
developers from common requirements like running ffmpeg inside web worker and
|
||||
more.
|
||||
|
||||
> Talk about how it works with a diagram
|
||||
|
||||
@ -24,8 +24,7 @@ const sidebars = {
|
||||
label: "Getting Started",
|
||||
items: [
|
||||
"getting-started/installation",
|
||||
"getting-started/configuration",
|
||||
"getting-started/multi-thread",
|
||||
"getting-started/usage",
|
||||
"getting-started/lib-versions",
|
||||
],
|
||||
},
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
"url": "https://github.com/ffmpegwasm/ffmpeg.wasm/issues"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.6.0"
|
||||
"node": ">=18.17.0"
|
||||
},
|
||||
"homepage": "https://github.com/ffmpegwasm/ffmpeg.wasm#readme",
|
||||
"publishConfig": {
|
||||
|
||||
@ -123,6 +123,7 @@ export class FFmpeg {
|
||||
* The progress events are accurate only when the length of
|
||||
* input and output video/audio file are the same.
|
||||
*
|
||||
* @category FFmpeg
|
||||
*/
|
||||
public on(
|
||||
event: "log" | "progress",
|
||||
@ -135,6 +136,11 @@ export class FFmpeg {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unlisten to log or prgress events from `ffmpeg.exec()`.
|
||||
*
|
||||
* @category FFmpeg
|
||||
*/
|
||||
public off(
|
||||
event: "log" | "progress",
|
||||
callback: LogEventCallback | ProgressEventCallback
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
"url": "https://github.com/ffmpegwasm/ffmpeg.wasm/issues"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.6.0"
|
||||
"node": ">=18.17.0"
|
||||
},
|
||||
"homepage": "https://github.com/ffmpegwasm/ffmpeg.wasm#readme",
|
||||
"publishConfig": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user