Add drawtext example
This commit is contained in:
parent
1b2f5f14f5
commit
4fd3e70c73
@ -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
|
||||||
|
? (
|
||||||
|
<>
|
||||||
|
<video ref={videoRef} controls></video><br/>
|
||||||
|
<button onClick={transcode}>Transcode avi to mp4</button>
|
||||||
|
<p ref={messageRef}></p>
|
||||||
|
<p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
: (
|
||||||
|
<button onClick={load}>Load ffmpeg-core (~31 MB)</button>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
BIN
apps/website/static/asset/arial.ttf
Executable file
BIN
apps/website/static/asset/arial.ttf
Executable file
Binary file not shown.
Loading…
Reference in New Issue
Block a user