写点什么

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

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

关注

评论 1 条评论

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

深度学习进阶篇-预训练模型[1]:预训练分词Subword、ELMo、Transformer模型原理;结构;技巧以及应用详解

汀丶人工智能

人工智能 深度学习 预训练模型 Transformer ELMo

视频后期特效处理软件:Motion 5 最新中文激活版

真大的脸盆

Mac Mac 软件 视频特效合成 视频特效工具 特效合成

内部开发者平台|自建还是购买,企业应如何选择?

SEAL安全

平台工程 企业号 5 月 PK 榜 内部开发平台

龙博机电:90后“厂二代”,靠伙伴云零代码让中小制造业实现数字化“逆袭”

联营汇聚

Elasticsearch与Clickhouse数据存储对比 | 京东云技术团队

京东科技开发者

数据库 elasticsearch Clickhouse 企业号 5 月 PK 榜

全新一代小度智能屏X9焕新上市 正式开启预售

极客天地

基于 Log 的通用增量 Checkpoint 在美团的进展

Apache Flink

大数据 flink 实时计算

PoseiSwap IDO在Bounce上启动在即,如何参与?

鳄鱼视界

常用的表格检测识别方法——表格结构识别方法(上)

合合技术团队

人工智能 深度学习 算法 人工智能文字识别 表格检测

3天速成!阿里人私用的Netty速成实战手册,3天Github星标11.5k

Java你猿哥

Java 源码 Netty ssm netty内存管理

混沌演练实践(二)-支付加挂链路演练 | 京东云技术团队

京东科技开发者

微服务 混沌工程 混沌工程实践 企业号 5 月 PK 榜

红旗软件正式发布龙蜥社区版国产高可靠操作系统

OpenAnolis小助手

Linux 开源 龙蜥社区 红旗软件 社区版操作系统

ps vs top:CPU占用率统计的两种不同方式

极限实验室

Linux 运维 监控系统 INFINI Console

CloudQuery v2.0.0 发布 新增数据保护、数据变更、连接管理等功能

BinTools图尔兹

数据库 国产数据库 版本发布

1.5万字+30张图盘点程序员面试必会MySQL索引常见的11个知识点

Java你猿哥

Java MySQL 数据 ssm 索引

深度学习基础入门篇-序列模型:[11]:循环神经网络 RNN、长短时记忆网络LSTM、门控循环单元GRU原理和应用详解

汀丶人工智能

人工智能 深度学习 RNN LSTM GRU

Scrum的三个工件(产品Backlog、Sprint Backlog、产品增量 )

顿顿顿

Scrum 敏捷 敏捷开发管理 敏捷开发管理工具

最高奖金100万!第二届广州·琶洲算法大赛火热报名中

飞桨PaddlePaddle

百度飞桨 算法大赛

PoseiSwap IDO在Bounce上启动在即,如何参与?

西柚子

WorkPlus AI助理 | 将企业业务场景与ChatGPT结合

BeeWorks

云图说丨初识商标注册服务

华为云开发者联盟

云计算 后端 华为云 华为云开发者联盟 企业号 5 月 PK 榜

有哪些好用的企业即时通讯软件值得推荐?

BeeWorks

直击灵魂!美团大牛手撸并发原理笔记,由浅入深剖析JDK源码

Java 并发编程 多线程 jdk源码

企业研发效能度量利器,华为云发布CodeArts Board看板服务

华为云开发者联盟

云计算 后端 华为云 华为云开发者联盟 企业号 5 月 PK 榜

2023年,Flutter3.10版本的变化有哪些?

没有用户名丶

小程序容器

Flutter三棵树系列之详解各种Key | 京东云技术团队

京东科技开发者

flutter key 企业号 5 月 PK 榜 localkey

浅谈财务共享未来发展趋势

用友BIP

业财融合 财务共享

以敏捷性为目标,构建良好企业生态

智达方通

数据驱动 数据孤岛 智达方通 全面预算管理 数据分析系统

SpringBoot + Docker 实现一次构建到处运行

Java你猿哥

Java Docker Spring Boot ssm 容器化部署

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