diff --git a/apps/website/docs/getting-started/usage.md b/apps/website/docs/getting-started/usage.md index 65cc3f7..53358c7 100644 --- a/apps/website/docs/getting-started/usage.md +++ b/apps/website/docs/getting-started/usage.md @@ -295,3 +295,62 @@ function() { ); } ``` + +## Display Text on the video + +```jsx live +// import { FFmpeg } from '@ffmpeg/ffmpeg'; +// import { fetchFile } from '@ffmpeg/util'; +function() { + const [loaded, setLoaded] = useState(false); + const ffmpegRef = useRef(new FFmpeg()); + const videoRef = useRef(null); + const messageRef = useRef(null); + + const load = async () => { + const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.2/dist/umd' + const ffmpeg = ffmpegRef.current; + ffmpeg.on("log", ({ message }) => { + messageRef.current.innerHTML = message; + console.log(message); + }); + // toBlobURL is used to bypass CORS issue, urls with the same + // domain can be used directly. + await ffmpeg.load({ + coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"), + wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"), + }); + setLoaded(true); + } + + const transcode = async () => { + const ffmpeg = ffmpegRef.current; + await ffmpeg.writeFile("input.avi", await fetchFile('/video/video-15s.avi')); + await ffmpeg.writeFile("arial.ttf", await fetchFile('/asset/arial.ttf')); + await ffmpeg.exec([ + '-i', + 'input.avi', + '-vf', + 'drawtext=fontfile=/arial.ttf:text=\'ffmpeg.wasm\':x=10:y=10:fontsize=24:fontcolor=white', + 'output.mp4', + ]); + const data = await ffmpeg.readFile('output.mp4'); + videoRef.current.src = + URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'})); + } + + return (loaded + ? ( + <> +
+ +

+

Open Developer Tools (Ctrl+Shift+I) to View Logs

+ + ) + : ( + + ) + ); +} +``` diff --git a/apps/website/static/asset/arial.ttf b/apps/website/static/asset/arial.ttf new file mode 100755 index 0000000..ff0815c Binary files /dev/null and b/apps/website/static/asset/arial.ttf differ