uniapp blob格式转换为video .mp4文件使用ffmpeg工具

前言

介绍一下这三种对象使用场景

您前端一旦涉及到文件或图片上传Q到服务器,就势必离不了 Blob/File /base64 三种主流的类型它们之间 互转 也成了常态

  • Blob - File
  • Blob -Base64
  • Base64 - Blob
  • File-Base64
  • Base64 _ File

uniapp 上传文件

现在已获取到了blob格式的视频,现在需要把blob文件转换为视频

首先验证blob格式是否能播放

javascript 复制代码
this.videoSrc = URL.createObjectURL(blob); // 转换后 用于挂载到视频播放器得转换
console.log('this.videoSrc ==》', this.videoSrc);

使用ffmpeg工具转换为MP4文件

去官网下载下载 FFmpeg并配置对应的环境变量

复制代码
C:\path\to\ffmpeg\bin

即可

ffmpeg -version // 能查看版本信息说明配置成功

使用node.js命令转换

const {execSync} = require('child_process')

execSync(`ffmpeg -i blob test.mp4`,{stdio:'inherit'})

// execSync(`ffmpeg -i 1.mp4 1.gif`,{stdio:'inherit'})

下载到手机相册

javascript 复制代码
uni.downloadFile({
				   url: 'xxxx/water/app/event_vdo/2024/12/16/34_4_27_20241216_102340_70_0.mp4',
				   success: function (res) {
				     var filePath = res.tempFilePath;
					console.log('filePath===>',filePath);
				 	uni.showToast({
				 		icon:'none',
				 		title:'文件下载成功'
				 	})
					// 下载成功后,调用微信保存图片到系统相册API
					      uni.saveImageToPhotosAlbum({
					        filePath: filePath,
					        success: function () {
					          console.log('保存成功');
					        },
					        fail: function (err) {
					          console.error('保存失败', err);
					        }
					      });
				   },
				   fail:function(err){
				   	console.log(err);
				   }
				 });

FFmpeg 的主要功能和特性:

  1. 格式转换:FFmpeg 可以将一个媒体文件从一种格式转换为另一种格式,支持几乎所有常见的音频和视频格式,包括 MP4、AVI、MKV、MOV、FLV、MP3、AAC 等。
  2. 视频处理:FFmpeg 可以进行视频编码、解码、裁剪、旋转、缩放、调整帧率、添加水印等操作。你可以使用它来调整视频的分辨率、剪辑和拼接视频片段,以及对视频进行各种效果处理。
  3. 音频处理:FFmpeg 可以进行音频编码、解码、剪辑、混音、音量调节等操作。你可以用它来提取音频轨道、剪辑和拼接音频片段,以及对音频进行降噪、均衡器等处理。
  4. 流媒体传输:FFmpeg 支持将音视频流实时传输到网络上,可以用于实时流媒体服务、直播和视频会议等应用场景。
  5. 视频处理效率高:FFmpeg 是一个高效的工具,针对处理大型视频文件和高分辨率视频进行了优化,可以在保持良好质量的同时提供较快的处理速度。
  6. 跨平台支持:FFmpeg 可以在多个操作系统上运行,包括 Windows、MacOS、Linux 等,同时支持多种硬件加速技术,如 NVIDIA CUDA 和 Intel Quick Sync Video。

视频转gif

const {execSync} = require('child_process')

execSync(`ffmpeg -i test.mp4 test.gif`,{stdio:'inherit'})

添加水印

const {execSync} = require('child_process')

execSync(`ffmpeg -i test.mp4 -vf drawtext=text="XMZS":fontsize=30:fontcolor=white:x=10:y=10 test2.mp4`,{stdio:'inherit'})

视频裁剪 + 控制大小

-ss 起始时间

-to 结束事件

const {execSync} = require('child_process')

execSync(`ffmpeg -ss 10 -to 20 -i test.mp4 test3.mp4`,{stdio:'inherit'})

提取视频的音频

const {execSync} = require('child_process')

execSync(`ffmpeg -i test.mp4 test.mp3`,{stdio:'inherit'})

去掉水印

const {execSync} = require('child_process')

execSync(`ffmpeg -i test2.mp4 -vf delogo=w=120:h=30:x=10:y=10 test3.mp4`,{stdio:'inherit'})

相关推荐
百思可瑞教育1 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
jingling5553 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
勘察加熊人5 小时前
ffmpeg切割音频
ffmpeg·音视频
百思可瑞教育10 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
Q_Q196328847516 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育18 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e19 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张19 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
不知名的前端专家1 天前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty
fakaifa1 天前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版