我想自己建立一个网站,做led开关电源上什么网站好,深圳分为哪几个区,怎样做境外网站上赚钱强烈推荐这篇博客#xff01;非常全面的一篇文章#xff0c;本文是对该博客的简要概括和补充#xff0c;在不同技术栈中提供一种可行思路#xff0c;可先阅读该篇文章再阅读本篇#xff1a;
FFmpeg——在Vue项目中使用FFmpeg#xff08;安装、配置、使用、SharedArrayBu…强烈推荐这篇博客非常全面的一篇文章本文是对该博客的简要概括和补充在不同技术栈中提供一种可行思路可先阅读该篇文章再阅读本篇
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?fromshareblogdetailsharetypeblogdetailsharerId135032429sharereferPCsharesourceAndye11sharefromfrom_link
上述博客技术栈 Vue2 Webpack JS
本文技术栈Vue3 Vite TS
本文运行环境 windows11 Edge浏览器 22.11 node版本
1、安装配置等同上述博客
npm i ffmpeg/ffmpeg0.9.8
npm i ffmpeg/core0.10.02、复制下载的核心js文件到 /public 静态文件夹中基本等同上述博客 3、配置Vite配置项和webpack在代码位置上有细微区别 内容完全一致
server: {......headers: { // 目的是为了消除浏览器报错 SharedArrayBufferis not definedCross-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%左右的大小。
也就是说如果你的目标是 使用时间和性能来换取极致的大小压缩这个库是可用的。
代码原文
templatediv classtest-page v-loadingisLoading_fullScreendiv classflx-center styleflex-direction: columnvideorefvideoElementwebkit-playsinlineplaysinlinemutedautoplaystyleobject-fit: coverwidth200pxheight150px/videodiv stylemargin-top: 10px; column-gap: 30px classflx-centerh1 styledisplay: inline-block{{ page }}/h1el-button typeprimary clicknextPage翻页/el-button/div/divdiv classcarddiv stylemargin-bottom: 10px; column-gap: 30px classflx-centerel-button clickgetMedia v-if!isRecording stylemargin-right: 10px开始录制/el-buttonel-text typeprimary{{ timer_min }}/el-textel-text v-ifisRecording{{ old_timer_min }}/el-text/divel-table :datatableData border stylewidth: 100%; min-height: 250px max-height260el-table-column proptype label类型template #defaultscope{{ scope.row.type 1 ? 原文件 : 压缩后 }}/template/el-table-columnel-table-column propsize label大小 /el-table-column propspendTime label用时 /el-table-column proppage label页码 //el-table/div/div
/templatescript setup langts nametest
import { ref, nextTick, computed } from vue
import FFmpeg from ffmpeg/ffmpeg/dist/ffmpeg.min.jsconst page ref(1)// 时间相关
const timer_sec ref(0)
const timer_min computed(() {let mm Math.floor(timer_sec.value / 60)let ss Math.floor(timer_sec.value % 60)return (mm 10 ? 0 mm : mm) : (ss 10 ? 0 ss : ss)
})
const old_timer_min ref(00:00)// 表格相关
type TableDataItem {type: number // 1代表原文件 2代表压缩文件size: string | numberpage: numbertime: numberspendTime: string
}
const tableData refTableDataItem[]([])const addTableData (type: number, blobSize: number) {if (type 1) {let spendTime let lastItem tableData.value.findLast(item item.type 1)if (lastItem) {spendTime secondToMinute((Date.now() - lastItem.time) / 1000)} else {spendTime secondToMinute(timer_sec.value)}tableData.value.push({type: 1,size: (blobSize / 1024 / 1024).toFixed(2),time: Date.now(),spendTime: spendTime,page: page.value})} else {let spendTime2 secondToMinute((Date.now() - tableData.value[tableData.value.length - 1].time) / 1000)tableData.value.push({type: 2,page: page.value,time: Date.now(),spendTime: spendTime2,size: (blobSize / 1024 / 1024).toFixed(2)})}
}// 视频录制相关
const videoElement refHTMLVideoElement | null(null) // 用于播放的 VideoElement 对象
let mediaRecorder: MediaRecorder | null null // 用于录制的 MediaRecorder 对象
const isRecording ref(false) // 是否正在录制
const recordBlob refBlob[]([]) // 记录视频Blob数据
const isLoading_fullScreen ref(false)
const timeSlice 10 * 1000// 获取摄像头和麦克风访问权限
async function getMedia() {isLoading_fullScreen.value trueawait ffmpeg.load()// 配置视频录制分辨率为480p 帧率为24但是在实际测试中发现各大浏览器基本都不支持此配置设置与否不影响视频大小let mediaStreamConstraints: MediaStreamConstraints {video: {width: { ideal: 640 },height: { ideal: 480 },frameRate: { ideal: 24, max: 24 }},audio: true}navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(stream {isRecording.value true// 1、记录视频数据mediaRecorder new MediaRecorder(stream)// 2、开始录制mediaRecorder.start(timeSlice)// 处理录制数据mediaRecorder.ondataavailable (e: BlobEvent) {if (e.data.size 0) {recordBlob.value.push(e.data)} else {console.error(最近10秒内数据异常)}}mediaRecorder.onstop async () {if (recordBlob.value.length 0) {let fullBlob new Blob(recordBlob.value, { type: video/mp4 })// 处理原文件数据到表格中addTableData(1, fullBlob.size)let compressedBlob await compressVideoBlob(fullBlob)// 处理压缩文件数据到表格中addTableData(2, compressedBlob.size)page.value 1 // 页数1recordBlob.value [] // 清空数组mediaRecorder!.start(timeSlice) // 重新开始录制} else {console.error(录制异常请重新录制本页可尝试缩短录制时长)mediaRecorder!.start(timeSlice)}}mediaRecorder.onerror (e: Event) {console.error(触发了 error 事件 mediaRecorder?.state)}// 3、实时显示摄像画面nextTick(() {videoElement.value!.srcObject streamvideoElement.value!.play()setInterval(() {timer_sec.value 1}, 1000)})isLoading_fullScreen.value false}).catch(err {console.error(错误, err)alert(无法访问摄像头或麦克风)})
}const nextPage async () {if (mediaRecorder) {mediaRecorder.stop()old_timer_min.value timer_min.value}
}const { createFFmpeg, fetchFile } FFmpeg
const ffmpeg createFFmpeg({corePath: /FFMPEG/ffmpeg-core.js, // 核心文件的路径log: true // 是否在控制台打印日志true 打印
})// 压缩视频Blob数据
const compressVideoBlob async (blob: Blob) {const data await blob.arrayBuffer()const inputName input.mp4ffmpeg.FS(writeFile, inputName, new Uint8Array(data))await ffmpeg.run(-i, inputName, -vcodec, libx264, -crf, 28, -acodec, copy, output.mp4)const outputData ffmpeg.FS(readFile, output.mp4)const compressedBlob new Blob([outputData.buffer], { type: video/mp4 })return compressedBlob
}// 处理时间 把秒数处理为分钟
const secondToMinute (second: number, pad: string ) {second Math.floor(second)return Math.floor(second / 60) 分 pad (second % 60) 秒
}
/scriptstyle langscss scoped
.test-page {padding: 20px;
}
.flx-center {display: flex;align-items: center;justify-content: center;
}
.card {box-sizing: border-box;padding: 20px;overflow-x: hidden;background-color: #ffffff;border: 1px solid #e4e7ed;border-radius: 6px;box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}/style注意请自行删除 HTML中element-plus UI库的相关内容使用它们仅为了样式美观不影响实际代码运行 额外注意事项
1、import 引入 FFmpeg时 需要指定完整路径即使用
import FFmpeg from ffmpeg/ffmpeg/dist/ffmpeg.min.js
// 虽然这样会损失代码提示但起码能在Vite环境跑起来 这点和博主原文不同2、在 createFFmpeg 函数中 需要额外注意路径一定要使用绝对路径
// 我把那3个文件复制到 /public/FFMPEG下面但是这里不要带 /public 主要是为了防止线上环境路径失效 具体为什么可查询我的【Vite项目中静态资源路径处理】一文
const { createFFmpeg, fetchFile } FFmpegconst ffmpeg createFFmpeg({corePath: /FFMPEG/ffmpeg-core.js,
})3、最后我在0.9.8版本的 ffmpeg.wasm 中发现
微信内置浏览器乃至移动设备大部分浏览器都不兼容 SharedArrayBuffer我在win11的 edge和chrome浏览器中可以非常非常顺利地运行代码哪怕是打包到线上环境也是可以正常运行
但手机端无论是 微信浏览器还是 夸克浏览器、safari浏览器 均会报 SharedArrayBuffer is not defined 错误IOS手机还会报出 Range Error 错误。 听说最新0.12版本已经可以修复这个问题了如果有机会我也会补充到这里来。 Q0.12版本ffmpeg.wasm可以在移动设备上正常使用了吗 A十分抱歉笔者在使用0.12版本的库时遇到了 ffmpeg.load 不执行也不报错的未知情况至今仍未能成功运行。 但笔者发现canvas也可以间接完成视频压缩的功能大概可以把原视频压缩到原本的25%~35%大小链接放在这里 【Vue3】使用canvas来实现H5页面摄像头录制的【视频压缩】功能-CSDN博客文章浏览阅读2次。用户边说话边进行摄像头录制同时要把用户说的话转为字幕显示在评测结果中但iPhone手机10秒钟基本就能录制一个大约12MB大小的视频如果考试时间达到30分钟那么消耗的流量将十分恐怖而且极其容易出现网络问题导致视频录制失败。效果虽然不算非常好但是没有引入任何第三方库代码量非常少所以也算有它的价值所在。之前尝试使用 FFmege.wasm失败一是性能比较差需要大概原视频50%的时间来进行压缩二是移动设备兼容性比较差没办法成功跑起来。代码效果图大小为 PC端未被压缩视频大小[这里是图片005]https://blog.csdn.net/Andye11/article/details/144084235?fromshareblogdetailsharetypeblogdetailsharerId144084235sharereferPCsharesourceAndye11sharefromfrom_link
