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
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！