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