笔者开源 WebAV 已经一年半，还写了系列文章帮助初学者入门 Web 音视频。 之前一直隐隐担心在 Web 平台处理音视频与 Native APP 会有明显性能差距，因为 WebCodecs API 毕竟被浏览器代理了一层，且一些数据处理需要 js 配合，不确定有多大的性能损耗。 相信刚接触 WebCodecs 的读者也非常关心它的性能表现如何。 ...
笔者开源 WebAV 已经一年半，还写了系列文章帮助初学者入门 Web 音视频。 之前一直隐隐担心在 Web 平台处理音视频与 Native APP 会有明显性能差距，因为 WebCodecs API 毕竟被浏览器代理了一层，且一些数据处理需要 js 配合，不确定有多大的性能损耗。 相信刚接触 WebCodecs 的读者也非常关心它的性能表现如何。 ...
前言 大部分程序员，想必都有会一个常用的抓包代理工具； 但在座的各位，可曾见过这样一款集成在 Web 应用中的代理工具？ 它是明显区别于传统代理工具的，有以下特性： 零安装，零配置，Web 点击即用、APP 扫码即用；_（不 ...
文件系统是往往是构建大型软件的基石之一，很长一段时间 Web 平台因缺失成熟的文件系统成为构建大型软件的阻碍，如今 OPFS 可弥补这一缺憾。 本文介绍 OPFS 背景和基本使用方法、使用过程中的注意事项，及如何配合笔者开源的 opfs-tools、opfs-tools-explorer 两个项目，充分发挥 OPFS 的性能与开发效率。 Web 存储 A ...
文件系统是许多领域程序的基石，所有通用编程语言都会内置完备的文件系统 API。 Web 很长一段时间没有提供完善的访问文件系统的规范，使得需要高频读写文件、大文件处理软件在 Web 端都会受到一些限制，比如音视频剪辑、游戏、数据库等等。 之前在浏览器中实现视频裁剪、截帧等相关功能时，发现缺少基本的操作文件的 API，比如读写、移动、复制文件。 而 [OPFS] ...
拦截的价值 > 计算机科学领域的任何问题都可以通过增加一个中间层来解决。 —— Butler Lampson 如果系统的控制权、代码完全被掌控，很容易添加中间层； 现实情况我们往往无法控制系统的所有环节，所以需要使用一些 “非常规”（拦截） 手段来增加中间层。 拦截的方法 拦截/覆写 浏览器 API 最常见的场景有通过拦截 console ...
Web 音视频目录 前序章节介绍了如何在浏览器中解析、创建视频，以及给视频添加一些自定义素材（图片、音频、文字...）； 本章介绍如何给图像素材加特效、加动画，实现转场、移动水印、图像滤镜美化等功能。 你可以跳过原理介绍，直接查看 WebAV 示例 素材动画 在视频制作中实现动画跟其他场景略有不同，因为视频 ...
Web 音视频目录 个人回顾 本系列更新至今，持续了一个月时间，内容可以总结为音频、视频数据的 解析 - 处理 - 合成，在浏览器中比较粗粒度地实现音视频编辑的主要环节，差不多是把 WebAV 项目的原理讲完了。 讲解的知识非常浅，目标读者是准备在 Web 平台进行音视频开发的新手； 这是我第一次进行高频率技术写作，将一 ...
Web 音视频目录 经过前序章节的介绍，读者能大致了解如何在播放器中解析、创建视频； 本章介绍何在浏览器中合成视频，这是视频编辑中最基础的功能。 你可以跳过原理介绍，直接查看 WebAV 合成视频示例 在视频上叠加素材 常见的素材有：视频、音频、图片、文字 [在浏览器中创建视频](/posts/2 ...
Web 音视频目录 为什么单独介绍音频处理? 网络上缺乏音频处理的资料，绝大多数示例都是针对视频而略过音频，很多人在网上寻找音频处理的示例 对前端开发者来说，音频处理相对视频略微复杂一些 所以，本文专门针对音频数据，汇总讲解采集-处理-编码-封装全过程，帮助初学者入门。  { const match = time.match(/(\d{2}):(\d{2}):(\d{2}),(\d{3})/) ...