通过ffmpeg.wasm实现在网页视频转码
钢翼
编程
使用场景
提供用户在线转视频格式的小工具。
ffmpeg.wasm的仓库地址
https://github.com/ffmpegwasm/ffmpeg.wasm
优点
- 1.不占服务器资源
- 2.用户无需单独下载工具
缺点
- 1.只支持谷歌浏览器
- 2.最大文件只支持2G
前端代码
<!--api包装库,MIT协议-->
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script>
<script>
const ffmpeg = FFmpeg.createFFmpeg({
//包含WebAssembly的核心库,协议同FFmpeg
corePath: 'https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.js',
//开启控制台日志
log: true,
});
(async () => {
await ffmpeg.load();
//读取视频文件,最后一个参数类型为Uint8Array 即可,也就是你可以放一个上传组件(type="file"),将blob转Uint8Array 即可。
ffmpeg.FS('writeFile', 'test.wmv', await FFmpeg.fetchFile('/upload/Robotica_1080.wmv'));
//执行转码指令
await ffmpeg.run('-i', 'test.wmv', 'test.mp4');
//获取视频的blob后,你可以自行选择在页面播放或下载
var blob = new Blob([ffmpeg.FS('readFile', 'test.mp4')])
})();
</script>