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

WebAssembly 专栏收录该内容
2 篇文章 0 订阅

一篇文章全面了解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,我们可以在浏览器上实现更加复杂的音视频操作,在浏览器上进行音视频编辑和音视频解码不再是白日梦。

  • 2
    点赞
  • 2
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值