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