导读：随着挪动互联网的倒退，视频化浪潮借着5G的东风扑面而来。然而泛滥用户在进行视频化创作的过程中，被传统视频编辑器简单的性能和平缓的学习曲线劝退。为此，百度百家号业务研发团队联合用户的理论创作需要，开发出一款简略易用的在线视频编辑和公布工具——百家号在线视频编辑器。本文将粗疏地介绍这一编辑器的技术原理，架构和演进方向，并从一角揭示百度外部的技术单干与翻新机制。

前言

随着挪动互联网的疾速倒退，人们越来越习惯于在手机上观看视频内容。百家号作为手百的内容生产平台，须要为作者提供简略易用的视频编辑和公布工具。在线视频编辑器正是在这种需要下应运而生。这篇内容将粗疏地介绍百家号视频编辑器所采纳的技术。

名词解释

BOS：百度对象存储BOS（Baidu Object Storage）提供稳固、平安、高效以及高扩大存储服务

VOD：视频点播服务，本文特指百度VideoWorks（原VOD 音视频点播服务）

一、一个在线视频编辑器都要实现哪些性能？

1.1 编辑器的根底性能

咱们考察了本地视频编辑器，列举出一些视频编辑器必须要实现的性能：

素材源文件治理，加载和编辑
多轨道编辑器
拖拽操作（增加/删除素材, 增加/删除成果, 疾速剪辑, 切换轨道等）
音视频轨道拆散
素材成果（浮雕、念旧等），转场动画（淡入淡出、螺旋等），素材动画（单点缩放、模仿晃动等）
字幕编辑和嵌入
视频预览
多种格局渲染导出

1.2 在线编辑器的独特性能

一款在线视频编辑器，同样也要实现上述性能，只是具体实现上有所不同，例如：

素材治理：要实现素材源文件的上传和删除
视频预览：由前端js实现的简略预览
导出：在线视频编辑器次要为百家号公布器服务，因而不导出视频文件，而是接入视频公布流程

此外，依靠于百度和百家号技术体系，还能够实现音频转字幕，字幕合成音频，百家号图文内容转视频等额定性能。

二、如何实现一个在线视频编辑器?

2.1 后端技术选型

FFmpeg是业界最罕用的视频编解码集成框架，不仅功能强大，而且编解码效率很高。因而，后端服务采纳FFmpeg作为视频编解码底层。

2.2 FFmpeg介绍

FFmpeg是一个自由软件，能够运行音频和视频多种格局的录影、转换、流性能。蕴含了libavcodec——一个用于多个我的项目中音频和视频的解码器库，以及libavformat——一个音频与视频格式转换库。

△图 1 ffmpeg

2.2.1 FFmpeg 个性

自由软件，代码开源；
自带泛滥滤镜（插件），能满足现阶段全副业务需要；
反对第三方滤镜（插件），能满足将来业务需要；
反对自定义编译，反对动静编译，尽可能升高内存占用；
反对近程文件（http、ftp等）作为输出，缩小本地磁盘占用；
反对GPU编解码，升高CPU占用，晋升编解码速度(本业务咱时未应用GPU集群）；
语法简略，便于二次封装或组装。

2.2.2 命令行用法

△图 2 ffmpeg命令行用法

例1: ffmpeg -i in.wmv -vcodec libxvid out.mp4例2: ffmpeg -framerate 1 -t 1 -loop 1 -i "http://pic.rmb.bdstatic.com/2b18b480a1f2d15e3667e01c45dfc157.jpeg" -vcodec libx264 -pix\_fmt yuv420p -y test.mp4

2.2.3 FFmpeg滤镜根本规定

FFmpeg中的Filter（avfilter）通常翻译为过滤器/滤镜，滤镜的作用就是过滤（Filtering)）。

任何对解码后的多媒体资源进行的编辑操作均能够称作狭义上的Filtering，而进行这些操作的组件和插件，就是滤镜。

例如，音频升降调/速、视频插帧/抽帧、剪裁/截取/合并/叠加等等。

△图 3 FFmpeg转码和Filter过程

2.2.4 根底滤镜及其示意图

根底滤镜应用非常简单，只有在输出文件（及选项）和输入文件（及选项）之间，应用-vf来增加须要的滤镜即可。例如：

缩放scale（动态）

ffmpeg -i video_1080p.mp4 -vf scale=w=640:h=360 video_360p.mp4

△图 4 scale示意图

缩放平移zoompan（动静）

ffmpeg -framerate 1 -t 1 -loop 1-i "http://pic.rmb.bdstatic.com/2b18b480a1f2d15e3667e01c45dfc157.jpeg"-vf"zoompan=z='if(eq(on,0),1,if(lt(zoom,1.25),zoom+0.0005,1.25))':d=16.06*25:x='if(lt(zoom,1.25),0,(x-1))':y='if(lt(zoom,1.25),0,(y+1))':s='1024x720'" -y tmp.mp4

△图 5 zoompan示意图

含糊boxblur

ffmpeg -i tmp.mp4 -filter_complex "boxblur=luma_radius='min(h,w)/30':luma_power=2" -y boxblur.mp4  含糊虚化

△图 6 boxblur示意图

叠加overlay

ffmpeg -i tmp.mp4 -i watermark.png -filter_complex "[1:v]scale=-2:48[logo];[0:v][logo]overlay=48:48" -y watermark.mp4  左上logo

△图 7 overlay示意图

2.2.5 FFmpeg管道式语法

规定：

用[name] 来命名流
滤镜之间用 , 分隔
流之间用 ; 分隔
第i个输出命为[i-1]
第一个输出文件的视频流和音频流为[0:v] 和[0:a]
最初一个流名可省略

举例：

\-filter\_complex "    \[0:v\]split\[front\]\[back\];  //复制并拆散成front和back两条流    \[back\] //背景流            scale=1280:-2, //等比例缩放到输入宽度1280            boxblur=luma\_radius='min(h,w)/30':luma\_power=2, //含糊            crop=iw:720\[background\]; //剪裁到1280:720    \[front\]scale=-2:720\[foreground\]; //等比例缩放到输入高度720    \[background\]\[foreground\]overlay=(W-w)/2:(H-h)/2  //叠加"

△图 8 管道化滤镜流示意图

实际效果：

△图 9 管道化滤镜流执行后果

2.3 前端技术选型

前端界面应用React框架实现，疾速预览性能基于浏览器的html5音视频播放器实现，通过html标签传递调整参数给播放器，实现简略的负片、浮雕、黑白等播放成果，通过在视频上叠加动图的形式模仿转场成果。

受限于前端预览计划的性能和复杂度，前端疾速预览只能展示局部编辑成果。

2.4 前后端性能边界及交互

2.4.1 前后端性能边界

进行具体的性能开发之前，须要依据需要和技术能力特点划分前后端性能边界，例如：

前端界面实现

用户与视频编辑器的交互
视频简略预览（受限于前后端技术栈差别和应用的资源差别，预览成果与最终后果可能不尽相同）
将用户在编辑界面操作的后果转换成时间轴数据结构
...

后端服务实现

时间轴转译成FFmpeg命令
视频产出后调用视频公布流程
...

须要前后端独特实现

字幕 <==> 音频
素材上传
...

依据咱们的性能需要和前后端的性能划分，百家号在线视频编辑器的用户界面大抵划分成3个区域：

黄线内的功能区
绿线内的多轨道编辑区
红线内的疾速预览区

△图 10 百家号在线视频编辑器界面分区

2.4.2 时间轴数据结构

为了能在前后端之间进行交互，须要定义一种数据结构，这种数据结构要既便于前端多轨道编辑器的加载，批改和存储，又便于后端提取结构化数据。

咱们定义了一种时间轴数据结构，时间轴中的轨道与多轨道编辑器中的轨道一一对应：

{"timeline":{"video_track": [ //视频轨道{"start": 0.0, //开始工夫"end": 1.5, //完结工夫 = start + duration * speed"type": "video", //能够是视频video, 图片image, 转场动画transition, 黑屏blank"height": 720,"width": 1280,"in_effect": "fade_in", //入场成果"out_effect": "fade_out", //退出成果"style": "negative", // 成果: 负片,含糊,浮雕,黑白 等等"duration": 1.5, //时长"speed": 1, //播放速度"animation": "zoompan",  //视频资源的动画成果, 如镜头晃动, 平移放大等"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp4"}],"audio_track": [ //音频轨道{"start": 0.0, //开始工夫"end": 1.5, //完结工夫 = start + duration * speed"type": "video", //能够是视频video(视频音轨), 音频audio, 空白静音slience"in_effect": "fade_in", //入场成果"out_effect": "fade_out", //退出成果"style": "jazz", // 成果: 爵士, 摇滚, 人声 等等平衡器成果"duration": 1.5, //时长"speed": 1, //播放速度"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp3","auto_subtitle": true, //语音转字幕}],"subtitle": [ //字幕轨道{"start": 0.0, //开始工夫"end": 1.5, //完结工夫 = start + duration * speed"type": "video", //能够是视频video(视频音轨), 音频audio, 空白静音slience"style": "Arial,23,yellow,white", // 成果: 字体,大小,色彩,描边色彩"duration": 1.5, //时长"text": "这是一条字幕","pos_x": 100, //字幕定位"pos_y": 200,  //字幕定位"tts": true, //应用字幕合成语音}],"watermark": [ //水印,特图{"start": 0.0, //开始工夫"end": 1.5, //完结工夫 = start + duration * speed"style": "transparent", //能够是通明transparent, 负片 等成果"style_params": "0.8", //成果的具体参数, 如透明度等"duration": 1.5, //时长"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.png","pos_x": 100, //贴图定位"pos_y": 200,  //贴图定位"height": 100, //贴图高度"width": 100, //贴图宽度}]},"author_info":{}, //作者信息"extra":{}, //其余信息}

2.4.3 异步调用和轮询

当用户在实现编辑工作后，需点击"保留"按钮提交。这时前端会将多轨道编辑器内所有资源因素封装成时间轴构造传递给后端服务。后端服务接到时间轴构造后会进行转译，并调用FFmpeg进行视频编解码。

后端这一阶段的工作是计算密集型的，通常须要耗费时间轴长度2-5倍的工夫来实现视频最终合成。因而点击"保留"按钮后，前端采纳异步调用 + 定期轮询状态的形式查看后端视频合成是否实现。

2.5 后端时间轴转译流程

后面提到后端服务要对前端传递来的时间轴进行转译，转写成FFmpeg命令。

这一步的次要流程如下图所示：

△图 11 时间轴转译FFmpeg命令程图

3. 百家号在线视频编辑器的具体实现

3.1 百家号视频编辑器整体架构

△图 12 整体架构

3.2 用户界面和服务接口

目前视频编辑器提供了两种应用办法：面向最终用户的图形界面和面向开发者的服务接口。

其中图形界面集成在百家号内容创作后盾，现已对局部百家号作者凋谢，而通过接口提供的音频转码，视频合并等服务也曾经利用到了百家号线上服务当中。

3.3 业务层: 时间轴转译

在业务层中，为了隔离内外部网络申请，增加了UI层模块，用于解决来自于图形界面的视频编辑申请。Service模块是基于PHP开发的编辑器外围模块，次要作用是将图形界面和服务接口这两种类型的申请打平，将时间轴数据结构转译出可能间接执行的FFmpeg命令，并送给离线调度模块执行。

业务层Service模块在转译时次要实现了如下工作：

3.3.1 图片视频化

blur：传入视频/图片比例和尺寸可能与最终输入后果不统一，如手机竖屏拍摄的视频、网上下载的图片等等。之前业内对于不同比例的视频，要么留黑边，要么部分裁剪。随着手机短视频的衰亡，当初风行的做法是如图13所示,，用含糊放大的背景图代替黑边。
zoompan：对于传入的动态图片，通常要将图片静止起来，使画面不至于太死板，取得更好的展示成果。

3.3.2 视频连贯及转场

concat：将传入的个图片/视频流进行合并，连接成一条更长的视频轨。
overlay：在视频和视频相连接的时刻，增加一层转场动画，防止僵硬的间接画面切换。

△图 13 overlay增加过场动画

3.3.3 音频

将传入的多段视频伴音/配音/TTS朗诵接合成一条长音轨。
依据用户抉择增加BGM，使视频更有气氛。
解决淡入淡出，防止僵硬切换。

3.3.4 字幕

增加ass特效字幕头。
依据时间轴中的文本，生成ass字幕文件。
将ass字幕文件压抑到视频流中。

△图 14 特效字幕头

3.3.5 组装

将所有滤镜命令用管道式滤镜流形式组合，生成滤镜流脚本。
将滤镜流脚本与生成的ass字幕同时别离上传到BOS上，便于后续FFmpeg命令间接读取和执行。

3.3.6 其余

须要在空白地位增加特定长度的空白视频/音频，保障产出视频的时间轴与视频编辑器界面的时间轴统一。
对较长的文本，须要精密拆分，以保障每段字幕都与TTS朗诵同步（这一步骤在UI层进行计算）。

3.4 外部服务

在业务层中，波及到用户信息、物料信息、语音合成等各种查问和调用，这些性能均由百家号和百度外部服务提供。

3.5 离线调度

Dispatch是一个分布式的任务调度零碎，负责在多个实例（或容器内）平衡地执行FFmpeg申请，将生成资源上传BOS/VOD，回调Service层模块返回任务调度的执行后果。

FFmpeg是一套开源的、欠缺的音视频流转编码自由软件，负责最终执行FFmpeg命令，生成音视频文件。

4. 离线调度框架：实现分布式FFmpeg调度

4.1 Dispatch架构图

△图 15 Dispatch架构

4.2 Dispatch实现原理

实例启动时，Redis Hash数据结构注册本人，member=ip，value = 以后队列长度：以后状态：更新工夫戳；
任何一个接管到Service层模块的申请后，如果本人以后队列长度为0，间接本地执行，否则将申请转发给队列最短的失常实例；
转发申请前先要从Redis获取所有Dispatch数据，解析所有实例的 ip、队列长度、状态、更新工夫戳，依据规定抉择一个最佳实例转发申请；
生产队列中的申请时，调用FFmpeg从BOS上获取输出文件，管道化滤镜流脚本，ass字幕文件, 而后执行道化滤镜流脚本，在本地磁盘生成产出文件，并上传BOS/VOD；
依据申请参数，回调Service层模块接口，更新工作状态。

5. 图文转视频技术我的项目：依靠于视频编辑器后端服务的技术性尝试

5.1 以场景为单元编辑视频

相比视频编辑器，图文转视频我的项目的用户界面勾销了时间轴，转而采纳"场景（Scene）"这一概念。即一张图+一段话便是一个场景，视频就是由场景串接起来的。

△图 16 以场景为单元创立视频（设计稿）

5.2 文章落地页URL转视频

得益于场景这一简略概念，能够将落地页URL简略地转成场景，从而让图文/图集作者能够一键开始视频内容的编辑和创作。

图17展现了这一创作过程的流程图。

△图17 URL转视频流程

当转成时间轴之后，即可调用视频编辑器的接口，生成和公布视频。

5.3 图文转视频Demo

文末会附上几个图文转视频我的项目在技术验证时生成的视频，以展示实际效果。

6. 总结与瞻望

6.1 组合翻新，适应潮流

百家号的在线视频编辑器技术能够简略总结为：后端应用PHP将前端JS生成的时间轴格局数据转译成FFmpeg命令，并通过Dispatch调度调度框架来执行FFmpeg产出最终视频。从这一层面看，这一技术没有浅近的技术门槛，没有简单形象的逻辑模型，咱们的技术创新，次要是组合现有技术，造成一项适应潮流的新的技术计划。

随同着视频化浪潮到来的，不仅是普通用户对视频内容的大量需要，还有创作者对视频编辑工具便利性的热切期待。百家号始终站创作者的角度，为创作者们提供更加优良的视频编辑器。心愿通过咱们的致力，给视频化浪潮里的创作者们带去得力的船桨。

6.2 技术共享，单干共赢

在百家号在线视频编辑器技术倒退过程中，吸引了来自百度ACG的媒体云团队的关注，两个团队在在线视频编辑器技术上进行了深刻的技术交换。

随后，百度媒体云基于这一技术开发出了智能视频快编服务。得益于媒体云的长期技术积攒和对视频编辑底层技术的深刻开掘，智能视频快编服务应用智能分片+GPU编解码技术，将视频编辑合成的效率晋升了数倍，同时也提供了更多新个性和新性能，使在线视频编辑技术更加实用化。

目前，百家号正在将视频编辑器及通用视频编辑能力的底层服务逐渐迁徙到媒体云的智能视频快编服务。百家号团队作为在线视频编辑器技术的输出方，曾经开始享受技术单干带来的红利。

原文链接：https://mp.weixin.qq.com/s/wH...

---------- END ----------

百度架构师

百度官网技术公众号上线啦！

技术干货 · 行业资讯 · 线上沙龙 · 行业大会

招聘信息 · 内推信息 · 技术书籍 · 百度周边

欢送各位同学关注！