基于Web浏览器对音视频编解码的探索和实践

系统 浏览器
FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。

​Labs 导读

音视频编解码在服务端以及客户端,已经是比较成熟的技术。但是在Web浏览器上,如何快速的对音视频进行编解码,实现音视频内容制作、自定义视频播放器等功能,且不依赖于服务端,一直是较难实现的行业痛点。

图片

1FFmpeg

FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec。FFmpeg拥有非常强大的功能包括视频采集功能、视频格式转换、视频抓图、给视频加水印等。

图片

业内绝大部分音视频编解码能力底层都是使用FFmpeg进行二次封装。FFmpeg在Linux平台下开发,采用C语言编写,并且可以在各大操作系统环境中编译运行,包括Linux、Windows、Mac OS X等。

如何让FFmpeg在浏览器Javascript运行时里运行,一直是一个困扰Web开发者的难题。

2“官配”WebAssembly

WebAssembly是由主流浏览器厂商组成的W3C社区团体制定的一个新的规范。它是一种低级的类汇编语言,具有紧凑的二进制格式,可以以接近原生的性能运行,并为诸如C / C ++等语言提供一个编译目标,以便它们可以在Web上运行。它也被设计为可以与JavaScript共存,允许两者一起工作。

WebAssembly的出现仿佛成为了FFmpeg的官配,WebAssembly+FFmpeg的组合出现在越来越多的Web应用上,用于在Web浏览器上进行轻量快速的音视频处理。

图片

图片

通过Emscripten compiler,可将C/C++项目(或任何其他语言的项目)使用 LLVM编译,编译出Javascript文件或WASM,在浏览器、 Node.js,或wasm runtimes上运行。

3应用实践

“超级编辑部”中的“视频截取上传”和“截取关键帧”功能就是基于WebAssembly+FFmpeg实现了Web端本地音视频处理。无需调用后台api,也无需网络传输,实现了音视频快速剪辑,节约了时间和网络带宽,减轻了服务器压力。

图片

图片

另外,由于FFmpeg需要进行大量的运算,为了避免运算占用浏览器JavaScript主线程,我们采用了Web Worker新开启一个独立线程,异步地运行FFmpeg,待FFmpeg运算处理结束后再将运算结果推送到Javascript主线程,从而提高了效率,并且避免了主线程阻塞。

图片

4WebCodecs

WebAssembly+FFmpeg的方案能解决几乎所有Web浏览器上的编解码需求。但是这样做,有一个很大的缺点,就是无法应用硬件(GPU)对编解码过程进行加速,只能通过软件(CPU)进行运算。这无疑是一种性能不够有益的方案,没有充分利用现代计算机的硬件优势。

为了解决这些问题,W3C WICG工作组提出了WebCodecs提案,WebCodecs API提供了一套比较底层的接口,能让开发者直接访问浏览器的编码器与解码器:

  • Video and audio decoders
  • Video and audio encoders
  • Raw video frames
  • Image decoders

图片

这些接口现在在Chrome94的测试版上面已正式可用。可以通过以下方法检测一下浏览器是否支持:

图片

接下来我们以H264的解码过程为例,展示WebCodecs对视频的解码过程:

图片

① 首先我们将回调函数和解码器参数传递给VideoDecoder构造器,创建解码器实例;

图片

② 一旦解码器被初始化,你就可以开始给它提供EncodedVideoChunk对象了。所以我们接下来需要根据视频流构造EncodedVideoChunk对象提供给解码器进行解码;

图片

③ 解码器会将解码后的数据通过我们传递的handlerFrame回调输出。如果我们是开发视频播放器的话,拿到解码后的数据:

  • 等待合适的时间,显示视频帧
  • 通过canvas.drawImage(frame)绘制帧

一旦不再需要某个帧,调用 close() 以在垃圾回收器到达之前主动释放底层内存,这将减少Web应用程序使用的平均内存量。

图片

5结语

可以看到经过越来越多的探索以及标准的制定,在Web浏览器上对音视频编解码已经逐渐走向成熟。相信通过越来越多开发者不断的探索和实践,在Web浏览器上实现媲美原生并且跨平台的视频播放器,音视频剪辑工具等将成为可能。

同时,WebCodecs搭配WebTransport、WebGPU等一系列新型的提案和Api,将给Web上的音视频处理带来更多的可能性:

① 低延时Web端直播

改善目前Web端基于http-flv/hls直播的体验,WebTransport 替代HTTP, WebCodecs替代MSE, 相信Web端直播的延迟和卡顿数据会大大改善。

② 低延时云游戏、远程桌面

目前Web端的云游戏方案大都使用WebRTC, WebRTC为通话场景设计,本身的JitterBuffer,音视频同步,渲染延迟设计会引入额外的延迟,且Web端并没有暴露出来可以控制延迟的API, 使用WebTransport + WebCodecs 可以做到更可控的极致低延迟,相信未来在云游戏、远程桌面等场景WebTransport + WebCodecs的方案会成为主流。

③ 基于Web端的视频内容制作

OBS是直播推流与视频录制常用的工具,随着我们有了WebCodecs的直接编解码能力,配合WebTransport 的浏览器推流的能力,一个Web版本的OBS所需要的能力也越来越完备,我们拭目以待一个WebOBS工具出现。

④ 元宇宙

通过WebGPU用于浏览器的3D模型渲染,配合WebCodecs对渲染帧进行编解码处理,在元宇宙的内容制作上将会有更多想象空间。

责任编辑:未丽燕 来源: 移动Labs
相关推荐

2024-02-28 08:22:07

2013-03-05 14:03:01

傲游云浏览器

2021-07-20 10:20:55

腾讯云音视频超高清

2020-12-21 06:58:12

Web安全编解码工具

2021-03-18 09:52:30

Chrome浏览器字幕功能

2021-09-23 19:25:40

AI

2023-03-03 15:40:43

抖音视频编码器

2011-06-10 17:10:32

Qt GUI 浏览器

2011-11-17 16:26:49

AndroidAdobeAIR

2023-07-28 07:31:56

FFmpeg开源

2012-05-02 15:44:00

傲游浏览器视频解码

2020-08-16 08:51:22

WEB安全网络攻击网络欺骗

2022-10-10 10:38:22

FedoraopenSUSE视频编解码

2012-08-14 17:07:13

2022-03-24 15:00:09

Harmony编解码鸿蒙

2013-11-22 09:58:36

2022-01-24 20:40:26

HarmonyOS音视频鸿蒙

2020-09-27 10:40:06

音视频即构科技开源中国

2023-02-14 07:49:34

ChatGPT浏览器Bing

2011-06-21 10:06:48

点赞
收藏

51CTO技术栈公众号