笔者开源 WebAV 已经一年半，还写了系列文章帮助初学者入门 Web 音视频。 之前一直隐隐当心在 Web 平台处理音视频会与 Native APP 有明显性能差距，因为 WebCodecs API 毕竟被浏览器代理了一层，且一些数据处理需要 js 配合，不确定有多大的性能损耗。 相信刚接触 WebCodecs 的读者也非常关心它的性能表现如何。 ...

你可以先略过下面的无聊文字，体验一番 WebCodecs 的实力 WebCodecs 是什么 WebCodecs 是一个 Web 规范，21 年 9 月份在 Chrome 94 中实现 WebCodecs 提供访问编解码能力的接口，可精细控制音视频数据 Web 音视频 API 存在什么问题 音视频技术在 Web 平台上的应用非常广泛，已有许多 Web ...

本文翻译至 WebCodecs Explainer 问题与动机 已有许多 Web API 在内部使用媒体编解码器来支持特定用途，比如: HTMLMediaElement and Media Source Extensions WebAudio (decodeAudioData) MediaRecorder WebRTC 但是还没有一种通用的方式来灵活 ...

Web 音视频目录 前序章节介绍了如何在浏览器中解析、创建视频，以及给视频添加一些自定义素材（图片、音频、文字...）； 本章介绍如何给图像素材加特效、加动画，实现转场、移动水印、图像滤镜美化等功能。 你可以跳过原理介绍，直接查看 WebAV 示例 素材动画 在视频制作中实现动画跟其他场景略有不同，因为视频 ...

Web 音视频目录 个人回顾 本系列更新至今，持续了一个月时间，内容可以总结为音频、视频数据的 解析 - 处理 - 合成，在浏览器中比较粗粒度地实现音视频编辑的主要环节，差不多是把 WebAV 项目的原理讲完了。 讲解的知识非常浅，目标读者是准备在 Web 平台进行音视频开发的新手； 这是我第一次进行高频率技术写作，将一 ...

Web 音视频目录 经过前序章节的介绍，读者能大致了解如何在播放器中解析、创建视频； 本章介绍何在浏览器中合成视频，这是视频编辑中最基础的功能。 你可以跳过原理介绍，直接查看 WebAV 合成视频示例 在视频上叠加素材 常见的素材有：视频、音频、图片、文字 [在浏览器中创建视频](/posts/2 ...

Web 音视频目录 为什么单独介绍音频处理? 网络上缺乏音频处理的资料，绝大多数示例都是针对视频而略过音频，很多人在网上寻找音频处理的示例 对前端开发者来说，音频处理相对视频略微复杂一些 所以，本文专门针对音频数据，汇总讲解采集-处理-编码-封装全过程，帮助初学者入门。 ![audio-data-flow](./audio ...

Web 音视频目录 音视频工作流程 在 WebCodecs 之前，由于编解码能力的缺失，几乎无法在纯浏览器中编辑、创建视频。 WebCodecs 补齐了编解码能力，相当于在浏览器中提供了视频创作能力。 预计 WebCodecs 将会像 HTML5 技术（Video、Audio、MSE...）一样 ...

Web 音视频目录 浏览器中已经能直接播放视频，为什么还需要手动写代码解析？ 因为，某些场景需要对视频进行更细致的处理，比如截取关键帧、提取视频中的文字、人物打码、极低延时播放视频等等。 总之，除了最单纯的视频播放外，对视频数据的一切处理都需要从解析开始。 _你可以跳过原理介绍，直接查看 [WebAV 解析 MP4 示例](#webav-视频解 ...

Web 音视频目录 阅读后续文章或开始使用 WebAV 处理音视频数据之前，需要一点点背景知识。 本篇主要简单介绍音视频最基础的知识，以及 WebCodecs 的核心 API。 视频结构 视频文件可以理解为容器包含了元数据和编码数据（压缩的音频或视频）； 不同的容器格式有各种区别，比如用不同方式组织管理元数据和编码数据。 ![视频结 ...