写点什么

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

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

关注

评论 1 条评论

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

从IBM ESB升级到RestCloud iPaaS的全面指南

RestCloud

ESB ibm ipaas 数据集成工具

AutoCAD 2024 for Mac(cad设计绘图) v2024.3中文版

Mac相关知识分享

公式中获灵感,这群研究生在云上攻克铝电解能耗难题

华为云开发者联盟

物联网 华为云 华为云开发者联盟 先锋开发者云上说 企业号2024年7月PK榜

10个JavaScript One-Liners让初学者看起来很专业

OpenTiny社区

JavaScript 开源 前端 OpenTiny

互联网不行了?程序员不吃香了?机会在哪里?

伤感汤姆布利柏

.NET 9 预览版 5 发布

EquatorCoco

.net

linux进程管理

不在线第一只蜗牛

Linux 运维

Docker Compose 一键快速部署 RocketMQ

JEECG低代码

Docker RocketMQ

小特性 大用途 —— YashanDB JDBC驱动的这些特性你都get了吗?

YashanDB

数据库 yashandb 崖山数据库

Dotnet算法与数据结构:Hashset, List对比

不在线第一只蜗牛

List 数据结构 算法

TikTok直播卡顿、封号频发?搭建TikTok直播网络解决!

Ogcloud

tiktok直播 tiktok直播专线 tiktok直播网络 tiktok直播带货 TikTok跨境直播

开源可视化报表,JimuReport 积木报表 v1.7.8 版本发布

JEECG低代码

积木报表 jimureport 报表工具

SpringSecurity安全管理

EquatorCoco

spring 安全

和鲸101计划夏令营火热进行中!北中医助阵医学数据探索,快来学习

ModelWhale

AI 数据科学 实践 Workshop 夏令营

东南亚TikTok直播专线

Ogcloud

tiktok直播 tiktok直播专线 tiktok直播网络 tiktok直播带货 TikTok跨境直播

Macs Fan Control Pro for mac(电脑风扇控制软件) v1.5.16中文版

Mac相关知识分享

Lightroom Classic 2024 for Mac(LRC2024) v13.2.0中文版

Mac相关知识分享

Flink+Paimon在阿里云大数据云原生运维数仓的实践

Apache Flink

大数据 flink paimon Apache Paimon

Java Executors类的9种创建线程池的方法及应用场景分析

快乐非自愿限量之名

Java 线程池

JeecgBoot 代码生成器使用入门

JEECG低代码

代码生成器 jeecg-boot JeecgBoot jeecg

手把手系列:小程序插件的开发与引用

FN0

小程序 小程序插件

追剧学习两不误,华为阅读暑期书单伴你乐享一夏

最新动态

DDoS攻击详解

网络安全服务

udp DDoS cc tcpip DDoS 攻击

Gartner: 全球服务器出货量上涨,浪潮信息市占率11.3%居全球前二

财见

和鲸科技荣耀入选2024 H1 「中国最具价值 AGI 创新机构 TOP 50」

ModelWhale

AI 云原生 AGI

空窗期太长?这么说就对了!

王磊

Java

软件测试学习笔记丨Allure2报告中添加附件-视频

测试人

软件测试

开发高质量体育直播软件平台的秘诀:激发用户高质量内容的生成

软件开发-梦幻运营部

百誉控股完成对Electra New Energy Vehicle Inc控股权的合并

财见

Sam Altman 新公司将打造 AI 健康教练;全新大模型架构 TTT 超越 Transformer 丨 RTE 开发者日报

声网

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