公司业务需要在前端上传视频前对视频进行压缩，以缓解服务器的压力，经过网上各种资料的查询，ffmpeg可以实现，ffmpeg原本是客户端视频剪辑软件，有大神封装了一个js包，在此膜拜。
一、安装
npm install @ffmpeg/ffmpeg @ffmpeg/core
二、文件替换
createFFmpeg中的corePath的地址是cdn在线的，这里我们需要换成自己的本地资源，但是使用import一直报错
最终尝试可以把包里的ffmpeg-core.js、ffmpeg-core.wasm和ffmpeg-core.worker.js放在public中
image.png
三、调用
<!-- tempalte部分 -->
<el-upload
class="upload-demo"
ref="upload"
:on-change="fileChange"
:before-upload="fileBeforeUpload"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary"
>选取文件</el-button
>
</el-upload>
<!-- js部分 -->
//引入
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";
//初始化
initFfmpeg(file) {
const ffmpeg = createFFmpeg({
corePath: "ffmpeg-core.js",
log: true,
});
//设置进度条
ffmpeg.setProgress(({ ratio }) => {
console.log(ratio);
this.percentage = Math.floor(ratio * 100);
});
//开始压缩
const transcode = async (file) => {
const { name } = file;
this.message = "Loading ffmpeg-core.js";
await ffmpeg.load();
ffmpeg.FS("writeFile", name, await fetchFile(file));
this.message = "Start transcoding";
// '-b','2000000' 值越小 压缩率越大
await ffmpeg.run("-i", name, "-b", "700000", "output.mp4");
this.message = "压缩完成";
const data = ffmpeg.FS("readFile", "output.mp4");
this.fileBytes = data.byteLength;
//把压缩后的视频进行回显
this.vedioSrc = URL.createObjectURL(
new Blob([data.buffer], { type: "video/mp4" })
);
};
transcode(file);
},
四、常见问题
1、报错ReferenceError: SharedArrayBuffer is not defined
是因为谷歌浏览器的安全策略机制改变了
Chrome 60引入 SharedArrayBuffer。
Chrome 92限制 SharedArrayBuffer只能在 cross-origin isolated 页面使用。
Android Chrome 88 也进行了同样的限制。
从上述结论中，可以知道在60-91的版本的浏览器是可以正常打开的
那么92版本的呢
开发环境
在vue-cli开发环境中我们可以再vue.config.js中配置
devServer: {
headers: {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp",
},
}
部署
使用ip或者域名访问，依旧会报错SharedArrayBuffer is not defined，所以我们需要代理中配置请求头
add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;
2、ffmpeg.FS('readFile', 'output.mp4') error. Check if the path exists
文件路径存在问题，调试一下当前方法传入的文件是否存在
3、其他问题
文件路径存在空格可能会报错
文件名为中文的可能会报错
