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

# 前言

WebAV (opens new window) 是基于 WebCodecs 构建的 SDK,用于在 Web 平台上创建/编辑视频文件。

V1 对项目来说是里程碑版本,意味着 API 已经稳定,且功能的稳定性也经过了长时间的考验,可用于生产环境。

我在 20 年加入 B 站,开始接触 Web 音视频相关的知识(Web 播放器), WebCodecs API 在 21 年发布;
我预期 WebCodecs 开放的编解码能力会给 Web 平台在视频生产端(播放器是消费端)带来一些改变,但直到 23 年初仍没有看到成熟的开源项目,于是 WebAV 项目启动。

WebAV 最开始是因个人兴趣而启动,能走到现在离不开 B 站和社区的支持与贡献。

# WebAV SDK 能做什么

建议通过官方 DEMO (opens new window) 在线体验 SDK 的能力,包含视频截帧、切片、水印、字幕、合成等基础能力。

Web 平台的视频消费已经非常成熟了,Web 技术构建的视频生产工具则非常匮乏,最典型的就是视频剪辑场景;
虽然现在的 Web 技术足以构建通用的视频剪辑产品,但 PC 端的视频剪辑软件已经非常专业、成熟,在该领竞争会相对困难。

Web 平台最大的优势在于用户视角的便捷性,所以可考虑使用 WebAV 构建以下领域的产品功能

  • AI 技术如日中天,会给许多领域的生产力带来质的提升
    AI 跟 Web 平台结合紧密,所以 WebAV 可以参与 AI 在视频领域的革新,如数字人或对 AI 生成的视频片段进行处理
  • 批量视频处理;除了专业、精细的视频剪辑场景,现实中还有许多简单、粗犷、生产效率最优先的视频简单诉求
    如批量生成营销视频、视频相册、视频模板等场景
  • 视频处理小工具;现在有许多功能单一的在线视频处理小工具,如加水印、截取片段、消音、封面截帧等
    使用 WebAV 可以节省服务器成本,而不失去其便捷性,甚至还能提升用户体验

以上是个人在推广 WebAV 过程中了解到用户的使用场景,更多的场景可以结合 Web 在便捷性、跨平台、迭代效率方面的明显优势去挖掘。

# V1 的重要内容

# 功能稳定

从项目启动到 V1 发布,WebAV 已经经历了长时间面向真实用户的生产环境验证,现在发布 V1 表示对外 API 也进入稳定状态。

# 大幅简化 API

目的是降低 V1 之后出现破坏性变更的几率,也能让 API 文档 (opens new window)更简洁,降低学习成本; 目前官方站点中的所有 DEMO 都是基于十几个公开 API 实现的,因此安装依赖后,复制 DEMO 源码到你的项目几乎就能运行。

被回收的 API 基本是在 @webav/* 包内部使用,预计不会对开发者造成太大影响。

详情请看 迁移至 v1 版本 (opens new window)

# 性能优化

WebCodecs 能利用硬件加速进行编解码,WebAV 经过一系列性能优化之后性能表现有明显进步;
跟 Native 方案在部分设备上还有一些差距,虽然还有优化空间,但个人感觉性能不再是方案选择的主要考量因素了。

详情请看 WebCodecs 性能表现及优化思路 (opens new window)

# 接下来做什么

  • 优化单测
    • 提高覆盖率
    • 使用 Mock 接口或极小的视频数据代替视频文件,提升单测性能
  • 优化工作流
    • Commit 时自动格式化代码,统一风格,方便更多的贡献者参与
    • Push 前自动运行单测,提升项目质量
  • 文档/文章
    • 撰写更多的入门文章,介绍 WebAV 实现原理,帮助前端开发者入门
    • 提供英文版 API 文档
    • 提供 Issue 模板,改进 Issue 质量
  • 支持更多视频格式(mkv、webm)

期望更多的贡献者参与进来,鼓励大家反馈问题(记得提供必要信息),发起 PR 修复小 Bug、实现小功能;

对前端开发者来说,参与门槛真的不高,大概看一下本系列的入门文章 (opens new window)贡献指南 (opens new window),再加上一点点阅读源码的耐心就行。

# 最后

感谢已参与到 WebAV 的勇士 ,及请我喝奶茶的小伙伴。

也欢迎大家将 WebAV 项目分享给关注、从事 Web 音视频领域的小伙伴,给项目提供向前的动力
曝光(用户)量 x 贡献者 = 驱动力

# 附录

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

相关文章

纯 Web 视频剪辑

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

Google IO 分享 WebCodecs、OPFS 文字版

背景 2024 北京 Google I/O 邀请我参加合作者开发者论坛,主题是 "Build powerful Web App"; 笔者近期在公司项目中实践 WebCodecs,对应的开源项目是 WebAV,在 Web 音视频领域算是相对前沿的探索; 本文主要分享基于 WebCodecs、OPFS 实现的视频剪辑产品,探讨这些 API 还有哪些应用场景; W ...

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 ...