浏览器视频合成转码@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目录

相关推荐
brzhang21 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang21 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构
reembarkation21 小时前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
gerrgwg1 天前
React Hooks入门
前端·javascript·react.js
ObjectX前端实验室1 天前
【react18原理探究实践】调度机制之注册任务
前端·react.js
汉字萌萌哒1 天前
【 HTML基础知识】
前端·javascript·windows
ObjectX前端实验室1 天前
【React 原理探究实践】root.render 干了啥?——深入 render 函数
前端·react.js
北城以北88881 天前
Vue--Vue基础(二)
前端·javascript·vue.js
ObjectX前端实验室1 天前
【react18原理探究实践】更新调度的完整流程
前端·react.js
tanxiaomi1 天前
通过HTML演示JVM的垃圾回收-新生代与老年代
前端·jvm·html