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

Add examples

Browse Source
This commit is contained in:
Jerome Wu
2023-08-03 23:02:00 +08:00
parent 2aa84aa0fa
commit ba5dd17723
13 changed files with 107 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/website/docs/getting-started/examples.md Normal file
View File

@@ -0,0 +1,36 @@
import Grid from '@mui/material/Unstable_Grid2';
import MuiThemeProvider from "@site/src/components/common/MuiThemeProvider";
import ExampleCard from "@site/src/components/common/ExampleCard";
# Examples
You can find how to use ffmpeg.wasm with frameworks here. :smile:
<MuiThemeProvider>
<Grid container rowSpacing={1} columnSpacing={1}>
<Grid xs={12} sm={6} md={6} lg={6} xl={4}>
<ExampleCard
img="/img/vanilla.png"
title="Vanilla JavaScript"
desc="Plain JavaScript without any libraries"
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/vanilla-app"
/>
</Grid>
<Grid xs={12} sm={6} md={6} lg={6} xl={4}>
<ExampleCard
img="/img/react-vite.png"
title="React + Vite"
desc="React with Vite"
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/react-vite-app"
/>
</Grid>
<Grid xs={12} sm={6} md={6} lg={6} xl={4}>
<ExampleCard
img="/img/vue-vite.png"
title="Vue + Vite"
desc="Vue with Vite"
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/vue-vite-app"
/>
</Grid>
</Grid>
</MuiThemeProvider>

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

@@ -8,7 +8,7 @@ ffmpeg.wasm only supports running in browser, see [FAQ](/docs/faq) for more
details
:::
## Packages Managers
## Package Managers
Install ffmpeg.wasm using package managers like npm and yarn:
@@ -29,39 +29,7 @@ yarn add @ffmpeg/ffmpeg @ffmpeg/util
</TabItem>
</Tabs>
## 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.1/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>
```
</TabItem>
<TabItem value="module" label="module">
```html
<html>
<head>
<script type="module">
import { FFmpeg } from "https://unpkg.com/@ffmpeg/ffmpeg@0.12.1/dist/esm/ffmpeg.js";
import { fetchFile } from "https://unpkg.com/@ffmpeg/util@0.12.0/dist/esm/index.js";
</script>
</head>
</html>
```
</TabItem>
</Tabs>
:::info
As ffmpeg.wasm spawns a web worker, you cannot import ffmpeg.wasm from CDN like
unpkg. It is recommended to download it and self-hosted most of the time.
:::

2
apps/website/docs/getting-started/usage.md
View File

@@ -3,7 +3,7 @@
Learn the basics of using ffmpeg.wasm.
:::note
It is recommended to read [overview](/docs/overview) first.
It is recommended to read [Overview](/docs/overview) first.
:::
## Transcoding video

21
apps/website/docs/overview.md
View File

@@ -46,6 +46,27 @@ also read result from `ffmpeg-core` File System once it is done.
If you are using a multi-thread version of `ffmpeg-core`, more web workers will
be spawned by `ffmpeg-core` inside `ffmpeg.worker`
:::info
The concept of `core` in ffmpeg.wasm is like the engine of a car, it is not only
the most important part of ffmpeg.wasm but also a swappable component. Currently
we maintain single-thread (`@ffmpeg/core`) and multi-thread version
(`@ffmpeg/core-mt`) cores, you can build your own core (ex. a core with x264
lib only to minimize ffmpeg-core.wasm file size) using build scripts in the repository.
:::
## Packages
All ffmpeg.wasm packages are under [@ffmpeg](https://www.npmjs.com/search?q=%40ffmpeg)
name space:
| Name | Usage |
| ---- | ----- |
| @ffmpeg/ffmpeg | ffmpeg.wasm main package |
| @ffmpeg/util | common utility functions |
| @ffmpeg/types | TypeScript types |
| @ffmpeg/core | single-thread ffmpeg.wasm core |
| @ffmpeg/core-mt | multi-thread ffmpeg.wasm core |
## Libraries
ffmpeg.wasm is built with toolchains / libraries: