如何在web浏览器中使用ffmpeg进行音视频转码，以avi转码成mp4为例 |
您所在的位置：网站首页 › 如何进行转码申请 › 如何在web浏览器中使用ffmpeg进行音视频转码，以avi转码成mp4为例 |
|
一篇文章全面了解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库代码示例： const { createFFmpeg } = FFmpeg; ... 如何在浏览器中运行ffmpeg 浏览器中使用ffmpeg简单示例： const ffmpeg = createFFmpeg({ corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js', }); 浏览器中使用ffmpeg进行视频转码ffmpeg.wasm提供了易于使用的API，只需要很少的代码就可以完成转码流程。 avi转mp4示例： 需要注意的是，目前ffmpeg.wasm的input文件只支持最大2GB大小的视频文件 html, body { margin: 0; width: 100%; height: 100% } body { display: flex; flex-direction: column; align-items: center; } Upload a video to transcode to mp4 (x264) and play! 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);可以看到ffmpeg在浏览器中提供的api基本上与在桌面上以命令行方式运行ffmpeg命令完全相同的用法，可以很快上手。 Webassembly-ffmpeg的api手册参考https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/docs/api.md 基于浏览器上的ffmpeg，我们可以在浏览器上实现更加复杂的音视频操作，在浏览器上进行音视频编辑和音视频解码不再是白日梦。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |