整理 Web 音视频相关的 API、SDK、文章、对外产品，帮助前端开发者入门/进阶音视频领域，推动音视频技术在 Web 平台的应用实践。
音视频技术在 Web 平台应用有限，资料也相对较少，Web 平台处理音视频的基础能力已具备，但未被大部分从业人员所熟知。
由于涉及的 Web API 非常多，所以先整理一份音视频相关的 API 知识图谱，降低在 Web 平台开发音视频应用的门槛；
然后，索引互联网公开的文章、工具、开源项目，目标是让前端开发初学者也能通过自学，掌握在 Web 平台开发音视频应用的基础技能。
为了不干扰阅读，侧重各个模块间的协作（数据转换）对象，过多的模块内 API 并没有列出。
有人反馈初看图谱感觉很乱，笔者已经尽量简化，若有更好的建议可以提出来。
- 注意红色高亮节点，它们是不同场景数据转换的核心对象
- 注意相同颜色的线条，它们串联某些场景下的数据转换循环
- 以关注的模块为中心，观察节点连线，就能知道数据能从哪里来（被箭头指向）、数据能到哪里去（箭头指向）
音视频文件处理
- 图中可发现使用
WebCodecs API能解析处理或合成输出音视频文件（封装/解封装需借助第三方库） - WebCodecs 最终能获得原始音（
AudioData）视（VideoFrame）频数据对象 - 若需对音视频内容进行处理（如图像滤镜或声音变调）则需参考其他可利用 API（观察箭头指向）
音频处理
- 音频处理的核心模块是
AudioContext - 观察箭头可发现，能通过网络远程加载数据、或将
html的video/audio标签作为输入源 - 处理之后将音频数据渲染到扬声器或 html 标签中
- 音频处理相关的 API 被隐藏了，这里只能看到跟
AudioNode相关，感兴趣的同学可进一步深究
低延迟音视频通信
- 低延迟通信跟
WebRTC模块相关 RTCPeerConnection下的addTrack可以发送音视频流到远端，来源可以是从摄像头、html 标签（video/canvas）捕获的流RTCPeerConnection下的getReceivers可以从远端接收流，输出到 html 标签（video/canvas）播放出来- 若发送前、接收后需要对流数据加工处理（如移除视频背景、降噪），则可利用
MediaStreamTrackProcessor, MediaStreamTrackGenerator相关 API
在 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）即可得到原始数据。
- 一般对音视频效果的加工处理是对原始数据进行变换，如滤镜、特效、声音降噪
- 一般存储、传输的是经编码（压缩）、再封装后视频文件形态；编码能超级大幅压缩原始数据的体积，封装是为了添加描述信息，方便管理、传输、播放
- 一般所说视频格式（MP4、MOV、FLV）指的是采用不同协议封装生成的视频文件
- 音视频编码（压缩）也有多种算法，最常见的有 AVC（H264）、HEVC（H265）、AV1，常见音频编解码对应的有 AAC、Opus；不同环境（浏览器、硬件、操作系统）对封装协议、编码算法可能存在兼容性问题
音视频领域还有许多名词概念，读者逐渐深入可自行搜索或咨询 ChatGPT
- 风痕的博客 Web 音视频入门系列
- 张鑫旭的博客标签 audio, video
- Waveforms：可视化、交互式探索声音的形状
- Learning Synths：可视化学习音乐合成
- Video processing with WebCodecs
- FFmpeg: A complete, cross-platform solution to record, convert and stream audio and video.
- 功能很强大、命令行参数很复杂，不会就问 ChatGPT
- MP4 inspection tool 在线解析视频文件（mp4、m4a、mov）信息
能在浏览器中运行的音视频产品。
- 剪映网页版：字节的视频剪辑产品
- Scenery.video：多人协同视频剪辑
- Video tools. Online
- 花影：在浏览器中运行的录屏工具，可用于视频课程制作、直播推流工作台；基于 WebAV 实现
笔者花名风痕，大概做了 4 年 Web 音视频相关产品，2023 年初开始重点投入 WebCodecs，看好该技术应用前景。
所以创建了当前项目，希望为 Web 音视频技术的应用与实践贡献力量。
若有纰漏，望请斧正。
此外，笔者还在积极维护 WebAV、opfs-tools 两个音视频相关项目，个人博客也会长期更新 Web 音视频相关文章。
若你对该项目的内容感兴趣，可 Star 或转发给需要的同学。
你也可以通过 issue 推荐内容（SDK、文章、工具）、提交反馈，与笔者一起完善该项目。