专栏首页eguid开源技术分享如何在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库

代码示例:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用ffmpeg 提取MP3

    :现在有个视频video.avi,有个音频 audio.mp3,将其合并成output.avi

    py3study
  • 快速学习-FFmpeg 的基本使用

    详情参考 :https://baike.baidu.com/item/%E8%A7%86%E9%A2%91%E7%BC%96%E7%A0%81/839038 ...

    cwl_java
  • 无惧FFmpeg的高冷美艳:8条音视频命令,让你变身短视频UP达人!

    FFmpeg是一个世界著名的命令行工具,它提供跨平台的运行环境,用于流式传输、录制音频/视频数据,并将其转换为不同的媒体格式。

    程序员小助手
  • Electron 低延迟视频流播放方案探索

    去年最后一篇文章介绍了我们的 Electron 桌面客户端的一些优化措施,这篇文章也跟我们正在开发的 Electron 客户端有一定关系。最近我们正在预研在 E...

    _sx_
  • FFmpeg使用手册 - FFmpeg 的基本组成

    1 FFmpeg 的基本组成 FFmpeg 的基本组成包含Format、Codec、Filter、Devices、Utils等,结构如图:

    用户3765803
  • 探索FFmpeg

    2015年,Michael Nidermayer移植了大量的代码到FFmpeg中,并辞职,希望两个项目可以共同发展,若能合并则更好

    Noneplus
  • 通过WebAssembly在移动端解码H.265

    随着音视频业务的快速发展,作为前端工程师,我们团队也逐步深入到音视频编解码领域,涉及到流媒体技术中的文本、图形、图像、音频和视频多种理论知识的学习,并有机会大规...

    LiveVideoStack
  • FFMPEG Mac 命令行

    developerbfl
  • java-FFmpeg(一) 实现视频的转码和截图功能

    FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件)。它提供了录制、转换以及流化音视频的完整解决方...

    生活创客

扫码关注云+社区

领取腾讯云代金券