浏览器视频合成转码@ffmpeg/ffmpeg使用笔记

Vite + Vue项目使用@ffmpeg/ffmpeg0.12.x版本踩坑笔记

ffmpegwasm项目github仓库有一个 vue-vite-app 模板,其中 components 目录下的 FFmpegDemo.vue 组件有示例代码,想要快速验证使用@ffmpeg/ffmpeg 建议把模版克隆下来启动。

安装

sh 复制代码
npm install @ffmpeg/ffmpeg @ffmpeg/util @ffmpeg/core -D
sh 复制代码
yarn add @ffmpeg/ffmpeg @ffmpeg/util @ffmpeg/core -D
sh 复制代码
pnpm add @ffmpeg/ffmpeg @ffmpeg/util @ffmpeg/core -D

引用

javascript 复制代码
<script setup>
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile, toBlobURL } from '@ffmpeg/util';
const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi';//远程视频地址
const ffmpeg = new FFmpeg();
// 加载 ffmpeg 核心
const transcode = async () => {
  ffmpeg.on('log', (e) => {
    console.log(e.message);
  });
  
  await ffmpeg.load({
  //coreURL 和 wasmURL 加载核心包 GitHub文档仓库的示例是加载CDN的,我们可以把包放到public目录
    let coreURL = await toBlobURL('/public/static/esm/ffmpeg-core.js', 'text/javascript');
    let wasmURL = await toBlobURL(`/public/static/esm/ffmpeg-core.wasm`, 'application/wasm');
    await ffmpeg.load({
      coreURL,
      wasmURL
    });
  });
  
  await ffmpeg.writeFile('test.avi', await fetchFile(videoURL));//将远程视频写入FFmpeg文件系统
  await ffmpeg.exec(['-i', 'test.avi', 'test.mp4']);//FFmpeg输出视频
  const data = await ffmpeg.readFile('test.mp4');// 读取生成的视频文件
  const videoBlob = new Blob([videoData.buffer], { type: 'video/mp4' });
  videoSrc = URL.createObjectURL(videoBlob);// 返回视频Blob的URL,可用于video标签的src属性
};

</script>

关键点

1.GitHub文档仓库的示例截图,我们根据关键点将本地代码稍做修改

2.关键的核心包位置,我们拷贝到public目录

相关推荐
gnip7 分钟前
做个交通信号灯特效
前端·javascript
小小小小宇8 分钟前
Webpack optimization
前端
尝尝你的优乐美10 分钟前
前端查缺补漏系列(二)JS数组及其扩展
前端·javascript·面试
咕噜签名分发可爱多12 分钟前
苹果iOS应用ipa文件安装之前?为什么需要签名?不签名能用么?
前端
她说人狗殊途27 分钟前
Ajax笔记
前端·笔记·ajax
yqcoder35 分钟前
33. css 如何实现一条 0.5 像素的线
前端·css
excel1 小时前
Nuxt 3 + PWA 通知完整实现指南(Web Push)
前端·后端
yuanmenglxb20041 小时前
构建工具和脚手架:从源码到dist
前端·webpack
rit84324991 小时前
Web学习:SQL注入之联合查询注入
前端·sql·学习
啃火龙果的兔子1 小时前
Parcel 使用详解:零配置的前端打包工具
前端