通过ffmpeg.wasm实现在网页视频转码

返回
Author Avatar
钢翼
2021-01-15
编程
115

使用场景

提供用户在线转视频格式的小工具。

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>