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