Tue Aug 13 2024

# 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 音视频相关的业务，也一直在探索如何结合新技术与业务场景，提供更好的用户体验。

近期主要在项目中探索实践 WebCodecs，WebCodecs 是浏览器开放的编解码 API，Web 开发者借助这个 API 就能在浏览器中创建、编辑音视频文件了，非常贴近 B 站的业务方向。

在直播场景中，许多主播在直播结束后会将视频发布出去，方便错过本场直播的粉丝，未来也能看到直播内容；
在发布直播录制视频前，经常会需要对视频进行简单剪辑，比如裁剪出精彩片段。

当前的剪辑产品有两种：
一种是让用户在网页中操作，将数据同步到服务器，在服务器中处理音视频文件；
另一种是让用户下载 APP，在 APP 中剪辑音视频文件。

因为我们的产品设计相对轻量，想寻找更简单的技术实现方案，所以尝试了 WebCodecs。

主要有三个优点

总结来说是结合了当前两种剪辑产品实现的共同优点。

旁白大概介绍了演示的功能

这里需要提到另一个 API —— OPFS，中文名是“私有源文件系统”；
相当于浏览器给每个网站开辟了一个私有的存储空间，Web 开发者借助这个 API 在私有空间中创建、读写文件，不需要用户用户授权，相比读写用户空间的文件性能也会更好一些。

在剪辑场景中，音视频文件体积往往都比较大，几百兆甚至几 GB，全部加载到内存容易导致溢出或严重拉低性能；
使用 OPFS API 可实现按需读取、用完释放，大幅降低内存占用。

WebCodecs、OPFS 都是相对底层的 API，应用场景肯定不只是音视频剪辑；
像云游戏、远程会议、在线的代码编辑器等等都用得到；
特别是 OPFS 有更广泛的适应性，因为它是一个通用的文件系统 API，借助 OPFS 在纯网页中实现 PhotoShop 这种传统的大型桌面软件会更加简单。