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

在线体验地址: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,我开发了一个纯前端的视频格式转换工具。以下是开发过程的主要步骤:

  1. 使用Vitepress搭建项目框架,利用Element Plus组件库构建用户界面。

  2. 集成FFmpeg.wasm,实现在浏览器中加载FFmpeg核心功能。

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

typescript 复制代码
  //引入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  // 加载完成,隐藏加载动画
    }    
  })
    
  1. 实现文件上传功能,允许用户选择需要转换的视频文件。
  2. 使用FFmpeg.wasm的API进行视频格式转换,支持MP4、WebM、MOV和AVI格式之间的相互转换。
typescript 复制代码
//将用户上传的视频写入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')
  1. 添加进度条显示转换进度,提升用户体验。
  2. 实现转换后视频的下载功能。

注意事项

值得注意的是,当前FFmpeg.wasm的多线程版本存在一些稳定性问题。因此,本工具仅使用了单线程版本,这可能导致转换过程相对较慢,特别是对于大文件或复杂的转换任务。期待FFmpeg.wasm多线程版本在未来能够稳定,以显著提升转换效率。

尽管如此,这个工具仍然展示了WebAssembly和FFmpeg.wasm在前端开发中的巨大潜力。它为用户提供了一种便捷的方式来进行视频格式转换,无需依赖服务器端处理,完全在浏览器中完成所有操作。

随着WebAssembly和相关技术的不断进步,期待看到更多令人兴奋的纯前端应用出现,进一步模糊前后端的界限,为用户带来更加丰富和高效的Web体验。

相关推荐
因我你好久不见35 分钟前
springboot java ffmpeg 视频压缩、提取视频帧图片、获取视频分辨率
java·spring boot·ffmpeg
HyaCinth7 小时前
Tauri+MuPDF 实现 pdf 文件裁剪,侄子再也不用等打印试卷了🤓
前端·javascript·webassembly
cuijiecheng20188 小时前
音视频入门基础:MPEG2-TS专题(21)——FFmpeg源码中,获取TS流的视频信息的实现
ffmpeg·音视频
cuijiecheng20189 小时前
音视频入门基础:AAC专题(13)——FFmpeg源码中,获取ADTS格式的AAC裸流音频信息的实现
ffmpeg·音视频·aac
流氓也是种气质 _Cookie21 小时前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app
网络安全queen1 天前
网络安全-企业环境渗透2-wordpress任意文件读&&FFmpeg任意文件读
安全·web安全·ffmpeg
yerennuo1 天前
FFmpeg库之ffmpeg
qt·ffmpeg
韩曙亮1 天前
【FFmpeg】解封装 ① ( 封装与解封装流程 | 解封装函数简介 | 查找码流标号和码流参数信息 | 使用 MediaInfo 分析视频文件 )
ffmpeg·音视频·视频流·mediainfo·解封装·码流
yerennuo1 天前
FFmpeg 框架简介和文件解复用
ffmpeg
悠着,大嘟嘟1 天前
FFmpeg 视频解码详解
ffmpeg·音视频