一篇文章全面了解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库
代码示例：
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script><script>
const { createFFmpeg } = FFmpeg;
...</script>
如何在浏览器中运行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，我们可以在浏览器上实现更加复杂的音视频操作，在浏览器上进行音视频编辑和音视频解码不再是白日梦。