/WebAV-KnowledgeGraph

整理(索引) Web 音视频相关的 API、SDK、文章、对外产品,帮助前端开发者入门/进阶音视频领域,推动音视频技术在 Web 平台的应用实践。

Web 音视频知识图谱

整理 Web 音视频相关的 API、SDK、文章、对外产品,帮助前端开发者入门/进阶音视频领域,推动音视频技术在 Web 平台的应用实践。

动机

音视频技术在 Web 平台应用有限,资料也相对较少,Web 平台处理音视频的基础能力已具备,但未被大部分从业人员所熟知。

由于涉及的 Web API 非常多,所以先整理一份音视频相关的 API 知识图谱,降低在 Web 平台开发音视频应用的门槛;
然后,索引互联网公开的文章、工具、开源项目,目标是让前端开发初学者也能通过自学,掌握在 Web 平台开发音视频应用的基础技能。

Web API 图谱

音视频 Web API 图谱

为了不干扰阅读,侧重各个模块间的协作(数据转换)对象,过多的模块内 API 并没有列出。
有人反馈初看图谱感觉很乱,笔者已经尽量简化,若有更好的建议可以提出来。

如何阅读图谱

  1. 注意红色高亮节点,它们是不同场景数据转换的核心对象
  2. 注意相同颜色的线条,它们串联某些场景下的数据转换循环
  3. 以关注的模块为中心,观察节点连线,就能知道数据能从哪里来(被箭头指向)、数据能到哪里去(箭头指向)

结合场景举例

音视频文件处理

  1. 图中可发现使用 WebCodecs API 能解析处理或合成输出音视频文件(封装/解封装需借助第三方库)
  2. WebCodecs 最终能获得原始音(AudioData)视(VideoFrame)频数据对象
  3. 若需对音视频内容进行处理(如图像滤镜或声音变调)则需参考其他可利用 API(观察箭头指向)

音频处理

  1. 音频处理的核心模块是 AudioContext
  2. 观察箭头可发现,能通过网络远程加载数据、或将 htmlvideo/audio 标签作为输入源
  3. 处理之后将音频数据渲染到扬声器或 html 标签中
  4. 音频处理相关的 API 被隐藏了,这里只能看到跟 AudioNode 相关,感兴趣的同学可进一步深究

低延迟音视频通信

  1. 低延迟通信跟 WebRTC 模块相关
  2. RTCPeerConnection 下的 addTrack 可以发送音视频流到远端,来源可以是从摄像头、html 标签(video/canvas)捕获的流
  3. RTCPeerConnection 下的 getReceivers 可以从远端接收流,输出到 html 标签(video/canvas)播放出来
  4. 若发送前、接收后需要对流数据加工处理(如移除视频背景、降噪),则可利用 MediaStreamTrackProcessor, MediaStreamTrackGenerator 相关 API

图谱预览

Web 音视频

SDK & DEMO 

在 Web 平台处理(合成、剪辑、导出)音视频数据开源项目。

  • WebAV: Process audio/video data in the browser using WebCodecs. 基于 WebCodecs 在浏览器中处理音视频数据。
    • 特点:支持硬件加速编解码,速度快、兼容性差,API 友好;丰富的在线可体验 DEMO
  • ffmpeg.wasm: FFmpeg for browser, powered by WebAssembly
    • 特点:FFmpeg 编译的 WASM 版,兼容性更好、速度慢;Playground
  • mp4box.js: JavaScript version of GPAC's MP4Box tool
    • js 实现的 mp4 muxer/demuxer(封装/解封装) SDK
    • 文档包含在线 DEMO,其中 inspection tool 在线解析视频文件(mp4、m4a、mov)信息,特别方便好用
  • hls.js: HLS.js is a JavaScript library that plays HLS in browsers with support for MSE. DEMO
  • howler.js: Javascript audio library for the modern web.
  • opfs-tools: A simple, high-performance, and comprehensive file system API running in the browser, built on OPFS. 在浏览器中运行的简单、高性能、完备的文件系统 API,基于 OPFS 构建。DEMO
    • 音视频开发经常需要高频读写文件或处理大型文件,可能需要 OPFS API 来提高性能、降低内存消耗。

W3C 官方 DEMO

文章

如果你是一个初学者,阅读相关资料前不妨先看看笔者的最简化总结

视频生产过程:原始数据(图像、声音波动)经编码(压缩 encode)后,再封装(mux)成视频文件;
视频解析过程:视频文件接封装(demux)后,再解码(解压 decode)即可得到原始数据。

  1. 一般对音视频效果的加工处理是对原始数据进行变换,如滤镜、特效、声音降噪
  2. 一般存储、传输的是经编码(压缩)、再封装后视频文件形态;编码能超级大幅压缩原始数据的体积,封装是为了添加描述信息,方便管理、传输、播放
  3. 一般所说视频格式(MP4、MOV、FLV)指的是采用不同协议封装生成的视频文件
  4. 音视频编码(压缩)也有多种算法,最常见的有 AVC(H264)、HEVC(H265)、AV1,常见音频编解码对应的有 AAC、Opus;不同环境(浏览器、硬件、操作系统)对封装协议、编码算法可能存在兼容性问题

音视频领域还有许多名词概念,读者逐渐深入可自行搜索或咨询 ChatGPT

文章列表

工具

  • FFmpeg: A complete, cross-platform solution to record, convert and stream audio and video.
    • 功能很强大、命令行参数很复杂,不会就问 ChatGPT
  • MP4 inspection tool 在线解析视频文件(mp4、m4a、mov)信息

产品

能在浏览器中运行的音视频产品。

后记

笔者花名风痕,大概做了 4 年 Web 音视频相关产品,2023 年初开始重点投入 WebCodecs,看好该技术应用前景。
所以创建了当前项目,希望为 Web 音视频技术的应用与实践贡献力量。
若有纰漏,望请斧正。

此外,笔者还在积极维护 WebAVopfs-tools 两个音视频相关项目,个人博客也会长期更新 Web 音视频相关文章。

若你对该项目的内容感兴趣,可 Star 或转发给需要的同学。
你也可以通过 issue 推荐内容(SDK、文章、工具)、提交反馈,与笔者一起完善该项目。