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

链接: https://fly63.com/article/detial/5162