Video Renderer是一款针对移动Web应用开发的高性能视频编辑器。在2019伦敦全栈工程师大会（Fullstack London 2019 conference）上，Threads Styling公司的软件开发工程师Forbes Lindesay分享了Video Renderer的开发经验。

Canvas API支持在浏览器内编辑视频，但通常用于编辑静态图像。Canvas API 特别适合在画布内渲染单个视频帧甚至是整个视频。

下面给出的代码示例来自“video + canvas = magic”：

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,0,0,w,h);
    setTimeout(draw,20,v,c,w,h);
}

代码中定义的函数以HTML视频元素、Canvas元素、当前帧的宽度和高度为输入，调用drawImage将视频当前栈复制到Canvas元素中，进而调用setTimeout设置20毫秒超时，形成50 fps的流畅视频。

图像一旦复制到Canvas中，就可以读取并编辑单个帧。这时，每个帧可视为静态的图像，进而可直接使用Github上提供的多种Canvas图像操作软件库。

编辑器设计提供的另一项功能是分层（Layering）。对于堆栈，在当前视频之上入栈另一个视频非常易于实现，但绘图和动画的入栈并非易事。这是因为绘图和动画通常含有透明属性，该属性不支持开箱即用。

为解决上述问题，最简单的做法是在服务器添加一步额外的操作。一旦用户上载图像，就创建该图像的黑白拷贝。其中，白色表示图像中的可见部分，黑色表示图像中的透明区域。进而，编辑器使用一种“透明指引机制”，判断图像中应绘制的区域，然后剩余的区域渲染背景视频。

为在服务器端创建上述“透明指引机制”，编辑器设计上使用了FFmpeg软件库提供的FilterComplex方法。FFmpeg支持创建图像过滤器。

需指出的是，在浏览器中构建视频编辑器存在一个局限。尽管视频编辑功能在浏览器中运行得非常好，但是不推荐对压缩视频使用，尤其是在移动端。为解决这一局限，编辑器将复制服务器端编辑的视频，进而使用FFmpeg生成并压缩视频。为此，在向服务器发送原始视频的同时，会发送可重现用户已完成编辑操作的一系列指令。

这是一种临时的解决方案。未来，编辑器将考虑使用WebAssembly在浏览器中编译并运行FFmpeg。事实上，对此Github上已有实验性项目，但是该项目尚未达到可适用于生产环境。

上面介绍了Threads Styling移动端视频编辑器的关键技术。该编辑器以MIT许可方式提供在Github上。

原文链接：

High Performance Video Editing for the Mobile Web

Video Renderer：高性能移动 Web 端视频编辑器