ffmpeg.wasm 浏览器中的 ffmpeg
发布于 2022-07-06, 更新于 2023-04-08
把 ffmpeg 跑在浏览器里。
https://github.com/ffmpegwasm/ffmpeg.wasm
需要设置请求头：
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
安装
npm install @ffmpeg/ffmpeg @ffmpeg/core
将文件转码为 mp4 播放 (ffmpeg.min.js 在 @ffmpeg/ffmpeg 包中)：
<body>
<video id="player" controls></video>
<input type="file" id="uploader">
<script src="ffmpeg.min.js"></script>
<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, '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>
本文收录于专栏
收集一些好用的前端开源库，主要是 npm 包