Clipchamp 的视频编辑器 PWA 安装量每月增长了 97%

PWA、WebAssembly 和 ChromeOS 如何帮助网络视频编辑器为 1200 万用户提供更好的性能和更具吸引力的体验。

索伦·巴尔科
Sören Balko

97%

PWA 安装量的月度增长

2.3x

效果提升

9%

提高 PWA 用户的留存率

Clipchamp 是浏览器内在线视频编辑器,可让任何人通过视频讲述值得分享的故事。全球有超过 1200 万创作者 使用 Clipchamp 轻松编辑视频我们提供简单的视频制作解决方案,从剪裁和剪辑等直观工具到屏幕录制器等实用功能,甚至还有表情包制作工具

谁在使用 Clipchamp?

我们的用户(也就是我们所谓的日常编辑)是多元化的。无需任何专业知识也可成为 Clipchamp 的视频剪辑工具。具体而言,目前我们发现销售、支持培训和产品营销团队使用我们的摄像头和屏幕录制器快速地添加说明性内容,并添加了文字和 GIF 来增强内容吸引力。我们还看到许多小型企业在移动过程中编辑和发布社交视频。

他们面临哪些挑战?

我们深知,一开始编辑视频会让人望而生畏。人们之所以认为这很难做到,可能是因为之前使用复杂编辑软件时遇到的不愉快。相比之下,Clipchamp 则注重易用性,通过文字叠加层、库存视频和音乐、模板等提供支持。

我们发现,大多数日常编辑都不想创作电影佳作。我们经常与用户交流,并不断提醒他们工作很忙,只是想尽可能快速、轻松地将他们的故事公之于众,因此这是我们的工作重点。

开发 Clipchamp PWA

Clipchamp 致力于让人们能够通过视频讲述自己的故事。为了实现这一愿景,我们很快意识到,允许用户在制作视频项目时可以使用自己的视频片段,这一点非常重要。

这些见解为 Clipchamp 的工程团队带来了压力,迫使他们想出一种可在 Web 应用中高效处理 GB 级媒体文件的技术。考虑到网络带宽限制,我们很快就排除了传统的云端解决方案。通过零售互联网连接上传大型媒体文件时,肯定需要等待一段时间才能开始编辑,最终导致糟糕的用户体验。

这使得我们改用了完全在浏览器中的解决方案,其中所有“繁重”的视频处理工作都是使用最终用户设备上可用的硬件资源在本地完成的。我们巧妙运用 Chrome 浏览器以及 ChromeOS 平台,帮助我们克服构建浏览器内视频创作平台所面临的不可避免的挑战。

视频处理非常耗费资源,影响了计算机和存储资源。我们一开始基于 Google 的(便携式)Native Client (PNaCl) 构建了第一版 Clipchamp。在最终逐步淘汰后,PNaCl 很好地向我们的团队证明了 Web 应用可以快速且低延迟,同时仍可在最终用户硬件上运行。

后来改用 WebAssembly 后,我们很高兴看到 Chrome 领先于融合 MVP 后的功能,例如批量内存操作、线程处理和最新的固定宽度矢量运算。我们的工程团队非常期待后者,这使我们能够优化视频处理堆栈,以利用现代 CPU 上常见的 SIMD 操作。利用 Chrome 的 WebAssembly SIMD 支持,我们得以加快一些要求特别严苛的工作负载,例如 4K 视频解码和视频编码。

编码器性能(1080p,8.33 秒 @ 30 fps)。无 SIMD 卡的默认预设:25 秒。默认预设(SIMD):约 13 秒。无 SIMD 压缩预设:约 83 秒。使用 SIMD 进行压缩预设:约 33 秒。无 SIMD 卡的画质预设(新!):约 75 秒。采用 SIMD 模式的画质预设:约 30 秒。

我们之前几乎没有经验,而且我们的一位工程师只花不到一个月的时间,就成功将性能提高到了原来的 2.3 倍。虽然仍仅限 Chrome 源试用,但我们已经能够向大多数用户部署这些 SIMD 增强功能。虽然我们的用户运行的硬件设置截然不同,但我们能够确认生产环境中的性能是否匹配,而不会对失败率造成任何不利影响。

最近,我们集成了新推出的 WebCodecs API,该 API 目前正处于另一项 Chrome 源试用中提供。借助这项新功能,我们能够进一步提高在低规格硬件上进行视频解码的性能(许多热门 Chromebook 中都有提供)。

创建 PWA 后,鼓励用户采用它非常重要。与许多 Web 应用一样,我们一直注重访问的简便性,包括 Google 等社交登录功能,让用户快速进入可以编辑视频的位置,然后轻松导出视频。此外,我们还在工具栏中提升了 PWA 安装提示,并在菜单导航中提升了弹出式通知。

成果

我们的可安装 Chrome PWA 表现非常出色。我们很高兴地看到,PWA 用户的留存率比标准桌面用户高出 9%。PWA 的安装规模相当庞大,自 5 个月前推出以来,每个月都以 97% 的速度增长。而且,如前所述,WebAssembly SIMD 增强功能将性能提升了 2.3 倍。

2020 年 6 月:约 1,000 次安装。2020 年 7 月:约 5,000 次安装。2020 年 8 月:约 1.2 万次安装。2020 年 9 月:约 2 万次安装。2020 年 10 月:约 3 万次安装。
过去 6 个月内安装的 Clipchamp PWA。

未来

我们对 PWA 的参与和采用感到惊喜。我们认为 Clipchamp 用户留存率受益,因为 PWA 已安装且更易于使用。我们还发现,PWA 对于编辑器的性能更高,这使其更具吸引力,并吸引用户再次使用。

展望未来,我们非常高兴看到 ChromeOS 为更多用户带来的机会,让他们能够更轻松地处理更多事务。具体而言,我们很高兴能够使用本地操作系统在处理文件时实现一些便捷的集成。我们认为,这有助于加快我们繁忙的日常编辑的工作流程,这是我们的首要任务之一。