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

强烈保举这篇博客！非常全面的一篇文章，本文是对该博客的简要概括和补充，在不同技术栈中提供一种可行思绪，可先阅读该篇文章再阅读本篇：
FFmpeg——在Vue项目中使用FFmpeg（安装、配置、使用、SharedArrayBuffer、跨域隔离、避坑...）_vue ffmpeg-CSDN博客文章浏览阅读1.1w次，点赞71次，收藏96次。本文先容了FFmpeg在Vue项目中从0到1的使用，从安装 => 配置 => 简单使用 => 认识SharedArrayBuffer和跨域隔离 => 避坑..._vue ffmpeg

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、安装配置（等同上述博客）：

1. npm i @ffmpeg/ffmpeg@0.9.8
2. npm i @ffmpeg/core@0.10.0

复制代码

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

3、配置Vite配置项（和webpack在代码位置上有渺小区别  内容完全划一）

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

复制代码

  特别注意！
  1、配置该配置项之后， 当地运行时 请使用 localhost 服务举行开发，因为 ffmpeg仅支持 当地 和 https 环境运行，不支持 http 环境；
  2、如果须要打包到线上环境运行，还须要 后端同学对nginx 举行同样头部配置，仅有前端本身配置只能在本身当地服务中运行。
  4、完成配置，代码相关内容如下：

预览结果图：

    

可以看到，压缩率还是很高的，时间性能上大概须要原视频长度的 50% （也就是 10分钟的视频大概须要靠近5分钟去压缩（我的设备信息：笔记本电脑 CPU - 英特尔 i5-12500H）
在此过程中 页面内存消耗巨大，根本无法与用户举行其他互动），同时捐躯了一定清晰度，但最终可以缩小90%左右的大小。
也就是说：如果你的目标是 使用时间和性能来调换极致的大小压缩，这个库是可用的。
代码原文：

1. <template>
2.   <div class="test-page" v-loading="isLoading_fullScreen">
3.     <div class="flx-center" style="flex-direction: column">
4.       <video
5.         ref="videoElement"
6.         webkit-playsinline
7.         playsinline
8.         muted
9.         autoplay
10.         style="object-fit: cover"
11.         width="200px"
12.         height="150px"
13.       ></video>
14.       <div style="margin-top: 10px; column-gap: 30px" class="flx-center">
15.         <h1 style="display: inline-block">{{ page }}</h1>
16.         <el-button type="primary" @click="nextPage">翻页</el-button>
17.       </div>
18.     </div>
19.     <div class="card">
20.       <div style="margin-bottom: 10px; column-gap: 30px" class="flx-center">
21.         <el-button @click="getMedia" v-if="!isRecording" style="margin-right: 10px">开始录制</el-button>
22.         <el-text type="primary">{{ timer_min }}</el-text>
23.         <el-text v-if="isRecording">{{ old_timer_min }}</el-text>
24.       </div>
25.       <el-table :data="tableData" border style="width: 100%; min-height: 250px" max-height="260">
26.         <el-table-column prop="type" label="类型">
27.           <template #default="scope">
28.             {{ scope.row.type == 1 ? '原文件' : '压缩后' }}
29.           </template>
30.         </el-table-column>
31.         <el-table-column prop="size" label="大小" />
32.         <el-table-column prop="spendTime" label="用时" />
33.         <el-table-column prop="page" label="页码" />
34.       </el-table>
35.     </div>
36.   </div>
37. </template>
39. <script setup lang="ts" name="test">
40. import { ref, nextTick, computed } from 'vue'
41. import FFmpeg from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js'
43. const page = ref(1)
45. // ============================================= 时间相关 =============================================
46. const timer_sec = ref(0)
47. const timer_min = computed(() => {
48.   let mm = Math.floor(timer_sec.value / 60)
49.   let ss = Math.floor(timer_sec.value % 60)
50.   return (mm < 10 ? '0' + mm : mm) + ':' + (ss < 10 ? '0' + ss : ss)
51. })
52. const old_timer_min = ref('00:00')
54. // ============================================= 表格相关 =============================================
55. type TableDataItem = {
56.   type: number // 1代表原文件  2代表压缩文件
57.   size: string | number
58.   page: number
59.   time: number
60.   spendTime: string
61. }
62. const tableData = ref<TableDataItem[]>([])
64. const addTableData = (type: number, blobSize: number) => {
65.   if (type == 1) {
66.     let spendTime = ''
67.     let lastItem = tableData.value.findLast(item => item.type == 1)
68.     if (lastItem) {
69.       spendTime = secondToMinute((Date.now() - lastItem.time) / 1000)
70.     } else {
71.       spendTime = secondToMinute(timer_sec.value)
72.     }
73.     tableData.value.push({
74.       type: 1,
75.       size: (blobSize / 1024 / 1024).toFixed(2),
76.       time: Date.now(),
77.       spendTime: spendTime,
78.       page: page.value
79.     })
80.   } else {
81.     let spendTime2 = secondToMinute((Date.now() - tableData.value[tableData.value.length - 1].time) / 1000)
82.     tableData.value.push({
83.       type: 2,
84.       page: page.value,
85.       time: Date.now(),
86.       spendTime: spendTime2,
87.       size: (blobSize / 1024 / 1024).toFixed(2)
88.     })
89.   }
90. }
92. //  ===================================== 视频录制相关 =====================================
93. const videoElement = ref<HTMLVideoElement | null>(null) // 用于播放的 VideoElement 对象
94. let mediaRecorder: MediaRecorder | null = null // 用于录制的 MediaRecorder 对象
95. const isRecording = ref(false) // 是否正在录制
96. const recordBlob = ref<Blob[]>([]) // 记录视频Blob数据
97. const isLoading_fullScreen = ref(false)
98. const timeSlice = 10 * 1000
100. // 获取摄像头和麦克风访问权限
101. async function getMedia() {
102.   isLoading_fullScreen.value = true
103.   await ffmpeg.load()
105.   // 配置视频录制分辨率为480p 帧率为24，但是在实际测试中发现各大浏览器基本都不支持此配置，设置与否不影响视频大小
106.   let mediaStreamConstraints: MediaStreamConstraints = {
107.     video: {
108.       width: { ideal: 640 },
109.       height: { ideal: 480 },
110.       frameRate: { ideal: 24, max: 24 }
111.     },
112.     audio: true
113.   }
115.   navigator.mediaDevices
116.     .getUserMedia(mediaStreamConstraints)
117.     .then(stream => {
118.       isRecording.value = true
120.       // 1、记录视频数据
121.       mediaRecorder = new MediaRecorder(stream)
123.       // 2、开始录制
124.       mediaRecorder.start(timeSlice)
126.       // 处理录制数据
127.       mediaRecorder.ondataavailable = (e: BlobEvent) => {
128.         if (e.data.size > 0) {
129.           recordBlob.value.push(e.data)
130.         } else {
131.           console.error('最近10秒内数据异常')
132.         }
133.       }
135.       mediaRecorder.onstop = async () => {
136.         if (recordBlob.value.length > 0) {
137.           let fullBlob = new Blob(recordBlob.value, { type: 'video/mp4' })
139.           // 处理原文件数据到表格中
140.           addTableData(1, fullBlob.size)
142.           let compressedBlob = await compressVideoBlob(fullBlob)
144.           // 处理压缩文件数据到表格中
145.           addTableData(2, compressedBlob.size)
147.           page.value += 1 // 页数+1
148.           recordBlob.value = [] // 清空数组
149.           mediaRecorder!.start(timeSlice) // 重新开始录制
150.         } else {
151.           console.error('录制异常，请重新录制本页，可尝试缩短录制时长')
152.           mediaRecorder!.start(timeSlice)
153.         }
154.       }
156.       mediaRecorder.onerror = (e: Event) => {
157.         console.error('触发了 error 事件' + mediaRecorder?.state)
158.       }
160.       // 3、实时显示摄像画面
161.       nextTick(() => {
162.         videoElement.value!.srcObject = stream
163.         videoElement.value!.play()
165.         setInterval(() => {
166.           timer_sec.value += 1
167.         }, 1000)
168.       })
170.       isLoading_fullScreen.value = false
171.     })
172.     .catch(err => {
173.       console.error('错误：', err)
174.       alert('无法访问摄像头或麦克风')
175.     })
176. }
178. const nextPage = async () => {
179.   if (mediaRecorder) {
180.     mediaRecorder.stop()
181.     old_timer_min.value = timer_min.value
182.   }
183. }
185. const { createFFmpeg, fetchFile } = FFmpeg
186. const ffmpeg = createFFmpeg({
187.   corePath: '/FFMPEG/ffmpeg-core.js', // 核心文件的路径
188.   log: true // 是否在控制台打印日志，true => 打印
189. })
191. // 压缩视频Blob数据
192. const compressVideoBlob = async (blob: Blob) => {
193.   const data = await blob.arrayBuffer()
194.   const inputName = 'input.mp4'
195.   ffmpeg.FS('writeFile', inputName, new Uint8Array(data))
196.   await ffmpeg.run('-i', inputName, '-vcodec', 'libx264', '-crf', '28', '-acodec', 'copy', 'output.mp4')
197.   const outputData = ffmpeg.FS('readFile', 'output.mp4')
198.   const compressedBlob = new Blob([outputData.buffer], { type: 'video/mp4' })
199.   return compressedBlob
200. }
202. // 处理时间 把秒数处理为分钟
203. const secondToMinute = (second: number, pad: string = '') => {
204.   second = Math.floor(second)
205.   return Math.floor(second / 60) + '分' + pad + (second % 60) + '秒'
206. }
207. </script>
209. <style lang="scss" scoped>
210. .test-page {
211.   padding: 20px;
212. }
213. .flx-center {
214.   display: flex;
215.   align-items: center;
216.   justify-content: center;
217. }
218. .card {
219.   box-sizing: border-box;
220.   padding: 20px;
221.   overflow-x: hidden;
222.   background-color: #ffffff;
223.   border: 1px solid #e4e7ed;
224.   border-radius: 6px;
225.   box-shadow: 0 0 12px rgb(0 0 0 / 5%);
226. }
229. </style>

复制代码

  注意：请自行删除 HTML中 element-plus UI库的相关内容，使用它们仅为了样式美观，不影响实际代码运行
  额外注意事项：

1、import 引入 FFmpeg时 须要指定完整路径：纵然用

1. import FFmpeg from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js'
2. // 虽然这样会损失代码提示，但起码能在Vite环境跑起来 这点和博主原文不同

复制代码

2、在 createFFmpeg 函数中， 须要额外注意路径一定要使用绝对路径

1. // 我把那3个文件复制到 /public/FFMPEG下面，但是这里不要带 /public ，主要是为了防止线上环境路径失效， 具体为什么可查询我的【Vite项目中静态资源路径处理】一文
2. const { createFFmpeg, fetchFile } = FFmpeg
4. const ffmpeg = createFFmpeg({
5.     corePath: '/FFMPEG/ffmpeg-core.js',
6. })

复制代码

3、最后，我在0.9.8版本的 ffmpeg.wasm 中发现：
微信内置浏览器以致移动设备大部分浏览器都不兼容 SharedArrayBuffer，我在win11的 edge和chrome浏览器中可以非常非常顺遂地运行代码，哪怕是打包到线上环境也是可以正常运行，
但手机端无论是 微信浏览器还是 夸克浏览器、safari浏览器 均会报 SharedArrayBuffer is not defined 错误，IOS手机还会报出 Range Error 错误。
   听说最新0.12版本已经可以修复这个问题了，如果有机会，我也会补充到这里来。
  
  Q：0.12版本ffmpeg.wasm可以在移动设备上正常使用了吗？
  A：非常歉仄，笔者在使用0.12版本的库时遇到了 ffmpeg.load 不实行也不报错的未知环境，至今仍未能成功运行。
但笔者发现canvas也可以间接完成视频压缩的功能，大概可以把原视频压缩到本来的25%~35%大小，链接放在这里：
【Vue3】使用canvas来实现H5页面摄像头录制的【视频压缩】功能-CSDN博客文章浏览阅读2次。用户边说话边举行摄像头录制，同时要把用户说的话转为字幕表现在评测结果中，但iPhone手机10秒钟根本就能录制一个约莫12MB大小的视频，如果考试时间达到30分钟，那么消耗的流量将非常可怕，而且极其容易出现网络问题，导致视频录制失败。，结果虽然不算非常好，但是没有引入任何第三方库，代码量非常少，所以也算有它的价值所在。之前实验使用 FFmege.wasm失败，一是性能比力差，须要大概原视频50%的时间来举行压缩，二是移动设备兼容性比力差，没办法成功跑起来。代码结果图：（大小为 PC端未被压缩视频大小）

https://blog.csdn.net/Andye11/article/details/144084235?fromshare=blogdetail&sharetype=blogdetail&sharerId=144084235&sharerefer=PC&sharesource=Andye11&sharefrom=from_link
  





免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。