Merge branch 'writing' into blog

blog/_posts/fe/google-io-webcodecs-opfs/index.md

@@ -0,0 +1,86 @@
+---
+tags:
+  - WebAV
+  - WebCodecs
+  - OPFS
+date: 2024-08-13
+---
+
+# Google IO 分享 WebCodecs、OPFS 文字版
+
+## 背景
+
+2024 北京 Google I/O 邀请我参加合作者开发者论坛，主题是 "Build powerful Web App"；
+
+笔者近期在公司项目中实践 [WebCodecs][3]，对应的开源项目是 [WebAV][1]，在 Web 音视频领域算是相对前沿的探索；
+
+本文主要分享基于 WebCodecs、OPFS 实现的视频剪辑产品，探讨这些 API 还有哪些应用场景；  
+Web 开发者入门音视频可以可阅读笔者的[系列文章](/tag/WebAV)，想了解纯网页视频剪辑的技术实现原理可[订阅该博客](/subscribe.html)，大概一两个月后更新。
+
+_分享是以交流采访形式进行的_
+
+## 开场
+
+_主持人开场介绍，提了一下我的另一篇文章 [Web 端实时防挡脸弹幕（基于机器学习）][2]，因为本次 Google I/O 主题分享中也引用了这个案例。_
+
+## 问：B 站在近来的 Web 前沿技术的探索有哪些新发现吗？
+
+我在 B 站主要做 Web 音视频相关的业务，也一直在探索如何结合新技术与业务场景，提供更好的用户体验。
+
+近期主要在项目中探索实践 WebCodecs，WebCodecs 是浏览器开放的编解码 API，Web 开发者借助这个 API 就能在浏览器中创建、编辑音视频文件了，非常贴近 B 站的业务方向。
+
+## 问：为什么会选择 WebCodecs, 有什么业务背景？
+
+在直播场景中，许多主播在直播结束后会将视频发布出去，方便错过本场直播的粉丝，未来也能看到直播内容；  
+在发布直播录制视频前，经常会需要对视频进行简单剪辑，比如裁剪出精彩片段。
+
+当前的剪辑产品有两种：  
+一种是让用户在网页中操作，将数据同步到服务器，在服务器中处理音视频文件；  
+另一种是让用户下载 APP，在 APP 中剪辑音视频文件。
+
+因为我们的产品设计相对轻量，想寻找更简单的技术实现方案，所以尝试了 WebCodecs。
+
+## 问：为什么选择 WebCodecs, 有什么优势吗？
+
+主要有三个优点
+
+1. 用户使用便捷，纯网页实现无需额外下载 APP
+2. 技术方案简单，只需要少量 Web 开发者即可完成核心剪辑能力，无需跨端协同
+3. 节省成本，音视频处理需要消耗大量的计算资源，基于 WebCodecs 的方案计算是在端测浏览器中完成的，可以节省大量服务器运行和维护成本
+
+总结来说是结合了当前两种剪辑产品实现的共同优点。
+
+## 为了能让大家直观看到效果，准备了 DEMO Video
+
+<video src="./google-io-demo.mp4" controls style="width: 100%;"></video>
+
+_旁白大概介绍了演示的功能_
+
+1. 添加音视频素材、文字
+2. 调整文字的基本属性，移动、缩放素材
+3. 裁剪掉不想要的片段
+4. 在纯网页中合成导出剪辑后的视频
+
+## 问：视频中有与本地文件的访问和交互，能否简单介绍下？
+
+这里需要提到另一个 API —— OPFS，中文名是“私有源文件系统”；  
+相当于浏览器给每个网站开辟了一个私有的存储空间，Web 开发者借助这个 API 在私有空间中创建、读写文件，不需要用户用户授权，相比读写用户空间的文件性能也会更好一些。
+
+在剪辑场景中，音视频文件体积往往都比较大，几百兆甚至几 GB，全部加载到内存容易导致溢出或严重拉低性能；  
+使用 OPFS API 可实现按需读取、用完释放，大幅降低内存占用。
+
+## 问：前面提到了 WebCodecs、OPFS 两个技术点，能否应用到其他场景，启发其他开发者？
+
+WebCodecs、OPFS 都是相对底层的 API，应用场景肯定不只是音视频剪辑；  
+像云游戏、远程会议、在线的代码编辑器等等 都用得到；  
+特别是 OPFS 有更广泛的适应性，因为它是一个通用的文件系统 API，借助 OPFS 在纯网页中实现 PhotoShop 这种传统的大型桌面软件会更加简单。
+
+## 附录
+
+- [WebAV][1] 用于在浏览器中创建、编辑音视频文件的 SDK
+- [Web 端实时防挡脸弹幕（基于机器学习）][2]
+- [WebCodecs API][3]
+
+[1]: https://github.com/bilibili/WebAV/
+[2]: https://hughfenghen.github.io/posts/2023/06/21/body-mask-danmaku/
+[3]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebCodecs_API

blog/_posts/fe/opfs-tools-tweet/index.md

@@ -1,6 +1,7 @@
 ---
 tags:
   - Web
+  - OPFS
 date: 2024-03-06
 ---
 

blog/_posts/fe/web-storage-and-opfs/index.md

@@ -1,6 +1,7 @@
 ---
 tags:
   - Web
+  - OPFS
 date: 2024-03-14
 ---
 

blog/_posts/webav/webcodecs-codec-string-explain/index.md

@@ -2,6 +2,7 @@
 tags:
   - 音视频
   - WebCodecs
+  - WebAV
 date: 2024-05-11
 ---
 

notes/webav-video-editor/index.md

@@ -0,0 +1,177 @@
+---
+tags:
+  - 音视频
+  - WebCodecs
+  - WebAV
+date: 2024-07-09
+---
+
+# 纯 Web 实现视频剪辑
+
+## 前言
+
+WebCodecs API 为 Web 平台提供了音视频编解码能力，因此在 Web 平台（网页、Electron）上实现高效、专业的视频剪辑成品成为可能。
+
+<!-- link -->
+
+读者可通过笔者的[系列文章][1]，了解 Webcodecs API 和 Web 音视频基础知识。
+
+## 业务背景 & 方案分析
+
+为了解决主播投稿场景中，需要对直播视频进行简单编辑的诉求，我们需要开发一款轻量视频剪辑产品。
+让用户能在线上完成 直播 - 编辑 - 投稿 流程。
+
+<!-- 其他产品 -->
+<!-- 分析主流直播平台，剪辑功能 -->
+
+现有的方案关于视频处理的实现
+
+<!-- 现有剪辑技术方案 -->
+
+|        | 云端 | ffmpeg.wasm | Webcodecs |
+| ------ | ---- | ----------- | --------- |
+| 成本   | 差   | 优          | 优        |
+| 生态   | 优   | 中          | 差        |
+| 扩展性 | 中   | 差          | 优        |
+| 兼容性 | 优   | 优          | 差        |
+| 性能   | 中   | 差          | 优？      |
+
+ffmpeg -i sintel-2048-surround.mp4 -vf "drawtext=text='Test Text':fontcolor=white:fontsize=24:x=(w-text_w)/2:y=(h-text_h)/2" -codec:a copy output.mp4
+4:30, 3.3x
+
+<!-- 性能对比 1080P，其他产品 -->
+
+如题，我们选择了 WebCodecs（纯 Web）
+
+### 方案分析
+
+Webcodecs 方案在**成本与扩展性**方面有明显的优势，生态成熟度、兼容性则不如其他两个方案；  
+云端方案是当前主流选择，如果项目预算足够正好可以与 WebCodecs 互补；  
+ffmpeg.wasm 因性能太差，无法应用。
+
+**Webcodecs 方案**
+
+- 成本：只需要少量 Web 开发即可完成前端剪辑功能，节省开发成本的同时，降低了技术复杂性，且不需要服务器运行、维护成本
+- 扩展性：能轻松与 Canvas、WebAudio 配合，实现自定义功能
+- 生态成熟度：没有直接可用的转场、滤镜、特效等功能，支持的封装格式有限
+- 兼容性：Chrome/Edge 102+
+
+结合产品定位（轻量剪辑工具）与用户特征（主播），对缺点包容性较高，且缺点并非硬性阻碍
+
+- 生态不成熟并非能力限制，所以是开发成本问题，已有功能已能满足当前产品的需要
+- 兼容性其实是时间问题；当前做好提示，引导用户升级浏览器版本即可
+
+## 功能分析
+
+<!-- 产品截图 -->
+
+开发一个剪辑产品，只需要三个步骤
+
+1. 实现素材管理模块
+2. 实现画布模块
+3. 实现时间轴模块
+
+每个模块下都包含许多小功能，比如获取封面、预览播放、分割素材，最终都可以拆解成以下基础能力
+
+- 素材加载、存储
+- 素材解析
+- 视频寻帧、遍历帧
+- 原始图像、音频数据处理
+- 素材空间、时间属性设置
+
+接下来介绍这些基础能力的实现原理，相信认真阅读完的读者，从零实现一个纯 Web 剪辑产品也并非难事。
+
+## 基础能力实现
+
+<!-- 流程图 -->
+
+### 素材加载、存储
+
+### 素材解析
+
+音视频原始二进制数据量非常庞大，为了方便存储、在网络中传播，需要将原始数据压缩、封装成常见的音视频文件。
+音视频文件的构建过程是这样的：
+
+1. 原始图像帧压缩成 Chunk
+2. 多个 Chunk 成组
+3. 多个 Chunk 组再加上描述信息，构成音视频文件
+
+<!-- 示意图 -->
+
+音视频数据处理的第一步就是解析文件，目的是得到音视频原始数据，反向构建过程即可
+
+- 视频：视频文件 -> 解封装 -> 解码 -> 原始数据
+  - 使用第三方库（如 mp4box.js）解封装视频文件，得到 Chunk
+  - WebCodecs API 解码 Chunk 得到原始数据 (VideoFrame, AudioData)
+- 音频：`AudioContext.decodeAudioData` 解码音频文件即可得到原始音频数据
+
+了解更多详情可阅读[在浏览器中解析视频][3]
+
+### 视频寻帧、遍历帧
+
+寻帧、遍历帧是音视频处理的基础，
+
+了解更多详情可阅读[视频截帧][4]
+
+### 图像处理
+
+### 空间、时间属性设置
+
+---
+
+1.  素材加载（粗剪）
+2.  封面
+3.  缓存
+    1. 调整素材位置、缩放、旋转
+4.  预览播放
+    1. 调整素材时间
+5.  缩略图
+6.  分割素材
+
+<!-- 编解码流程图片 -->
+
+拆解功能，映射到能力
+
+## 数据处理流程
+
+## 基础能力
+
+解析文件是第一步，
+寻帧是核心
+
+基础能力实现原理
+
+WebAV
+
+方案选择参考 [ffcreator][2] 的总结
+
+> 大多数视频处理通常离不开 FFmpeg 这个库，虽然 FFmpeg 在视频处理方面具有十分强大的功能。 但是在处理精细的动画效果方面 FFmpeg 就显得力不从心，并且它的使用也很不方便，需要开发去拼接大段的命令行参数。
+
+[1]: https://hughfenghen.github.io/tag/WebAV/
+[2]: https://tnfe.github.io/FFCreator/#/README?id=原理简介
+[3]: https://hughfenghen.github.io/posts/2023/07/23/webav-2-parse-video/
+[4]: https://www.bilibili.com/read/cv30358687/
+
+<!-- 跨平台：支持在 Edge、Chrome 浏览器，以及 Electron 中运行
+体积小：约 50kb（MINIFIED + GZIPPED, 未 tree-shaking） -->
+
+<!-- 接下来剪辑产品主要功能是如何实现的， -->
+
+若读者想了解能力 关于基础能力
+
+- 纯 Web 视频剪辑原理
+  - 业务背景、方案调研分析
+    - 方案对比：服务端方案、浏览器方案
+      - 维度：生态成熟度，扩展灵活性，兼容性，开发成本（方案复杂度），运行成本
+      - 结合 用户特征（主播）、产品特性（轻量）
+  - Web 音视频数据处理流程
+    - 视频 - 帧（图像） - 处理（canvas/WebGL） - 新帧 - 视频
+    - 音频 - PCM - 处理（WebAudio） - 新 PCM - 音频
+  - 基础能力
+    - 加载、解析视频
+    - 遍历帧、寻帧
+    - 设置素材空间、时间属性
+    - 图像处理、音频处理
+  - 主要功能原理：预览播放、素材管理、时间轴
+  - 其他功能原理：贴纸、滤镜、转场、特效
+  - 边界 case