ffmpeg前端视频压缩

公司业务需要在前端上传视频前对视频进行压缩，以缓解服务器的压力，经过网上各种资料的查询，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、其他问题

文件路径存在空格可能会报错
文件名为中文的可能会报错