# 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, 有什么优势吗?

主要有三个优点

  1. 用户使用便捷,纯网页实现无需额外下载 APP
  2. 技术方案简单,只需要少量 Web 开发者即可完成核心剪辑能力,无需跨端协同
  3. 节省成本,音视频处理需要消耗大量的计算资源,基于 WebCodecs 的方案计算是在端测浏览器中完成的,可以节省大量服务器运行和维护成本

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

# 为了能让大家直观看到效果,准备了 DEMO Video

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

  1. 添加音视频素材、文字
  2. 调整文字的基本属性,移动、缩放素材
  3. 裁剪掉不想要的片段
  4. 在纯网页中合成导出剪辑后的视频

# 问:视频中有与本地文件的访问和交互,能否简单介绍下?

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

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

# 问:前面提到了 WebCodecs、OPFS 两个技术点,能否应用到其他场景,启发其他开发者?

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

# 附录

💗 博主正处于裸辞待业状态,欢迎 商务合作 💗

相关文章

WebAV SDK(Web 视频编辑)V1 发布

前言 WebAV 是基于 WebCodecs 构建的 SDK,用于在 Web 平台上创建/编辑视频文件。 V1 对项目来说是里程碑版本,意味着 API 已经稳定,且功能的稳定性也经过了长时间的考验,可用于生产环境。 我在 20 年加入 B 站,开始接触 Web 音视频相关的知识(Web 播放器), WebCodecs API 在 21 年发布; 我预期 WebCode ...

纯 Web 视频剪辑

前言 WebCodecs API 为 Web 平台提供了音视频编解码能力,使得在 Web 平台(网页、Electron)上实现高效、专业的视频剪辑成品成为可能。 读者可阅读笔者的入门系列文章获取更详细的信息,或直接使用 WebAV 开源项目在浏览器中创建/编辑音视频文件。 背景 & 方案 为了解决主播投稿场景中,需要对直播视频进行简单编辑的诉求, ...

WebCodecs 性能表现及优化思路

笔者开源 WebAV 已经一年半,还写了系列文章帮助初学者入门 Web 音视频。 之前一直隐隐担心在 Web 平台处理音视频与 Native APP 会有明显性能差距,因为 WebCodecs API 毕竟被浏览器代理了一层,且一些数据处理需要 js 配合,不确定有多大的性能损耗。 相信刚接触 WebCodecs 的读者也非常关心它的性能表现如何。 ...

WebCodecs 编码字符串(codec)介绍

笔者的 Web 音视频系列文章 视频播放经常会看到这样的字符串 video/mp4; codecs="avc1.4d002a",WebCodecs 编解码器初始化也需要配置 codec 参数,本文尝试简单介绍编码字符串含义。 视频编码分许多种类,每个种类还分多个版本,不同种类、版本对应的编解码算法、支持的能力(分辨率上限、色深等等)不同 ...

WebCodecs 开启 Web 音视频新篇章

你可以先略过下面的无聊文字,体验一番 WebCodecs 的实力 WebCodecs 是什么 WebCodecs 是一个 Web 规范,21 年 9 月份在 Chrome 94 中实现 WebCodecs 提供访问编解码能力的接口,可精细控制音视频数据 Web 音视频 API 存在什么问题 音视频技术在 Web 平台上的应用非常广泛,已有许多 Web ...

【译】WebCodecs 说明

本文翻译至 WebCodecs Explainer 问题与动机 已有许多 Web API 在内部使用媒体编解码器来支持特定用途,比如: HTMLMediaElement and Media Source Extensions WebAudio (decodeAudioData) MediaRecorder WebRTC 但是还没有一种通用的方式来灵活 ...

Web 音视频(六)图像素材处理

Web 音视频目录 前序章节介绍了如何在浏览器中解析、创建视频,以及给视频添加一些自定义素材(图片、音频、文字...); 本章介绍如何给图像素材加特效、加动画,实现转场、移动水印、图像滤镜美化等功能。 你可以跳过原理介绍,直接查看 WebAV 示例 素材动画 在视频制作中实现动画跟其他场景略有不同,因为视频 ...

Web 音视频(七)中期回顾

Web 音视频目录 个人回顾 本系列更新至今,持续了一个月时间,内容可以总结为音频、视频数据的 解析 - 处理 - 合成,在浏览器中比较粗粒度地实现音视频编辑的主要环节,差不多是把 WebAV 项目的原理讲完了。 讲解的知识非常浅,目标读者是准备在 Web 平台进行音视频开发的新手; 这是我第一次进行高频率技术写作,将一 ...

Web 音视频(五)在浏览器中合成视频

Web 音视频目录 经过前序章节的介绍,读者能大致了解如何在播放器中解析、创建视频; 本章介绍何在浏览器中合成视频,这是视频编辑中最基础的功能。 你可以跳过原理介绍,直接查看 WebAV 合成视频示例 在视频上叠加素材 常见的素材有:视频、音频、图片、文字 [在浏览器中创建视频](/posts/2 ...

Web 音视频(四)在浏览器中处理音频

Web 音视频目录 为什么单独介绍音频处理? 网络上缺乏音频处理的资料,绝大多数示例都是针对视频而略过音频,很多人在网上寻找音频处理的示例 对前端开发者来说,音频处理相对视频略微复杂一些 所以,本文专门针对音频数据,汇总讲解采集-处理-编码-封装全过程,帮助初学者入门。 ![audio-data-flow](./audio ...