限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

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

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

关注

评论 1 条评论

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

dart系列之:dart语言中的特殊操作符

程序那些事

flutter dart 程序那些事 11月日更

springboot多数据源配合docker部署mysql主从实现读写分离

Java 程序员 后端

最佳实践|放弃 Ceph,Salesforce 使用 Apache BookKeeper 在云中实现最强存储

Apache Pulsar

开源 云原生 存储系统 Apache Pulsar 消息系统 Apache BookKeeper

Springboot整合ActiveMQ(Queue和Topic两种模式),Java开发者跳槽指

Java 程序员 后端

Springboot整合Mybatis增删查改、连接MYSQL数据库及配置druid连接池

Java 程序员 后端

SpringBoot整合Thymeleaf模板,java技术核心卷二

Java 程序员 后端

springboot中如何使用拦截器,Javaweb资料视频

Java 程序员 后端

Springboot快速整合JPA实现增删查改,linux系统架构和应用技巧

Java 程序员 后端

SpringBoot整合Shiro实现权限管理,rabbitmq原理图

Java 程序员 后端

SpringBoot实战教程(3,mysql集群和主从原理

Java 程序员 后端

springBoot集成Mybatis,Java资料下载

Java 程序员 后端

SpringBoot2----拦截器和文件上传功能,源码+原理+手写框架

Java 程序员 后端

SpringBoot+Redis基本操作,实现排行榜功能(1),springmvc教程下载

Java 程序员 后端

六问六答理解ForkJoin原理

华为云开发者联盟

Java 线程 线程池 forkjoin 归并计算

Vue进阶(幺柒叁):表单元素日期校验

No Silver Bullet

Vue 表单校验 11月日更

springboot+Redis+Shiro,java编程技术高级八大类

Java 程序员 后端

SpringBoot2----数据访问,实战java虚拟机百度云

Java 程序员 后端

SpringBoot使用Aop自定义注解展示日志信息,mysqlsql性能调优的方法

Java 程序员 后端

Windows/Mac 安装、使用Python环境+jupyter notebook

老表

python入门 11月日更 Python自动化 运营学Python

springboot整合thymeleaf及常用标签的使用方法,美的java面试流程

Java 程序员 后端

SpringBoot2----Web模块的基本注解,美的java面试题

Java 程序员 后端

SpringBoot整合Shiro(完整版)(1),java企业级应用教程视频

Java 程序员 后端

SpringBoot:Shiro-整合-Redis,也不用担心用户投诉啦,java技术经理面试题

Java 程序员 后端

腾讯云原生开源生态专场在武汉召开,洞察开源云原生技术发展趋势和商业化路径

科技热闻

云原生领域再添重磅开源项目:腾讯发布 K8s 多集群管理开源项目 Clusternet

科技热闻

Springboot快速整合JPA实现增删查改(1),java教程视频下载

Java 程序员 后端

SpringBoot整合MybatisPlus实战动态SQL,java编程入门经典

Java 程序员 后端

SpringBoot+Redis基本操作,实现排行榜功能,javasql优化面试题

Java 程序员 后端

SpringBoot整合Shiro(完整版),java学习网站

Java 程序员 后端

SpringBoot系列:Spring Boot集成redis,mongodb原理书籍推荐

Java 程序员 后端

springboot入门教程和mysql数据库,java框架面试基础

Java 程序员 后端

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