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

阅读数:2622 2019 年 9 月 5 日 08:00

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

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

评论

发布