Skip to content

F
ffmpeg.wasm-core
Commit 933a7806 authored by Jerome Wu's avatar Jerome Wu
Browse files
Options

Add freetype2 example

parent 67036c79
Show whitespace changes
Inline Side-by-side
Showing with 49 additions and 1 deletion
wasm/examples/browser/freetype2.html 0 → 100644
View file @ 933a7806
<html>
<head>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<h3>Upload a video to transcode to mp4 (x264), draw a text and play!</h3>
<video id="output-video" controls></video><br/>
<input type="file" id="uploader">
<p id="message">Upload a video</p>
<script type="text/javascript" src="./js/utils.js"></script>
<script type="text/javascript" src="/tests/data/arial.ttf.js"></script>
<script type="text/javascript">
const message = document.getElementById('message');
const transcode = async ({ target: { files } }) => {
const IN_FILE_NAME = 'video.avi';
const OUT_FILE_NAME = 'video.mp4';
const args = ['-i', IN_FILE_NAME, '-vf', 'drawtext=fontfile=/arial.ttf:text=\'Artist\':fontcolor=white:fontsize=24:x=(w-text_w)/2:y=(h-text_h)/2', OUT_FILE_NAME];
message.innerHTML = 'Writing file to MEMFS';
const data = new Uint8Array(await readFromBlobOrFile(files[0]));
const now = Date.now();
console.time(`[${now}] ${files[0].name} execution time`);
message.innerHTML = 'Start to transcode';
const { file } = await runFFmpeg(IN_FILE_NAME, data, args, OUT_FILE_NAME, [{ name: 'arial.ttf', data: b64ToUint8Array(ARIAL_TTF) }])
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([file.buffer], { type: 'video/mp4' }));
console.timeEnd(`[${now}] ${files[0].name} execution time`);
};
document.getElementById('uploader').addEventListener('change', transcode);
</script>
<script type="text/javascript" src="../../dist/ffmpeg-core.js"></script>
</body>
</html>
wasm/examples/browser/js/utils.js
View file @ 933a7806
...@@ -30,7 +30,7 @@ const ffmpeg = (Core, args) => { ...@@ -30,7 +30,7 @@ const ffmpeg = (Core, args) => {
); );
}; };
const runFFmpeg = async (ifilename, data, args, ofilename) => { const runFFmpeg = async (ifilename, data, args, ofilename, extraFiles = []) => {
let resolve = null; let resolve = null;
let file = null; let file = null;
const Core = await createFFmpegCore({ const Core = await createFFmpegCore({
...@@ -44,6 +44,9 @@ const runFFmpeg = async (ifilename, data, args, ofilename) => { ...@@ -44,6 +44,9 @@ const runFFmpeg = async (ifilename, data, args, ofilename) => {
} }
}, },
}); });
extraFiles.forEach(({ name, data: d }) => {
Core.FS.writeFile(name, d);
});
Core.FS.writeFile(ifilename, data); Core.FS.writeFile(ifilename, data);
ffmpeg(Core, args); ffmpeg(Core, args);
await new Promise((_resolve) => { resolve = _resolve }); await new Promise((_resolve) => { resolve = _resolve });
...@@ -53,3 +56,5 @@ const runFFmpeg = async (ifilename, data, args, ofilename) => { ...@@ -53,3 +56,5 @@ const runFFmpeg = async (ifilename, data, args, ofilename) => {
} }
return { Core, file }; return { Core, file };
}; };
const b64ToUint8Array = (str) => (Uint8Array.from(atob(str), c => c.charCodeAt(0)));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment