本文介绍了如何在前端项目中使用ffmpeg.wasm进行视频处理，包括获取ffmpeg.min.js文件，解决跨域隔离问题，以及实现视频剪切、合并和图片转视频等功能。需要注意的是，虽然ffmpeg.wasm提供了便利，但在用户机器性能较差的情况下可能造成较高CPU占用。
1.ffmpeg.wasm
ffmpeg & wasm 是什么
ffmpeg是功能非常强大的视频处理开源软件，很多视频播放器就是使用它来做为内核。
webassembly 是 Binary Code， 是编译目标。WebAssembly将很多编程语言带到了Web中。
wasm解决了性能问题，将各种耗性能的app从Desktop搬到Web上。
想用ffmpeg纯web端实现处理视频。就要用到wasm提高操作性能，就是ffmpeg.wasm做的事情。
2.前端实现
不使用node, 纯前端项目，实现在browser上处理视频。
上图是git的文档, 只需要在本地引入ffmpeg.min.js （文件很小22KB）就可以了。
2.1 获取ffmpeg.min.js文件。
install 后，会看到文件ffmpeg/dist/ffmpeg.min.js。
然后，直接将ffmpeg.min.js文件放到public下，打包后，直接在根目录。
2.2 index页面引入
这里引入后，使用时就很方便，直接获取 const { createFFmpeg, fetchFile } = FFmpeg;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> <script src="/ffmpeg.min.js"></script> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> 复制代码
注意： 纯前端不需要install @ffmpeg/ffmpeg @ffmpeg/core。上面install，就为了方便拿ffmpeg.min.js
按照上面2步，到这里都比较简单，按理可以直接使用了。但是会遇到比较麻烦的跨域隔离问题。当给网站设置好跨域隔离后，又会发现网站上其他资源获取不了。哎，所以在使用前，要先处理一下跨域隔离。
先会发现报错信息，SharedArrayBuffer is not defined。因为shareArrayBuffer 要求跨域隔离same-origin。
3.跨域隔离（本地&部署）
git上有一句提醒：SharedArray
最低0.47元/天 解锁文章
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
