如何在web浏览器中使用ffmpeg进行音视频转码，以avi转码成mp4为例

太过爱你忘了你带给我的痛 2022-10-31 00:51 352阅读 0赞

> [一篇文章全面了解WebAssembly！！！以及如何把c/c++编译成WebAssembly，并在浏览器网页中加载运行WebAssembly][WebAssembly_c_c_WebAssembly_WebAssembly]

## 前言 ##

ffmpeg是世界最著名最流行的基于c语言开发的音视频库。除了博主写的javacv专栏讲了java如何调用ffmpeg外，基于现代浏览器的WebAssembly技术，使得我们在浏览器上也可以调用ffmpeg。废话少说，让我们一起来试试如何在浏览器上使用ffmpeg来处理音视频吧。  
本章以视频avi视频转码成mp4为例。

# ffmpeg.wasm说明 #

ffmpeg.wasm是FFmpeg的纯Webassembly/Javascript端口。它可以在浏览器内部进行视频和音频录制，转码和传输。

ffmpeg.wasm项目维护地址：https://github.com/ffmpegwasm/ffmpeg.wasm

# 如何在浏览器中引用ffmpeg库 #

代码示例：

# 如何在浏览器中运行ffmpeg #

## 浏览器中使用ffmpeg简单示例： ##

const ffmpeg = createFFmpeg({ 
      corePath: 'https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.js',
    });

## 浏览器中使用ffmpeg进行视频转码 ##

ffmpeg.wasm提供了易于使用的API，只需要很少的代码就可以完成转码流程。

avi转mp4示例：

> 需要注意的是，目前ffmpeg.wasm的input文件只支持最大2GB大小的视频文件

<html>
      <head>
        <script src="/dist/ffmpeg.dev.js"></script>
        <style> html, body { margin: 0; width: 100%; height: 100% } body { display: flex; flex-direction: column; align-items: center; } </style>
      </head>
      <body>
        <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
        <video id="output-video" controls></video><br/>
        <input type="file" id="uploader">
        <p id="message"></p>
        <script> const { createFFmpeg, fetchFile } = FFmpeg; const ffmpeg = createFFmpeg({ log: true }); const transcode = async ({ target: { files } }) => { const message = document.getElementById('message'); const { name } = files[0]; message.innerHTML = 'Loading ffmpeg-core.js'; await ffmpeg.load(); ffmpeg.FS('writeFile', name, await fetchFile(files[0])); message.innerHTML = 'Start transcoding'; await ffmpeg.run('-i', name, 'output.mp4'); message.innerHTML = 'Complete transcoding'; const data = ffmpeg.FS('readFile', 'output.mp4'); const video = document.getElementById('output-video'); video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' })); } const elm = document.getElementById('uploader'); elm.addEventListener('change', transcode); </script>
      </body>
    </html>

可以看到ffmpeg在浏览器中提供的api基本上与在桌面上以命令行方式运行ffmpeg命令完全相同的用法，可以很快上手。

# Webassembly-ffmpeg的api手册参考 #

https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/docs/api.md

基于浏览器上的ffmpeg，我们可以在浏览器上实现更加复杂的音视频操作，在浏览器上进行音视频编辑和音视频解码不再是白日梦。

[WebAssembly_c_c_WebAssembly_WebAssembly]: https://eguid.blog.csdn.net/article/details/113883384