基于ffmpeg.wasm实现的视频格式转换工具

大宝贱

于 2024-08-14 09:49:03 发布

阅读量445

点赞数 16

文章标签： ffmpeg wasm 视频格式转换 webassembly vitepress

本文链接：https://blog.csdn.net/aidscooler/article/details/141181428

版权

在线体验地址：https://potatoh5games.fun/tools/#VideoConverter

说明：

1、ffmpeg.wasm多线程版本的稳定性存在问题，当前使用的是ffmpeg.wasm的单线程版本。速度下降很多，转换一个几秒十几秒的视频还能忍受。
2、之所以采用ffmpeg.wasm实现，是因为能够在前端进行视频处理，无需后台服务，用户的视频一直在本地，安全私密。

WebAssembly：为前端开发带来新可能

随着WebAssembly技术的快速发展，前端开发的能力边界正在不断拓展。WebAssembly允许在浏览器中运行接近原生性能的代码，使得许多传统上只能在后端或桌面应用中实现的功能，现在可以直接在浏览器中执行。这为Web应用带来了前所未有的性能提升和功能扩展。

FFmpeg.wasm：将强大的FFmpeg引入浏览器

FFmpeg.wasm是一个令人兴奋的项目，它将广受欢迎的FFmpeg多媒体框架移植到WebAssembly中。这意味着开发者可以直接在浏览器中使用FFmpeg的强大功能，无需服务器端处理。从视频转码、剪辑到音频处理，FFmpeg.wasm为Web应用提供了丰富的多媒体处理能力。

开发过程：构建一个前端视频格式转换工具

利用Vitepress、Element Plus和FFmpeg.wasm，我开发了一个纯前端的视频格式转换工具。以下是开发过程的主要步骤：

使用Vitepress搭建项目框架，利用Element Plus组件库构建用户界面。
集成FFmpeg.wasm，实现在浏览器中加载FFmpeg核心功能。

//安装ffmpeg.wasm
npm install @ffmpeg/ffmpeg @ffmpeg/util

  //引入ffmpeg.wasm
  import { FFmpeg } from '@ffmpeg/ffmpeg'
  import { fetchFile, toBlobURL } from '@ffmpeg/util'
  
  const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm'
  const ffmpeg = new FFmpeg()
//加载ffmpeg.wasm
  onMounted(async () => {
    try {
      await ffmpeg.load({
        coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
        wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm')
        //,
        //workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')        
      })
      ElMessage.success('FFmpeg 加载成功')
    } catch (error) {
      console.error('Failed to load FFmpeg:', error)
      ElMessage.error('FFmpeg 加载失败，请刷新页面重试')
    } finally {
      isLoading.value = false  // 加载完成，隐藏加载动画
    }    
  })

实现文件上传功能，允许用户选择需要转换的视频文件。
使用FFmpeg.wasm的API进行视频格式转换，支持MP4、WebM、MOV和AVI格式之间的相互转换。

//将用户上传的视频写入ffmpeg.wasm的文件系统中
await ffmpeg.writeFile('input.mp4', await fetchFile(inputFile.value))
//执行转换
await ffmpeg.exec(['-i', 'input.mp4','output.mov'])
//读取转换以后的视频文件
const data = await ffmpeg.readFile('output.mov')