ffmpeg+vue2

一、安装依赖

npm install @ffmpeg/core @ffmpeg/ffmpeg
"@ffmpeg/core": "^0.10.0",
"@ffmpeg/ffmpeg": "^0.10.1",

二、配置ffmpeg
安装好插件以后,需要配置一下代码,否则会报错:

1、在vue.config.js文件中配置请求头

devServer: {headers: {'Cross-Origin-Opener-Policy': 'same-origin','Cross-Origin-Embedder-Policy': 'require-corp'}
}

在页面中实例化ffmpeg的时候可能会报找不到模块儿的错误,最好将下载好的插件文件放到public文件夹里面就可以了 createFFmpegCore is not defined

node_modules@ffmpeg\core\dist中的三个文件复制到vue项目的public下
ffmpeg-core.js
ffmpeg-core.wasm
ffmpeg-core.worker.js

三、组件

<template><div class="video-box"><video id="video" controls object-fill="fill"></video><br /><input id="upload" type="file" accept="video/mp4" capture="camcorder" @change="upload"></div>
</template><script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
export default {data () {return {msg: '',videoWidth: '',videoHeight: '',duration: ''}},methods: {// 选择文件async upload (e) {console.log('start', e)console.log('start', e.target.files[0])var _this = thisif (e.target.files[0]) {var filename = e.target.files[0].namevar filetype = e.target.files[0].typeconst videoUrl = _this.getObjectURL(e.target.files[0])const video = document.getElementById('video')video.src = videoUrlthis.getVideoData().then((videoObj) => {const file = e.target.files[0]console.log('videoObj:', videoObj)const { width, height } = videoObjconst result = _this.squeezVideo(file, filename, filetype, width, height, _this.msg)result.then(res => {console.log('resultFile', res)})})}},// 压缩视频async squeezVideo (file, filename, filetype, width, height) {console.log('squeezingVideo file name:  ', file.name)console.log('squeezingVideo file type:  ', file.type)console.log('squeezingVideo file path:  ', file.path)console.log('squeezingVideo file size:  ', file.size)console.log('squeezingVideo file lastModified:  ', file.lastModified)console.log('squeezingVideo file lastModifiedDate:  ', file.lastModifiedDate)const _this = this// 分辨率const resolution = `${width / 2}x${height / 2}`// 实例化ffmpegconst ffmpeg = createFFmpeg({// ffmpeg路径corePath: 'ffmpeg-core.js',// 日志log: true,// 进度progress: ({ ratio }) => {_this.msg = `完成率: ${(ratio * 100.0).toFixed(1)}%`}})var { name } = filethis.msg = '正在加载 ffmpeg-core.js'// 开始加载await ffmpeg.load()this.msg = '开始压缩'// 把文件加到ffmpeg   写文件ffmpeg.FS('writeFile', name, await fetchFile(file))// await ffmpeg.run('-i', name, '-b', '2000000', '-fs', '4194304', '-preset medium', 'superfast', 'put.mp4')// 开始压缩视频await ffmpeg.run('-i', name, '-b', '2000000', '-crf', '23', '-fs', '4194304', '-s', resolution, 'put.mp4')this.msg = '压缩完成'// 压缩所完成,   读文件  压缩后的文件名称为 put.mp4const data = ffmpeg.FS('readFile', 'put.mp4')// 转换压缩后的视频格式  当前为 blob 格式var filed = _this.transToFile(data)console.log('transToFile: ', filed)return new Promise((resolve, reject) => {if (filed) {resolve({squzingFile: filed})}})},// 获取视频的宽高分辨率getVideoData () {return new Promise((resolve, reject) => {const videoElement = document.getElementById('video')videoElement.addEventListener('loadedmetadata', function () {resolve({width: this.videoWidth,height: this.videoHeight,duration: this.duration})})})},// 获取上传视频的urlgetObjectURL (file) {let url = nullwindow.URL = window.URL || window.webkitURLif (window.URL) {url = window.URL.createObjectURL(file)} else {url = URL.createObjectURL(file)}return url},// 类型转换 blob 转换 filetransToFile (data) {console.log(data)const _this = thisvar file = []// 转换bolb类型const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })// 这么写是因为文件转换是异步任务const transToFile = async (blob, fileName, fileType) => {return new window.File([blob], fileName, { type: fileType })}const textContain = transToFile(blob, 'put.mp4', 'video/mp4')// 转换完成后可以将file对象传给接口textContain.then((res) => {file.push(res)console.log('res', res)// _this.confirm(file)return file})}}
}
</script>

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

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

相关文章

奇瑞汽车:降阶模型在新能源汽车热管理仿真上的应用

随着新能源汽车的发展&#xff0c;对仿真技术的要求也越来越高。那么奇瑞汽车利用降阶模型在新能源汽车热管理仿真上做了哪些应用呢&#xff1f;本次内容主要从四个方面展开介绍&#xff1a; 1、 奇瑞汽车简介&#xff1b; 2、 热管理降阶模型开发的背景&#xff1b; 3、 高低…

ctf文件上传题小总结与记录

解题思路&#xff1a;先看中间件&#xff0c;文件上传点&#xff08;字典扫描&#xff0c;会员中心&#xff09;&#xff0c;绕过/验证&#xff08;黑名单&#xff0c;白名单&#xff09;&#xff0c;解析漏洞&#xff0c;cms&#xff0c;编辑器&#xff0c;最新cve 文件上传漏…

nginx上传文件超过限制大小、响应超时、反向代理请求超时等问题解决

1、文件大小超过限制 相关配置&#xff1a; client_max_body_size&#xff1a; Syntax:client_max_body_size size;Default:client_max_body_size 1m;Context:http, server, location 2、连接超时: proxy_read_timeout&#xff1a; Syntax:proxy_read_timeout time;Default…

11.02学习

一、获取字符串的方法 1. 使用 scanf 函数&#xff1a; scanf 函数可以用来从标准输入&#xff08;通常是键盘&#xff09;读取格式化的输入。例如&#xff1a; char str[100]; scanf("%s", str); 这会读取一个字符串直到遇到空格、制表符或换行符。 2. 使用 g…

00-开发环境 MPLAB IDE 配置

MPLAB IDE V8.83 File 菜单简介 New (CtrlN)&#xff1a; 创建一个新文件&#xff0c;用于编写新的代码。 Add New File to Project...&#xff1a; 将新文件添加到当前项目中。 Open... (CtrlO)&#xff1a; 打开现有文件。 Close (CtrlE)&#xff1a; 关闭当前打开的文件。 …

基于BP神经网络的手写体数字图像识别

基于BP神经网络的手写体数字图像识别 摘要 在信息化飞速发展的时代&#xff0c;光学字符识别是一个重要的信息录入与信息转化的手段&#xff0c;其中手写体数字的识别有着广泛地应用&#xff0c;如&#xff1a;邮政编码、统计报表、银行票据等等&#xff0c;因其广泛地应用范围…

vite和webpack

✨create-vite 和 vue-cli的区别 create-vite 和 vue-cli 都是 Vue 项目的脚手架工具&#xff0c;但它们在架构、构建速度、配置灵活性、插件生态等方面有明显的差异。 1. 基础架构和构建工具 create-vite&#xff1a;基于 Vite&#xff0c;使用原生 ES 模块&#xff08;ESM&…

鸿蒙进阶篇-Swiper组件的使用

“在科技的浪潮中&#xff0c;鸿蒙操作系统宛如一颗璀璨的新星&#xff0c;引领着创新的方向。作为鸿蒙开天组&#xff0c;今天我们将一同踏上鸿蒙基础的探索之旅&#xff0c;为您揭开这一神奇系统的神秘面纱。” 各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今…

Ubuntu删除docker

文章目录 安装依赖1.安装操作系统&#xff1a;2.CPU支持 安装docker1.查看系统版本2.执行卸载 安装依赖 1.安装操作系统&#xff1a; 高于 Ubuntu 20.04(LTS) 版本 2.CPU支持 ARM和X86_64 安装docker 1.查看系统版本 cat /etc/*releas*uname -a2.执行卸载 检查本地dock…

【机器学习】23. 聚类-GMM: Gaussian Mixture Model

1. 定义和假设 定义&#xff1a;probabilistic clustering&#xff08;model-base&#xff09; 假设&#xff1a;数据服从正态分布 2. 算法内容 我们假设数据是由k个高斯&#xff08;正态&#xff09;分布混合生成的。每个分布有2个参数&#xff1a;μ和σ。 一个分布对应一…

【系统设计】深入理解HTTP缓存机制:从Read-Through缓存到HTTP缓存的交互流程

在现代Web开发中&#xff0c;缓存机制扮演着至关重要的角色。它不仅提升了用户体验&#xff0c;还极大地优化了资源的使用效率。在这篇博文中&#xff0c;我们将从“Read-Through”缓存的概念出发&#xff0c;深入探讨HTTP缓存的工作原理和交互流程&#xff0c;并详细描述max-a…

四款主流的3D创作和游戏开发软件的核心特点和关系

四款主流的3D创作和游戏开发软件的核心特点和关系 3D建模软件&#xff1a; Blender&#xff1a; 开源免费&#xff0c;功能全面优点&#xff1a; 完全免费持续更新优化社区活跃&#xff0c;学习资源丰富功能全面(建模、动画、渲染等) 缺点&#xff1a; 学习曲线陡峭界面操作…

Spring Cloud Ribbon:负载均衡的服务调用

Spring Cloud Ribbon&#xff1a;负载均衡的服务调用 Spring Cloud Ribbon 是Spring Cloud Netflix 子项目的核心组件之一&#xff0c;主要给服务间调用及API网关转发提供负载均衡的功能&#xff0c;本文将对其用法进行详细介绍 Ribbon简介 Ribbon 是 Netflix 公司开源的一个用…

Python中模块与包

1. 模块 在Python中&#xff0c;模块是一个包含Python代码的文件&#xff0c;可以包含函数、类和变量。模块使得代码的组织和复用变得更简单。 导入模块 使用import语句可以导入模块。常用的标准库模块包括math和random。 示例&#xff1a;使用math和random模块 import ma…

Node.js:Express 服务 路由

Node.js&#xff1a;Express 服务 & 路由 创建服务处理请求req对象 静态资源托管托管多个资源挂载路径前缀 路由模块化 Express是Node.js上的一个第三方框架&#xff0c;可以快速开发一个web框架。本质是一个包&#xff0c;可以通过npm直接下载。 创建服务 Express创建一…

TensorRT-LLM的k8s弹性伸缩部署方案

Scaling LLMs with NVIDIA Triton and NVIDIA TensorRT-LLM Using Kubernetes | NVIDIA Technical Blog 一共涉及4个k8s组件&#xff1a; 1. Deployment&#xff1a;跑起来N个pod&#xff1b;指定NVIDIA官方的triton&trt-llm的docker image&#xff0c;指定好model放在哪个…

运维监控丨16条常用的Kafka看板监控配置与告警规则

本期我们针对企业运维监控的场景&#xff0c;介绍一些监控配置和告警规则。可以根据Kafka集群和业务的具体要求&#xff0c;灵活调整和扩展这些监控配置及告警规则。在实际应用场景中&#xff0c;需要综合运用多种监控工具&#xff08;例如Prometheus、Grafana、Zabbix等&#…

《基于数据库数据的迁移学习应用》

《基于数据库数据的迁移学习应用》 一、引言二、迁移学习概述&#xff08;一&#xff09;迁移学习的定义和原理&#xff08;二&#xff09;迁移学习的分类&#xff08;三&#xff09;迁移学习的优势 三、数据库的类型与特点&#xff08;一&#xff09;关系型数据库&#xff08;…

Dockerfile制作Oracle19c镜像

Dockerfile文件 cat > Dockerfile << EOF # 使用 Oracle Linux 8 作为基础镜像 FROM oraclelinux:8# 复制 Oracle 19c 安装包 COPY oracle-database-ee-19c-1.0-1.x86_64.rpm /tmp/# 安装 Oracle 19c 数据库和依赖 RUN yum localinstall -y /tmp/oracle-database-ee-…

6.0、静态路由

路由器最主要的功能就是转发数据包。路由器转发数据包时需要查找路由表&#xff08;你可以理解为地图&#xff09;&#xff0c;管理员可以直接手动配置路由表&#xff0c;这就是静态路由。 1.什么是路由&#xff1f; 在网络世界中&#xff0c;路由是指数据包在网络中的传输路…