写点什么

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

  • 2019-09-05
  • 本文字数:990 字

    阅读完需:约 3 分钟

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


2019-09-05 08:007351
用户头像

发布了 391 篇内容, 共 141.8 次阅读, 收获喜欢 257 次。

关注

评论 1 条评论

发布
用户头像
赞,最近正好在研究这个
2020-02-23 16:25
回复
没有更多了
发现更多内容

为什么亚马逊轻量级服务器这么受欢迎

在下小吉.

服务器 轻量级服务器 亚马逊

2023年微软开源八个人工智能项目

树上有只程序猿

人工智能 微软 开源

上海站报名启动! 2023年开源产业生态大会OpenHarmony生态分论坛

OpenHarmony开发者

OpenHarmony

列举数据库缓存使用场景实例和命令速查表

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟

构建高效数据流转的 ETL 系统:数据库 + Serverless 函数计算的最佳实践

Serverless Devs

云计算 serverles 负载 函数计算

免费获取GPT-4的五种工具

互联网工科生

人工智能 GPT-4

浪潮云洲基于QID技术的"师旷"前装固件成功首发

财见

HarmonyOS设备管理开发:USB服务开发指导

HarmonyOS开发者

HarmonyOS

全面预算管理,帮助企业财务团队冲破市场挑战

智达方通

全面预算管理 财务团队

详解CCE服务:一站式告警配置和云原生日志视图

华为云开发者联盟

云原生 后端 华为云 华为云开发者联盟 华为云CCE容器服

首个“全4K”运动会,上云!

天翼云开发者社区

云计算 大数据 云服务

数字先锋| 雪域高原一朵“云”,天翼云助力青海打造省级融媒云平台

天翼云开发者社区

云计算 大数据 5G

数字先锋| “翼”键上云,开启智慧医疗新时代!

天翼云开发者社区

人工智能 云计算 大数据

【论文解读】在上下文中学习创建任务向量

合合技术团队

人工智能 LLM ICL

平台工程指南:TheNewStack 发布的免费电子书

杨振涛

HashiCorp 平台工程 平台工程社区 PECommunity Platform Engineering

教你如何防止数据被异常篡改,并复原数据

秃头小帅oi

程序员 前端 低代码 数据异常

Web3钱包开发:解锁未来投资利润丰厚的机会

区块链软件开发推广运营

dapp开发 区块链开发 链游开发 NFT开发 公链开发

Video Renderer:高性能移动Web端视频编辑器_大前端_Guy Nesher_InfoQ精选文章