当前位置: 首页 > news >正文

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

相关文章:

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

1.Vue项目中安装插件ffmpeg 1.1 插件版本依赖配置 两个插件的版本 "ffmpeg/core": "^0.10.0", "ffmpeg/ffmpeg": "^0.10.1"package.json 和 package-lock.json 都加入如下ffmpeg的版本配置&#xff1a; 1.2 把ffmpeg安装到项目依…...

样式的双向绑定的2种方式,实现样式交互效果

与样式标签实现双向绑定 通过布尔值来决定样式是出现还是消失 show代表着布尔值&#xff0c;show的初始值是false所以文本不会有高亮的效果&#xff0c;当用户点击了按钮&#xff0c;就会调用shows这个函数&#xff0c;并将show的相反值true赋值并覆盖给show,此时show的值为tru…...

供应链经理面试题

供应链经理面试题通常会涉及对供应链管理的基本理解、工作经验、解决问题的能力以及团队协作等多个方面。 请简要介绍一下你在供应链管理领域的工作经验和取得的成绩。你如何定义供应链管理&#xff1f;它在企业中的作用是什么&#xff1f;你认为供应链经理最重要的职责是什么…...

快速理解 Node.js 版本差异:3 分钟指南

Node.js 是一个广泛使用的 JavaScript 运行时环境&#xff0c;允许开发者在服务器端运行 JavaScript 代码。随着技术的发展&#xff0c;Node.js 不断推出新版本&#xff0c;引入新特性和改进。了解不同版本之间的差异对于开发者来说至关重要。以下是一个快速指南&#xff0c;帮…...

【Qt实现录频】

在Qt中实现录制视频可以通过使用Qt Multimedia模块来实现。你可以使用QCamera类来访问摄像头并捕获视频数据。以下是一个简单的示例代码,用于在Qt中实现录制视频: #include <QCamera> #include <QCameraInfo> #include <QCameraViewfinder> #include <…...

Golang编译导致的代码错觉

文章目录 背景分析代码疑问 直接上汇编gdb调试优化后的汇编staticunit64s查看禁止优化后的汇编 查看编译过程的SSA生成SSAb对应的SSAc对应的SSAgo官方文档的解释 对比C语言的表现总结 背景 网上看到一段代码&#xff0c;来源是Golang 编译器优化那些事&#xff0c;百思不得其解…...

SpringBoot整合H2数据库并将其打包成jar包、转换成exe文件

SpringBoot整合H2数据库并将其打包成jar包、转换成exe文件 H2 是一个用 Java 开发的嵌入式数据库&#xff0c;它的主要特性使其成为嵌入式应用程序的理想选择。H2 仅是一个类库&#xff0c;可以直接嵌入到应用项目中&#xff0c;而无需独立安装客户端和服务器端。 常用开源数…...

web前端文本大小:从入门到精通的全方位解析

web前端文本大小&#xff1a;从入门到精通的全方位解析 在web前端开发的世界中&#xff0c;文本大小的处理既是基础也是关键的一环。无论是对于初学者还是资深开发者&#xff0c;正确且有效地处理文本大小都显得尤为重要。本文将从四个方面、五个方面、六个方面和七个方面&…...

【报文数据流中的反压处理】

报文数据流中的反压处理 1 带存储体的反压1.1 原理图1.2 Demo 尤其是在NP芯片中&#xff0c;经常涉及到报文的数据流处理&#xff1b;为了防止数据丢失&#xff0c;和各模块的流水处理&#xff1b;因此需要到反压机制&#xff1b; 反压机制目前接触到的有两种&#xff1a;一是基…...

数据挖掘丨轻松应用RapidMiner机器学习内置数据分析案例模板详解(下篇)

RapidMiner 案例模板 RapidMiner 机器学习平台提供了一个可视化的操作界面&#xff0c;允许用户通过拖放的方式构建数据分析流程。RapidMiner目前内置了 13 种案例模板&#xff0c;这些模板是预定义的数据分析流程&#xff0c;可以帮助用户快速启动和执行常见的数据分析任务。 …...

时代巨兽!深度神经网络如何改变我们的世界?

深度神经网络 1、 简介1.1 定义深度神经网络1.2 深度学习的发展历程1.3 深度神经网络的应用领域 2、深度神经网络的基本原理2.1 神经元层2.1.1 神经元2.1.2 神经元层 2.2 前向传播2.3 反向传播2.4 激活函数2.4.1、作用2.4.2、常见激活函数2.4.3、选择激活函数的考虑 2.5 损失函…...

LVS+Keepalived高可用负载均衡群集

目录 一.高可用群集相关概述 1.高可用&#xff08;HA&#xff09;群集与普通群集的比较 普通群集 高可用群集&#xff08;HA&#xff09; 两者比较 2.Keepalived高可用方案 3.Keepalived的体系模块及其作用 4.Keepalived实现原理 二.LVSKeepAlived高可用负载均衡集群的…...

【MySQL】MySQL45讲-读书笔记

1、基础架构&#xff1a;一条SQL查询语句是如何执行的&#xff1f; 1.1 连接器 连接器负责跟客户端建立连接、获取权限、维持和管理连接。 mysql -h$ip -P$port -u$user -p输完命令之后&#xff0c;输入密码。 1.2 查询缓存 MySQL 拿到一个查询请求后&#xff0c;会先到查询缓…...

python:faces swap

# encoding: utf-8 # 版权所有 2024 ©涂聚文有限公司 # 许可信息查看&#xff1a; 两个头像图片之间换脸 # 描述&#xff1a; https://stackoverflow.com/questions/902761/saving-a-numpy-array-as-an-image?answertabvotes # Author : geovindu,Geovin Du 涂聚文. #…...

Android开发之音乐播放器添加排行需求

Music统计功能需求 1.记录歌曲名称与次数(歌曲播放结束算一次)&#xff0c;根据播放次数制作一个排行列表;&#xff08;开始说要记录歌手&#xff0c;后面debug发现这个字段没有&#xff0c;暂时不记录&#xff09; 2.记录播放歌曲的时长&#xff0c;时间累加&#xff1b;&…...

latex 方括号编号

最近在做简历&#xff0c;需要列出发表的论文。 论文编号一般是采用[1]这种样式&#xff0c;但是找了几个简历模板里头没有直接包含这种编号样式。 我只好求助网络。 在CSDN上找了一圈&#xff0c;这篇博客给了一个思路&#xff1a;在\begin{enumerate}后面添加对应的样式即…...

Vue CLI 4与项目构建实战指南

title: Vue CLI 4与项目构建实战指南 date: 2024/6/9 updated: 2024/6/9 excerpt: 这篇文章介绍了如何使用Vue CLI优化项目构建配置&#xff0c;提高开发效率&#xff0c;涉及配置管理、项目部署策略、插件系统定制以及Webpack和TypeScript的深度集成技巧。 categories: 前端…...

深入解析Web通信 HTTP、HTTPS 和 WebSocket

在现代Web开发中,了解和掌握HTTP、HTTPS以及WebSocket协议是非常重要的。这些协议是实现Web应用程序之间通信的基石。本文将详细介绍这三种协议,包括它们的基本概念、工作原理、优缺点以及适用场景。通过深入解析它们的特点和应用,帮助读者更好地理解和使用这些协议。 一、…...

FISCO BCOS x GitLink,为国产开源技术生态注入新活力

作为中国领先的区块链底层平台之一&#xff0c;FISCO BCOS 自成立以来始终致力于推动国产开源区块链技术的应用和普及。近期&#xff0c;FISCO BCOS 将开源代码托管到CCF官方代码托管平台 GitLink &#xff08;确实开源&#xff09;&#xff0c;为国产开源技术生态注入新活力。…...

Linux crontabs定时执行任务

文章目录 前言一、安装二、服务1. 启动crond服务2. 关闭crond服务3. 重启crond服务4. 设置crond开机启动5. 禁用crond开机启动6. 查看crond是否开机启动7. 重新载入配置8. 查看crond运行状态 三、使用1. 查看当前用户的crontab2. 编辑用户的crontab3. 删除用户的crontab的内容 …...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...