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

Js使用ffmpeg在视频中添加png或gif

Js使用ffmpeg在视频中添加png或gif

ffmpeg

使用场景是需要在web端对视频进行编辑 添加图片和gif。


注意:

以下所有的使用案例均基于vue3 setup。

同时由于@ffmpeg版本不同会导致使用的api不同,使用案例前需要注意@ffmpeg版本问题

如果使用的是0.12+需要使用新的api,详情请看 文档


npm

npm install @ffmpeg/ffmpeg@^0.11.0npm install @ffmpeg/core@^0.11.0

视频添加png

<template></template><script setup>
import { ref, onUnmounted, onMounted } from 'vue'
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';const ffmpeg = createFFmpeg({ log: true });
const fileType = ref("") // 视频文件类型/*** 将图片合成到视频中* @param {string} url 视频在线地址* @param {object} picItem 图片素材对象* @param {string} picItem.startT 图片素材出现的开始时间* @param {number} picItem.duration 素材的出现持续时间* @param {number} picItem.scale 素材的放大比例* @param {string} picItem.url 图片素材url地址* @param {number} picItem.x 素材离视频顶部的距离* @param {number} picItem.y 素材离视频左侧的距离* @return {Promise<{outputName: string, fileUrl: string}> | undefined}*/
const videoCompose = async (url, picItem) => {if (!ffmpeg.isLoaded()) {await ffmpeg.load();}if (!url) return;const { duration, scale, startT, url: picUrl, x, y } = picItem;fileType.value = url.split(".").pop();const inputName = `input.${fileType.value}`;const outputName = `output.${fileType.value}`;const imageType = picUrl.split(".").pop();const imageFileName = `image.${imageType}`;await ffmpeg.FS('writeFile', inputName, await fetchFile(url));await ffmpeg.FS('writeFile', imageFileName, await fetchFile(picUrl));// 运行 FFmpeg 命令try {await ffmpeg.run(`-i`, `${inputName}`,`-i`, `${imageFileName}`,`-filter_complex`, `[1:v]scale=iw*${(scale).toFixed(1)}:ih*${(scale).toFixed(1)}[scaled];[0:v][scaled]overlay=${x}:${y}:enable='between(t,${+startT},${+startT + duration})'`,`${outputName}`,"-hide_banner");// 读取输出文件let arrayBuffer = ffmpeg.FS('readFile', outputName).buffer; // 读取缓存// 创建下载链接并通过回调下载保存到本地const fileUrl = URL.createObjectURL(new Blob([arrayBuffer])); // 转为Blob URL// 释放内存ffmpeg.FS('unlink', inputName);ffmpeg.FS('unlink', outputName);return {fileUrl,outputName};} catch (e) {console.log(e);}
}const downloadFile = (url, fileName = `clip.mp4`) => {const link = document.createElement('a');link.href = url;link.download = fileName;link.click();
}onMounted(async () => {const {fileUrl} = await videoCompose("http://xxx.mp4", {duration: 3,scale: 1,startT: "0.00",url: 'http://xxx.png',x: 100,y: 100})downloadFile(fileUrl)
})onUnmounted(() => {ffmpeg.exit();
})
</script>

视频添加gif

流程与添加图片类似,但添加滤镜的命令不相同。

/*执行FFmpeg命令的部分替换`-ignore_loop`, `0` 让gif图片循环播放 否则只播放一次`-itsoffset`, `${+startT}` gif图片在视频中出现时间fade=t=in:st=${+startT}:d=1:alpha=1[wm]; gif图片在视频中淡入的时间:shortest=1 视频的时长为初始视频时长 否则由于gif添加会导致视频时间增长:enable='between(t,${+startT},${+startT + duration})' gif的出现时间"-hide_banner" 隐藏ffmpeg的部分信息
*/
await ffmpeg.run(`-i`, `${inputName}`,`-ignore_loop`, `0`,`-itsoffset`, `${+startT}`,`-i`, `${imageFileName}`,`-filter_complex`, `[0:0]scale=iw:ih[a];[1:0]scale=iw*${(scale).toFixed(1)}:ih*${(scale).toFixed(1)},fade=t=in:st=${+startT}:d=1:alpha=1[wm];[a][wm]overlay=x=${x}:y=${y}:shortest=1:enable='between(t,${+startT},${+startT + duration})'`,`${outputName}`,"-hide_banner");

整合

可以在添加时对图片的类型进行判断,执行不同的添加逻辑

/*** 将图片合成到视频中* @param {string} url 视频在线地址* @param {object} picItem 图片素材对象* @param {string} picItem.startT 图片素材出现的开始时间* @param {number} picItem.duration 素材的出现持续时间* @param {number} picItem.scale 素材的放大比例* @param {string} picItem.url 图片素材url地址* @param {number} picItem.x 素材离视频顶部的距离* @param {number} picItem.y 素材离视频左侧的距离* @return {Promise<{outputName: string, fileUrl: string}> | undefined}*/
const videoCompose = async (url, picItem) => {if (!ffmpeg.isLoaded()) {await ffmpeg.load();}if (!url) return;const {duration, scale, startT, url: picUrl, x, y} = picItem;const type = url.split(".").pop();const inputName = `input.${type}`;const outputName = `output.${type}`;const imageType = picUrl.split(".").pop();const imageFileName = `image.${imageType}`;// 将输入文件保存到虚拟文件系统if (url.startsWith('blob:')) {// 处理 Blob URLconst arrayBuffer = await fetchBlobAsArrayBuffer(url);ffmpeg.FS('writeFile', inputName, new Uint8Array(arrayBuffer));} else if (url.startsWith('http://') || url.startsWith('https://')) {// 处理网络地址await ffmpeg.FS('writeFile', inputName, await fetchFile(url));}await ffmpeg.FS('writeFile', imageFileName, await fetchFile(picUrl));// 运行 FFmpeg 命令try {if (imageType === 'gif') {await ffmpeg.run(`-i`, `${inputName}`,`-ignore_loop`, `0`,`-itsoffset`, `${+startT}`,`-i`, `${imageFileName}`,`-filter_complex`, `[0:0]scale=iw:ih[a];[1:0]scale=iw*${(scale).toFixed(1)}:ih*${(scale).toFixed(1)},fade=t=in:st=${+startT}:d=1:alpha=1[wm];[a][wm]overlay=x=${x}:y=${y}:shortest=1:enable='between(t,${+startT},${+startT + duration})'`,`${outputName}`,"-hide_banner");} else {await ffmpeg.run(`-i`, `${inputName}`,`-i`, `${imageFileName}`,`-filter_complex`, `[1:v]scale=iw*${(scale).toFixed(1)}:ih*${(scale).toFixed(1)}[scaled];[0:v][scaled]overlay=${x}:${y}:enable='between(t,${+startT},${+startT + duration})'`,`${outputName}`,"-hide_banner");}// 读取输出文件let arrayBuffer = ffmpeg.FS('readFile', outputName).buffer; // 读取缓存// 创建下载链接并通过回调下载保存到本地const fileUrl = URL.createObjectURL(new Blob([arrayBuffer])); // 转为Blob URL// 释放内存ffmpeg.FS('unlink', inputName);ffmpeg.FS('unlink', outputName);return {fileUrl,outputName};} catch (e) {console.log(e);}
}

http://www.lryc.cn/news/199666.html

相关文章:

  • 多线程 Leetcode 打印零与奇偶数
  • 杭电oj--数列有序
  • PHPEXCEL解决行数超过65536不显示问题
  • 新媒体时代如何做好新型的网络口碑营销?
  • MySQL中InnoDB插入缓冲区(Insert Buffer)
  • VUE前端判断是电脑端还是移动端
  • OpenGL —— 2.8、漫游之摄像机飞行移动(附源码,glfw+glad)
  • AM@麦克劳林公式逼近以及误差分析
  • gitlab 离线安装问题解决:NOKEY,signature check fail
  • uniapp使用uQRCode绘制二维码,下载到本地,调起微信扫一扫二维码核销
  • 手写一个PrattParser基本运算解析器3: 基于Swift的PrattParser的项目概述
  • 三江学院“火焰杯”软件测试高校就业选拔赛颁奖仪式
  • 面试题-消息中间件篇-主流的消息中间件
  • PyQt学习笔记-获取Hash值的小工具
  • 【(数据结构)— 双向链表的实现】
  • 酷克数据发布HD-SQL-LLaMA模型,开启数据分析“人人可及”新时代
  • FL Studio21最新中文破解进阶高级完整版安装下载教程
  • MDN--Web性能
  • Vue3.js:自定义组件 v-model
  • AI虚拟主播开发实战(附源码)
  • innoDB如何解决幻读
  • Git - 导出(archive)、忽略(gitignore)、隐藏(Stash)、合并冲突(merge)的解决方法
  • 【Javascript】‘var‘ is used instead of ‘let‘ or ‘const‘
  • 金融统计学方法:神经网络
  • 任何人不知道这款超实用的配音软件,我都会伤心的OK?
  • Linux查看日志文件的常用命令
  • AcWing算法分享系列——二分图
  • 【Excel单元格类型的解析校验】Java使用POI解析excel数据
  • 【运维知识高级篇】超详细的Jenkins教程5(pipeline流水线配置+分布式构建)
  • 为什么要在电影院装监控?有什么作用?