3.8 KiB
import BrowserOnly from '@docusaurus/BrowserOnly'; import MuiThemeProvider from "@site/src/components/common/MuiThemeProvider"; import ThemedButton from "@site/src/components/common/ThemedButton"; import ThemedIconButton from "@site/src/components/common/ThemedIconButton"; import CreateNewFolderIcon from "@mui/icons-material/CreateNewFolder"; import RefreshIcon from "@mui/icons-material/Refresh"; import UploadFileIcon from "@mui/icons-material/UploadFile"; import UploadIcon from "@mui/icons-material/Upload";
Playground
Playground allows you to try ffmpeg.wasm without any installation and development!
:::tip Quick Start
- Wait for assets (~32 MB) downloading.
- Press Load Sample Files to download & add sample files.
- Press Run to convert an AVI file to MP4 file.
- Download output files.
:::
{() => { const Playground = require('@site/src/components/Playground').default; return }}How to Use 🚀
It is recommended to read Overview first to learn ffmpeg.wasm fundamentals.
Demo Video:
A typical flow to use ffmpeg.wasm is:
Download and load JavaScript & WebAssembly assets
The assets are downloaded automatically when you enter the Playground. You can choose to use multithreading version instead by click on the switch:
{() => { const CoreSwitcher = require('@site/src/components/Playground/CoreSwitcher').default; return ; }}Load files to in-memory File System
When ffmpeg.wasm is loaded and ready, you can upload files to its in-memory File System to make sure these files can be consumed by the ffmpeg.wasm APIs:
- : Upload a media file.
- : Upload a text file.
- : Create a new folder.
- : Refresh File System.
Press Load Sample Files to load a set of samples files.
Run a command
With files are ready in the File System, you can update arguments in the Editor and hit Run afterward:
Download output files
Lastly you can download your files using File System panel and check the result. 🎉