Vue前端ffmpeg压缩视频再上传(全网唯一公开真正实现)

1.Vue项目中安装插件ffmpeg

1.1 插件版本依赖配置

两个插件的版本  "@ffmpeg/core": "^0.10.0",  "@ffmpeg/ffmpeg": "^0.10.1"
package.jsonpackage-lock.json 都加入如下ffmpeg的版本配置:

1.2 把ffmpeg安装到项目依赖目录里

terminal运行命令:

install -i
或直接运行命令安装ffmpeg:
npm install @ffmpeg/ffmpeg @ffmpeg/core -S;
安装后package-lock.json会自动写入如下配置:
1.2.1 报错处理

如果出现安装问题:

①先在npm -i命令后加--legacy-peer-deps 或者   --force运行

npm i --force

②如果上步不行,尝试删除这个安装依赖目录node_modules和package-lock.json文件,重试npm -i

请参考:

npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolve 报错,版本冲突,最全解决步骤(#^.^#)_npm err! code eresolve npm err! eresolve could not-CSDN博客

1.2.2 镜像过期

 安装ffmpeg可能提示镜像证书过期

你使用的镜像地址可能还是这个过期的淘宝镜像:https://registry.npm.taobao.org/

按如下步骤重设镜像地址:

①查看镜像:npm config list

②清理镜像缓存:npm cache clean --force

③设置镜像:npm config set registry https://registry.npmmirror.com/(国内推荐淘宝新镜像)

也可:npm config set registry https://registry.npmjs.org/

 1.3 项目里安装ffmpeg

在项目里的ffmpeg插件目录下找到: 
复制到项目代码的public目录里

1.3.1 ffmpeg压缩参数配置

-b:指定视频比特率

 -crf:恒定速率因子,控制输出视频质量的参数。

这个参数的取值范围为0~51,其中0为无损模式。数值越大,画质越差,生成的文件却越小。

从主观上讲,18~28是一个合理的范围。18被认为是视觉无损的(从技术角度上看当然还是有损的),它的输出视频质量和输入视频相当。

-fs:压缩到指定大小,单位Byte

-s:分辨率

 控制压缩后视频质量的最重要的是后面三个参数:crf、fs、s

1.4 项目里引用并封装ffmpeg

在util目录下封装ffmpeg.js以便项目全局引用

封装的工具通过:

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'

 把ffmpeg插件引入到项目里使用。

完整ffmpeg.js代码:

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
let ffmpeg = {};ffmpeg.squeezVideo = async function(file, filename, filetype, width, height, msg) {console.log('file', file)console.log('filename', filename)console.log('filetype', filetype)console.log('width', width)console.log('height', height)// 分辨率const resolution = `${width}x${height}`// 实例化ffmpegconst ffmpeg = createFFmpeg({// ffmpeg路径corePath: 'ffmpeg-core.js',// 日志log: true,// 进度progress: ({ ratio }) => {msg = `完成率: ${(ratio * 100.0).toFixed(1)}%`}})var { name } = file// msg = '正在加载 ffmpeg-core.js'// 开始加载await ffmpeg.load()// msg = '开始压缩'// 把文件加到ffmpeg   写文件ffmpeg.FS('writeFile', name, await fetchFile(file))// await ffmpeg.run('-i', name, '-b', '2000000', '-fs', '4194304', '-preset medium', 'superfast', 'output.mp4')// 开始压缩视频await ffmpeg.run('-i', name, '-b', '2000000', '-crf', '18', '-fs', '31457280', '-s', resolution, 'output.mp4')// msg = '压缩完成'// 压缩所完成,   读文件  压缩后的文件名称为 output.mp4const data = ffmpeg.FS('readFile', 'output.mp4')// 转换bolb类型const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })return new Promise((resolve, reject) => {const file = new window.File([blob], filename, { type: filetype })resolve(file)})
}// 获取上传视频的url
ffmpeg.getObjectURL = function(file) {let url = nullwindow.URL = window.URL || window.webkitURLif (window.URL) {url = window.URL.createObjectURL(file)} else {url = URL.createObjectURL(file)}return url
}// 获取视频的宽高分辨率
ffmpeg.getVideoData = function() {return new Promise((resolve, reject) => {const videoElement = document.getElementById('video')videoElement.addEventListener('loadedmetadata', function () {resolve({width: this.videoWidth,height: this.videoHeight,duration: this.duration})})})
}export default ffmpeg

2.视频上传元素

<template><el-uploadref='operationVideoUpload':limit="1"list-type='text':class="{disabled:addModelParam.attachments.operationVideo.length>0}":action='actionUrl':on-success="(res,file)=>handleVideoSuccess(res,file,'operationVideo')":before-upload='beforeAvatarUploadVideo':on-remove="(file,fileList)=>handleRemove(file,fileList,'operationVideo')":auto-upload='true':on-exceed="handelFileExceed"accept='.mp4,.mov,.wmv,.flv,.mvi,.mkv'><el-button style="position: relative; margin: -5px"><i  class="el-icon-circle-plus-outline" style="color: #66b1ff;">上传附件</i></el-button><br/><br/><p>{{ msg }}</p></el-upload><video id="video" hidden controls object-fill="fill"></video></template>

3.上传压缩脚本

<script>
import ffmpeg from "@/utils/ffmpeg";export default {data() {return {msg: '',videoWidth: '',videoHeight: '',duration: '',actionUrl: ''}},created() {this.actionUrl = "你的后端上传文件接口地址URL";},methods: {handleVideoSuccess(res, file, code) {this.msg = "已完成视频压缩后上传!";file.url = res.data.url;file.fileId = res.data.fileId;this.addModelParam.attachments[code].push(file.fileId);},handleAvatarSuccess(res, file, code) {file.url = res.data.url;file.fileId = res.data.fileId;this.addModelParam.attachments[code].push(file.fileId);},handleRemove(file, fileList, code) {this.addModelParam.attachments[code].splice(this.addModelParam.attachments[code].indexOf(file.fileId),1)},beforeAvatarUploadVideo(file) {const isLarge = file.size / 1024 / 1024 > 30;if (isLarge) {this.msg = "请稍等,过大的视频正在压缩上传中...";//压缩视频return this.uploadCompressVideo(file);}},handelFileExceed(){this.$message('文件数量超出限制!');},// 上传视频文件压缩后再上传uploadCompressVideo(file) {if (file) {let filename = file.name;let filetype = file.type;const videoUrl = ffmpeg.getObjectURL(file)const video = document.getElementById('video')video.src = videoUrl;return ffmpeg.getVideoData().then((videoObj) => {const {width, height} = videoObj;return ffmpeg.squeezVideo(file, filename, filetype, width, height, this.msg);})}},
},}
</script>

 注意异步处理:异步压缩,再上传

可使用Promise

4.其他配置:

4.1 vue项目根目录下的vue.config.js里加配置

headers: {'Cross-Origin-Opener-Policy': 'same-origin','Cross-Origin-Embedder-Policy': 'require-corp'
}
module.exports = {publicPath: './',devServer: {client: {overlay: false,},port: 9002,headers: {'Cross-Origin-Opener-Policy': 'same-origin','Cross-Origin-Embedder-Policy': 'require-corp'}},transpileDependencies: []}

以免出现如下SharedArrayBuffer的报错:

5.其他实现方案

插件video-conversion.js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/26754.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java老人护理上门服务类型系统小程序APP源码

&#x1f338; 老人上门护理服务系统&#xff1a;温暖与专业并存 &#x1f338; 一、&#x1f3e0; 走进老人上门护理服务系统 随着社会的快速发展&#xff0c;我们越来越关注老年人的生活质量。老人上门护理服务系统应运而生&#xff0c;它结合了现代科技与人性化服务&#…

最小生成树prim算法详解

prim算法解决的是最小生成树问题&#xff0c;即在一个给定的无向图G中求一棵生成树T&#xff0c;使得这棵树拥有图G中的所有顶点&#xff0c;且所有边都是来自图G中的边&#xff0c;并且满足整棵树的边权之和最小。 prim算法的基本思想是对图G设置集合S来存放已被访问的顶点&a…

【源码】【Spring+SpringMVC+MyBatis】电子商城网上购物平台的设计与开发

学生成绩管理系统 系统功能开发环境开发技术前端技术后端技术 系统展示登录界面注册界面系统首页商品详情页下单界面付款界面购物车界面 源码获取↓↓↓↓&#xff1a; 源码可在后台私信联系博主或文末添加博主微信获取帮助 系统功能 登录、注册模块&#xff1a;如果用户第一次…

基于Java+Swing+mysql幼儿园信息管理系统V2

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…

Day31 - Day35

Day31 - Day35 Day31&#xff08;1999年text5&#xff09; Science, in practice, depends far less on the experiments it prepares than on the preparedness of the minds of the men who watch the experiments. 在实践中&#xff0c;科学对实验的依赖远少于对实验观察者…

【网络编程】基于UDP的服务器端/客户端

UDP可看作是信件邮寄&#xff0c;邮寄过程可能会信件丢失&#xff0c;是一种不可靠的数据传输服务。 但UDP性能更高&#xff0c;实现更加简洁。流控制是区分UDP和TCP的最重要标志。 IP的作用就是让离开主机B的UDP数据包传递给主机B&#xff0c;UDP根据端口号将传到主机的数据包…

Python - OS模块+sys模块

一、OS模块基本用法&#xff1a; import osprint(os.getcwd()) # 获取当前工作目录os.chdir(data) # 改变当前脚本工作目录&#xff1b;相当于终端里面的cd命令 print(os.getcwd()) # 获取当前工作目录 运行结果&#xff1a; D:\__TC22008_VBF\FOTA-vFlash-AutoTest D:\__TC22…

js/javascript获取时间戳的5种方法

1.获取时间戳精确到秒,13位 const timestamp Date.parse(new Date()); console.log(timestamp);//输出 1591669256000 13位 2.获取时间戳精确到毫秒,13位 const timestamp Math.round(new Date()); console.log(timestamp);//输出 1591669961203 13位 3.获取时间戳精…

conda虚拟环境报错总结

创建conda虚拟环境 文章前景&#xff08;小白篇&#xff09;为什么要安装Anaconda&#xff1f;&#xff1f;&#xff1f; Conda创建虚拟环境遇到的错误总结错误1&#xff1a;jupyter 里面没有显示我的虚拟环境怎么办&#xff1f;错误2&#xff1a;配置pycharm的时候conda虚拟环…

百货商城优选 当嘉士利饼干成为艺术品

近日&#xff0c;全国各大美院毕业展正如火如荼展开&#xff0c;其中中国美院一学生的毕业作品——“记忆饼干”从中脱颖而出&#xff0c;引发关注。短短一天时间&#xff0c;“记忆饼干”相关视频在全网已收获超7w网友点赞与收藏&#xff0c;更是激发网友们不断去线下打卡合影…

破解发展难题 台山这家合作社以农业社会化服务助推乡村振兴

风吹稻田千层浪&#xff0c;眼下&#xff0c;台山四九镇的早稻长势喜人&#xff0c;沉甸甸的稻穗迎风而动&#xff0c;已进入破口抽穗的关键期&#xff0c;即将在6月底陆续迎来丰收。在台山市明华汇种养专业合作社管理的稻田里&#xff0c;合作社负责人梁明喜正仔细观察着稻苗的…

node aws

基础&#xff08;菜鸟教程&#xff09;框架&#xff1a; expressEgg.js(底层框架express)koa(自定义强&#xff0c;小而精简&#xff0c;白话就是什么都没有&#xff0c;自己diy&#xff0c;考验架构技术&#xff0c;搞得好比nest.js开发效率还高&#xff0c;同时框架精简)nest…

消费全返如何盈利?新零售分销营销模式解析

在当今竞争激烈的商业环境中&#xff0c;如何有效地吸引并留住顾客&#xff0c;同时实现销售额的持续增长&#xff0c;是每个商家都在思考的问题。我们团队经过深入研究和实践&#xff0c;成功开发了一套积分消费全返模式&#xff0c;它不仅帮助贵州的一位老板在短短一年内实现…

持续总结中!2024年面试必问 20 道并发编程面试题(四)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 20 道并发编程面试题&#xff08;三&#xff09;-CSDN博客 七、请解释什么是原子操作。 原子操作&#xff08;Atomic Operation&#xff09;是指在多线程环境中&#xff0c;一个操作或者一系列操作&#xff0c;要…

山东大学软件学院项目实训-创新实训-基于大模型的旅游平台(三十二)- 微服务(12)

目录 12.8 RestClient查询文档 12.8.1 快速入门 12.8.2 match&#xff0c; term&#xff0c;bool&#xff0c;range查询 12.8.3 排序和分页 12.8.4 高亮 12.8 RestClient查询文档 12.8.1 快速入门 Testvoid testMatchALL() throws IOException {// 1. 准备requestSearchReq…

以bert为例,了解Lora是如何添加到模型中的

以bert为例,了解Lora是如何添加到模型中的 一.效果图1.torch.fx可视化A.添加前B.添加后 2.onnx可视化A.添加前B.添加后 3.tensorboard可视化A.添加前B.添加后 二.复现步骤1.生成配置文件(num_hidden_layers1)2.运行测试脚本 本文以bert为例,对比了添加Lora模块前后的网络结构图…

Linux下的GPIO编程

目录 一、前言 二、sysfs方式 1、sysfs简介 2、基本目录结构 3、编号计算 4、sysfs方式控制GPIO 三、libgpiod库 1、libgpiod库简介 2、API函数 四、LED灯编程 一、前言 在Linux下&#xff0c;我们通常使用 sysfs 和 libgpiod库 两种方式进行控制GPIO&#xff0c;目前…

DDei在线设计器-属性编辑器

DDei-Core-属性编辑器 DDei-Core-属性编辑器插件包含了文本、大文本、数值、下拉、单选、勾选以及颜色等属性编辑。 图形和属性共同构成一个完整的定义&#xff0c;属性编辑器就是编辑属性值的控件。当选中图形实例时&#xff0c;属性面板就会展现当前实例的所有属性以及属性编…

通过身份证号码计算年龄

一、需求分析 在一些需要精确统计用户年龄的场景中。 如果我们使用之间由用户填写自己年龄的方式的话&#xff0c;就无法保证用户填写的信息是准确的其中最有效的办法就是让用户进行实名认证&#xff0c;再由用户上传的身份证号码截取到出生日期&#xff0c;通过计算后得到用…

m4s转mp3——B站缓存视频提取音频

前言 しかのこのこのここしたんたん&#xff08;鹿乃子乃子虎视眈眈&#xff09;非常之好&#xff0c;很适合当闹钟&#xff0c;于是缓存了视频&#xff0c;想提取音频为mp3 直接改后缀可乎&#xff1f;格式转换工具&#xff1f; 好久之前有记录过转MP4的&#xff1a; m4s转为…