【Vue3】前端使用 FFmpeg.wasm 完成用户视频录制，并对视频进行压缩处理

强烈推荐这篇博客！非常全面的一篇文章，本文是对该博客的简要概括和补充，在不同技术栈中提供一种可行思路，可先阅读该篇文章再阅读本篇：

FFmpeg——在Vue项目中使用FFmpeg（安装、配置、使用、SharedArrayBuffer、跨域隔离、避坑…）_vue ffmpeg-CSDN博客文章浏览阅读1.1w次，点赞71次，收藏96次。本文介绍了FFmpeg在Vue项目中从0到1的使用，从安装 => 配置 => 简单使用 => 认识SharedArrayBuffer和跨域隔离 => 避坑…_vue ffmpeg[这里是图片001]https://zahuopu.blog.csdn.net/article/details/135032429?fromshare=blogdetail&sharetype=blogdetail&sharerId=135032429&sharerefer=PC&sharesource=Andye11&sharefrom=from_link

上述博客技术栈： Vue2 + Webpack + JS

本文技术栈：Vue3 + Vite + TS

本文运行环境： windows11 + Edge浏览器 +22.11 node版本

1、安装配置（等同上述博客）：

npm i @ffmpeg/[email protected]
npm i @ffmpeg/[email protected]

2、复制下载的核心js文件到 /public 静态文件夹中（基本等同上述博客）

3、配置Vite配置项（和webpack在代码位置上有细微区别 内容完全一致）

server: {
   ......
   headers: { // 目的是为了消除浏览器报错： SharedArrayBufferis not defined
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
   },
   ......
 },

特别注意！

1、配置该配置项之后， 本地运行时 请使用localhost 服务进行开发，因为 ffmpeg仅支持 本地 和 https 环境运行，不支持 http 环境；

2、如果需要打包到线上环境运行，还需要 后端同学对nginx 进行同样头部配置，仅有前端自己配置只能在自己本地服务中运行。

4、完成配置，代码相关内容如下：

预览效果图：

可以看到，压缩率还是很高的，时间性能上大概需要原视频长度的 50% （也就是 10分钟的视频大概需要接近5分钟去压缩（我的设备信息：笔记本电脑CPU - 英特尔 i5-12500H）

在此过程中 页面内存消耗巨大，基本无法与用户进行其他互动），同时牺牲了一定清晰度，但最终可以缩小90%左右的大小。

也就是说：如果你的目标是 使用时间和性能来换取极致的大小压缩，这个库是可用的。

代码原文：

<template>
  <div class="test-page" v-loading