写点什么

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:007165
用户头像

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

关注

评论 1 条评论

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

Capture One 23 Enterprise for Mac(RAW图像编辑软件) 企业版 16.3.1.23永久激活版

mac

windows 图像处理软件 苹果mac Capture One 23

《用友企业绩效管理白皮书》要点解读之整合计划

用友BIP

企业绩效管理

如何选择一个向量数据库|Qdrant Cloud v.s. Zilliz Cloud

Zilliz

Milvus Zilliz zillizcloud qdrant

架构实战营 - 模块五作业

王朝阳

架构实战营

简单好用的Xliff文件编辑工具 Xliff Editor激活最新版

胖墩儿不胖y

Mac软件 文件编辑器

ARBT阿尔比特共识铸币模式系统开发源码搭建

l8l259l3365

重磅!百度知识增强大语言模型关键技术荣获“2023世界互联网大会领先科技奖”

飞桨PaddlePaddle

百度 互联网大会 大语言模型

对话在行人|安恒信息:通过企业数智化建设实现主营业务100%增长

用友BIP

数智化领先实践

王文京:中国智能会计将引领全球会计创新

用友BIP

智能会计

新华冶金∣打造业财深度一体化运营模式

用友BIP

有关java设置图片DPI

夜的第七章

base64 图片处理 Java’

调用API接口获取淘宝商品数据:实践指南与代码解析

Noah

BI 数据可视化平台建设(1)—交叉表组件演变实战

vivo互联网技术

架构演进 BI可视化 表格组件 交叉表

另辟蹊径者 PoseiSwap:背靠潜力叙事,构建 DeFi 理想国

大瞿科技

新手必看:Bitget Wallet 上购买 ETH 的步骤解析

鳄鱼视界

覆盖13个行业,数据分类分级标准汇编更新啦!(附下载)

极盾科技

数据分类分级

只需10分钟!ER图理论知识新手速学

职场工具箱

昇腾CANN DVPP硬件加速训练数据预处理,友好解决Host CPU预处理瓶

华为云开发者联盟

人工智能 华为云 昇腾CANN 华为云开发者联盟

PostgreSQL 技术内幕(十一)位图扫描

酷克数据HashData

All in数字化!这场大会重新定义建筑行业人才模式

用友BIP

人力资源

适用于即席查询(Ad-Hoc)的OLAP引擎

Western Panda

数据库 大数据 开源 数据分析 OLAP

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