ブラウザ上で動画生成や変換ができるWebAssembly版FFmpeg「ffmpeg.wasm」レビュー

2020年11月9日 8時0分

WebAssemblyはブラウザ上で機械語を実行可能し、JavaScriptを補完してパフォーマンスを高める技術です。そのWebAssemblyのバイナリ形式で動画処理ソフトウェア「FFmpeg」をコンパイルし、ブラウザ上での動画生成や変換を行えるソフトウェアが「ffmpeg.wasm」です。

FFMPEG.WASM

https://ffmpegwasm.github.io/

GitHub - ffmpegwasm/ffmpeg.wasm: FFmpeg for browser and node, powered by WebAssembly

https://github.com/ffmpegwasm/ffmpeg.wasm

「ffmpeg.wasm」の「wasm」はWebAssemblyの略称で、JavaScriptからFFmpegを利用可能にすることでブラウザやNode.js上で動画の生成や変換を行えるソフトウェアです。記事作成時点では、H.264やH.265、VP8/VP9などのコーデックに対応しています。

ffmpeg.wasmを利用する方法は2通りあり、1つ目はnpmでインストールする方法。

npm install @ffmpeg/ffmpeg

2つ目はコンテンツデリバリネットワーク上のスクリプトを読み込む方法です。

<script src='https://unpkg.com/@ffmpeg/ffmpeg@0.9.4/dist/ffmpeg.min.js'></script>
<script>
const { createFFmpeg } = FFmpeg;
/* ... */
</script>

公開されているサンプルコードをもとに、以下のようなHTMLファイルを用意。動画ファイルを読み込んで960x540の解像度のmp4形式に変換し、ブラウザ上で再生する処理を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.4/dist/ffmpeg.min.js"></script>
<title>ffmpeg.wasm</title>
</head>
<body>
<video id="player" controls></video>
<input type="file" id="uploader">
<script>
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const transcode = async ({ target: { files } }) => {
const { name } = files[0];
await ffmpeg.load();
ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
await ffmpeg.run('-i', name, '-s', '960x540', 'output.mp4');
const data = ffmpeg.FS('readFile', 'output.mp4');
const video = document.getElementById('player');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
}
document
.getElementById('uploader').addEventListener('change', transcode);
</script>
</body>
</html>