ffmpeg.wasm的使用教程

安装

首先肯定得先安装ffmpeg.wasm到项目中

yarn add @ffmpeg/ffmpeg @ffmpeg/core

在web使用时最好使用ffmpeg/@ffmpeg/dist/ffmpeg.min.js，因为这个包默认环境是node，打包出的是web，或者去看看怎么配置webpack等打包工具

启动

这个wasm需要使用SharedArrayBuffer api，服务器的response header必须有2个字段

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

如果再需要是本地测试，ffmpeg.wasm提供了以下服务器的脚本

const express = require('express');
const app = express();

app.use((_, res, next) => {
  res.header('Cross-Origin-Opener-Policy', 'same-origin');
  res.header('Cross-Origin-Embedder-Policy', 'require-corp');
  next();
});

app.use(express.static('./'));

const PORT = process.env.PORT || 8080;

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}...`);
});

api

首先创建一个ffmpeg实例

import FFmpeg from 'ffmpeg/@ffmpeg/dist/ffmpeg.min.js'
// 加载外部核心文件
const ffmpeg = FFmpeg.createFFmpeg({
   corePath: 'node_modules/@ffmpeg/core/dist/ffmpeg-core.js',
   log: true
});

; (async () => {
	// 等待ffmpeg加载完成
   	await ffmpeg.load()
})()

加载完后ffmpeg主要用3个方法，这里关联性比较强就放一起了

// 创建视频，传入的必须是uni8类型
ffmpeg.FS('writeFile', 'input_v.webm', await readAsUni8(file_v))
// 命令运行，和本地方式一样
await ffmpeg.run('-i','input_v.webm', '-c','copy','output_v_cp.mp4')
// 读取视频数据
let outputData = ffmpeg.FS('readFile', 'output_v_cp.mp4')
let src = URL.createObjectURL(
    new Blob([outputData.buffer], {
        type: "video/mp4"
    })
);
// 删除视频
ffmpeg.FS('unlink', 'output_v_cp.mp4')

目前ffmpeg.FS就只有上面3个命令，以上就是基本用法了

chrome extension使用

这个相对麻烦一点

1. 博主manifest为2.0，在里面加上"content_security_policy": "script-src 'self' 'unsafe-eval' ; object-src 'self';"这段，这样视频处理放在background就可以进行了
2. 然后不太需要安装@ffmpeg/ffmpeg，除非你需要import type。你需要去把ffmpeg.wasm仓库clone下来，修改src\browser\getCreateFFmpegCore.js里的toBlobURL方法，不要让他转blobUrl输出，打包出来就能用了

最后想说的

真的很慢！！！！！！！ffmpeg.exe -i input.webm -ss 3 -to 20 -async 1 cut.webm 这个在页面上跑半天，2k以上跑还会出问题跑不了，但这个就很快了还能支持2k以上ffmpeg.exe -i input.webm -ss 3 -t 17 -async 1 -strict -2 -c:v copy -c:a copy cut.webm。总之性能坑很多，很多本地很快的命令在web上不一定很快，还需要找不同命令优化