dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update website

Browse Source
This commit is contained in:
Jerome Wu 2023-07-24 23:57:29 +08:00
parent b277631f38
commit 8a9ffadf85
11 changed files with 88 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/browser/transcode.html
View File

@ -21,8 +21,8 @@
ffmpeg.on("log", ({ message }) => { ffmpeg.on("log", ({ message }) => {
console.log(message); console.log(message);
}) })
ffmpeg.on("progress", ({ progress, elapsed }) => { ffmpeg.on("progress", ({ progress, time }) => {
message.innerHTML = `${progress * 100} %, elapsed: ${elapsed / 1000000} s`; message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`;
}); });
await ffmpeg.load({ await ffmpeg.load({
coreURL: "/packages/core/dist/umd/ffmpeg-core.js", coreURL: "/packages/core/dist/umd/ffmpeg-core.js",

2
apps/website/README.md
View File

@ -5,7 +5,7 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
### Installation ### Installation
``` ```
$ lerna bootstrap $ npm install
``` ```
### Local Development ### Local Development

1
apps/website/docs/getting-started/configuration.md
View File

@ -1 +0,0 @@
# Configuration

39
apps/website/docs/getting-started/installation.md
View File

@ -1,44 +1,67 @@
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# Installation # 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 ## 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 ```bash
npm install @ffmpeg/ffmpeg npm install @ffmpeg/ffmpeg @ffmpeg/util
``` ```
Or </TabItem>
<TabItem value="yarn" label="yarn">
```bash ```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
<html> <html>
<head> <head>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.12.0/dist/umd/ffmpeg.js"></script> <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> <script>
const { FFmpeg } = FFmpegWASM; const { FFmpeg } = FFmpegWASM;
const { fetchFile } = FFmpegUtil;
</script> </script>
</head> </head>
</html> </html>
``` ```
Or use it as a module: </TabItem>
<TabItem value="module" label="module">
```html ```html
<html> <html>
<head> <head>
<script type="module"> <script type="module">
import { FFmpeg } from "https://unpkg.com/@ffmpeg/ffmpeg@0.12.0/dist/esm/ffmpeg.js"; 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> </script>
</head> </head>
</html> </html>
``` ```
</TabItem>
</Tabs>

1
apps/website/docs/getting-started/multi-thread.md
View File

@ -1 +0,0 @@
# Use Mutlithreading

32
apps/website/docs/getting-started/usage.md Normal file
View 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");
})();
```

13
apps/website/docs/intro.md
View File

@ -1 +1,14 @@
# Introduction # 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

3
apps/website/sidebars.js
View File

@ -24,8 +24,7 @@ const sidebars = {
label: "Getting Started", label: "Getting Started",
items: [ items: [
"getting-started/installation", "getting-started/installation",
"getting-started/configuration", "getting-started/usage",
"getting-started/multi-thread",
"getting-started/lib-versions", "getting-started/lib-versions",
], ],
}, },

2
packages/ffmpeg/package.json
View File

@ -42,7 +42,7 @@
"url": "https://github.com/ffmpegwasm/ffmpeg.wasm/issues" "url": "https://github.com/ffmpegwasm/ffmpeg.wasm/issues"
}, },
"engines": { "engines": {
"node": ">=16.6.0" "node": ">=18.17.0"
}, },
"homepage": "https://github.com/ffmpegwasm/ffmpeg.wasm#readme", "homepage": "https://github.com/ffmpegwasm/ffmpeg.wasm#readme",
"publishConfig": { "publishConfig": {

6
packages/ffmpeg/src/classes.ts
View File

@ -123,6 +123,7 @@ export class FFmpeg {
* The progress events are accurate only when the length of * The progress events are accurate only when the length of
* input and output video/audio file are the same. * input and output video/audio file are the same.
* *
* @category FFmpeg
*/ */
public on( public on(
event: "log" | "progress", event: "log" | "progress",
@ -135,6 +136,11 @@ export class FFmpeg {
} }
} }
/**
* Unlisten to log or prgress events from `ffmpeg.exec()`.
*
* @category FFmpeg
*/
public off( public off(
event: "log" | "progress", event: "log" | "progress",
callback: LogEventCallback | ProgressEventCallback callback: LogEventCallback | ProgressEventCallback

2
packages/util/package.json
View File

@ -35,7 +35,7 @@
"url": "https://github.com/ffmpegwasm/ffmpeg.wasm/issues" "url": "https://github.com/ffmpegwasm/ffmpeg.wasm/issues"
}, },
"engines": { "engines": {
"node": ">=16.6.0" "node": ">=18.17.0"
}, },
"homepage": "https://github.com/ffmpegwasm/ffmpeg.wasm#readme", "homepage": "https://github.com/ffmpegwasm/ffmpeg.wasm#readme",
"publishConfig": { "publishConfig": {