AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

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

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

关注

评论 1 条评论

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

关于MySQL日期函数你不知道的用法

不在线第一只蜗牛

MySQL 数据库 前端 日期工具

万界星空科技MES系统中的生产防错功能

万界星空科技

MES系统 mes 万界星空科技 生产管理 数字化车间

把Mybatis Generator生成的代码加上想要的注释

京东科技开发者

使用 HyBench 测试 TiDB

TiDB 社区干货传送门

性能测评 7.x 实践

数据库防水坝是什么?有什么作用?有哪些优势?

行云管家

数据库 堡垒机 数据库安全

基于 Flink 的实时数仓在曹操出行运营中的应用

Apache Flink

《高效能笔记法》读后感

凌晞

结构化思维 冰山模型

论学习方式和知识结构

凌晞

学习方法

以DataOps一体化之道,助力研发治理提质增效

鲸品堂

Data 运营商 一体化

2024年南京等保测评机构名单看这里!

行云管家

网络安全 南京 等级保护 等保测评

制造业各种管理系统介绍及集成

万界星空科技

MES系统 ERP mes 万界星空科技 万界星空科技mes

2023 年值得一读的技术文章 | NebulaGraph 技术社区

NebulaGraph

图数据库

首个!百度飞桨会客厅落地广州,打通AI应用落地的“最后一公里”

飞桨PaddlePaddle

人工智能 AI AI技术 百度飞桨 智能化

CleanShot X为什么不能识别文字?CleanShot X文字识别教程

南屿

OCR识别 CleanShot X Mac截图软件

cad2022破解版安装教程 附autocad2022注册机【Mac/win】

南屿

AutoCAD 激活版 CAD绘图软件 cad 2022安装教程 AutoCAD2022序列号

macOS Catalina for mac (macos 10.15系统)v10.15.7正式版

南屿

mac系统 苹果系统下载 macos 10.15系统

FastAPI 并发请求:打造更快的Web应用

Liam

程序员 性能优化 并发编程 后端 FastApi

全国高校计算机类课程能力提升高级研修班(2024年第一期)来了!

华为云PaaS服务小智

云计算 软件开发 华为云

每日一题:LeetCode-153. 寻找旋转排序数组中的最小值

Geek_4z9ami

面试 算法 LeetCode 二分查找 Go 语言

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