Update usage

Author: jeromewu

apps/website/docs/getting-started/usage.md

@@ -3,30 +3,111 @@
 Learn the basics of using ffmpeg.wasm.
 
 :::note
-It is recommended to read [overview](/docs/overview) to fully understand the
-rationale.
+It is recommended to read [overview](/docs/overview) first.
 :::
 
-## Basic
+## Transcoding AVI video to MP4 video
 
-Converting an AVI video to a MP4 video:
+:::tip
+`Load ffmpeg-core` might take a few minutes to complete as it downloads
+a ~31 MB ffmpeg-core.wasm.
+:::
+
+```jsx live
+function() {
+    const [loaded, setLoaded] = useState(false);
+    const ffmpegRef = useRef(new FFmpeg());
+    const videoRef = useRef(null);
+    const messageRef = useRef(null);
+
+    const load = async () => {
+        const ffmpeg = ffmpegRef.current;
+        ffmpeg.on("log", ({ message }) => {
+            messageRef.current.innerHTML = message;
+        });
+        await ffmpeg.load();
+        setLoaded(true);
+    }
+
+    const transcode = async () => {
+        const ffmpeg = ffmpegRef.current;
+        await ffmpeg.writeFile(
+            "input.avi",
+            await fetchFile('/video/video-15s.avi')
+        );
+        await ffmpeg.exec(['-i', 'input.avi', 'output.mp4']);
+        const data = await ffmpeg.readFile('output.mp4');
+        videoRef.current.src =
+            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
+    }
+
+    return (loaded
+        ? (
+            <>
+                <video ref={videoRef} controls></video><br/>
+                <button onClick={transcode}>Transcode avi to mp4</button>
+                <p ref={messageRef}></p>
+            </>
+        )
+        : (
+            <button onClick={load}>Load ffmpeg-core</button>
+        )
+    );
+}
+```
+
+## Transcoding AVI video to MP4 video (multi-thread)
+
+:::tip
+`Load ffmpeg-core` might take a few minutes to complete as it downloads
+a ~31 MB ffmpeg-core.wasm.
+:::
+
+```jsx live
+function() {
+    const [loaded, setLoaded] = useState(false);
+    const ffmpegRef = useRef(new FFmpeg());
+    const videoRef = useRef(null);
+    const messageRef = useRef(null);
 
-```js
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import { fetchFile } from "@ffmpeg/util";
+    const load = async () => {
+        const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/umd'
+        const ffmpeg = ffmpegRef.current;
+        ffmpeg.on("log", ({ message }) => {
+            messageRef.current.innerHTML = message;
+        });
+        await ffmpeg.load({
+            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`),
+            wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`),
+            workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`),
+            thread: true,
+        });
+        setLoaded(true);
+    }
 
-const videoURL = "https://github.com/ffmpegwasm/testdata/raw/master/video-15s.avi";
+    const transcode = async () => {
+        const ffmpeg = ffmpegRef.current;
+        await ffmpeg.writeFile(
+            "input.avi",
+            await fetchFile('/video/video-15s.avi')
+        );
+        await ffmpeg.exec(['-i', 'input.avi', 'output.mp4']);
+        const data = await ffmpeg.readFile('output.mp4');
+        videoRef.current.src =
+            URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
+    }
 
-(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");
-})();
+    return (loaded
+        ? (
+            <>
+                <video ref={videoRef} controls></video><br/>
+                <button onClick={transcode}>Transcode avi to mp4</button>
+                <p ref={messageRef}></p>
+            </>
+        )
+        : (
+            <button onClick={load}>Load ffmpeg-core</button>
+        )
+    );
+}
 ```

apps/website/docusaurus.config.js

@@ -144,6 +144,7 @@ const config = {
       },
     ],
   ],
+  themes: ["@docusaurus/theme-live-codeblock"],
 };
 
 module.exports = config;

apps/website/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@docusaurus/core": "^2.4.1",
     "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/theme-live-codeblock": "^2.4.1",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@ffmpeg/ffmpeg": "^0.12.0-alpha.0",

apps/website/src/theme/ReactLiveScope/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile, toBlobURL } from "@ffmpeg/util";
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+  FFmpeg,
+  fetchFile,
+  toBlobURL,
+};
+export default ReactLiveScope;

apps/website/static/video/video-15s.avi

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3eb7acdfdc29b83a012483f1b38413a6a179ae34025611a022fc07e7418a1767
+size 1441726

apps/website/static/video/video-3s.avi

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a281bfa75571537d7e2c0179589fb3648066be1d5409510c4ddb68d3712f6f97
+size 289280