马蜂窝视频编辑框架设计及在 iOS 端的业务实践

(马蜂窝技术公众号原创内容，ID: mfwtech)

熟悉马蜂窝的朋友必定知道，点击马蜂窝 App 首页的发布按钮，会发现发布的内容已经被简化成「图文」或者「视频」。

长期以来，游记、问答、攻略等图文形式的形态一直是马蜂窝发展的优点所在。将短视频提高至与图文并列的位置，是由于对于今天的移动互联网用户来讲，内容更真实直观、信息密度更大、沉浸感更强的短视频已经成为刚需。为了使旅游用户拥有更好的内容交互体验，丰富和完整原有的内容生态体系，马蜂窝加码了对短视频领域的布局。

如今，天天都会有大量短视频在马蜂窝产生，覆盖美食、探店、景点打卡、住宿体验等多种当地玩乐场景。马蜂窝但愿平台的短视频内容除了「好看」以外，更要「好用」。这个「好用」不只仅是为有需求的用户提供好用的旅行信息，更是指经过技术让用户的短视频创做更加简单易行。

为此，咱们在马蜂窝旅游 App 的视频编辑功能中提供了「自定义编辑」与「模板创做」两种编辑模式，使用户既能够经过「模板」快速创做与模板视频同款的炫酷视频，也可以进入「自定义编辑」模式发挥本身的创意，生成个性化视频。

本文将围绕马蜂窝旅游 App iOS 端中的视频编辑功能，和你们分享咱们团队视频编辑框架的设计及业务实践。

 

Part.1 需求分析

如前言所述，咱们要作的是可以支持「自定义编辑」与「模板创做」两种模式的视频编辑功能。

图1：产品示意图

 

首先咱们梳理一下「自定义编辑」模式下，须要提供的功能：

• 视频拼接：将多段视频按顺序拼接成一段视频

• 播放图片：将多张图片合成一段视频

• 视频裁剪：删除视频中某个时间段的内容

• 视频变速：调整视频的播放速度

• 背景音乐：添加背景音乐，能够与视频原音作混音

• 视频倒播：视频倒序播放

• 转场过渡：拼接的两段视频切换时增长一些过渡效果

• 画面编辑：画面旋转，画布分区、设置背景色，增长滤镜、贴纸、文字等附加信息

有了上述这些功能，即可以知足「自定义编辑」模式的需求，可以让用户经过咱们的视频编辑功能完成本身的创做。可是为了进一步下降视频编辑功能的使用门槛，让制做炫酷视频变得简单，咱们还须要支持「模板创做」模式。即为用户提供「模板视频」，用户只须要选择视频或者图片，即可创做出与「模板视频」有一样编辑特效的同款视频，实现「一键编辑」。

支持「模板创做」模式后，咱们视频编辑功能最终的流程图以下：

图2：完整流程图

 

如图所示，在媒体文件以外，多了一个模板 A 的输入，模板 A 描述了要对用户选择的媒体文件作哪些编辑。同时在编辑器的输出中多了一个模板 B，模板 B 描述了用户在完成编辑后，最终作了哪些编辑。其中模板 B 的输出，为咱们解决了「模板视频」来源的问题，即「模板视频」既能够经过运营手段生产，也能够将用户经过「自定义编辑」模式创做的视频做为模板视频，使其余用户浏览该用户发布的视频时，能够快速创做同款视频。

经过上述需求分析的过程，能够总结出咱们的视频编辑功能主要支持两个能力：

1. 常规视频编辑的能力

2. 描述如何编辑的能力

这两个能力的划分，为咱们接下来进行视频编辑框架的设计提供了方向。

 

Part.2 框架设计

常规视频编辑的能力是一个视频编辑框架须要提供的基本能力，可以支撑业务上的「自定义编辑」模式。「描述如何编辑」的能力则是将常规视频编辑能力进行抽象建模，描述「对视频作哪些编辑」这件事，而后将这种描述模型转化为具体的视频编辑功能，便可以支撑起业务上的「模板创做」模式。因此咱们的编辑框架能够划分为两个主要的模块：

• 编辑模块

• 描述模块

在两个模块之间，还须要一个转换模块，完成视频编辑模块与描述模块之间的双向转换。下图为咱们须要的视频编辑框架示意图：

图3：视频编辑框架示意图

 

• 编辑模块所须要的具体功能，能够随着业务上的需求不断迭代添加，目前咱们要支持的功能如图中所列。

• 描述模块则须要一个描述模型，将媒体素材与各类编辑功能完整的描述出来。同时也须要将模型保存成文件，从而可以被传输分发，咱们称之为描述文件。

• 另外在描述文件的基础上，「模板创做」模式中的「模板」还须要标题、封面图等运营相关的信息。因此还须要提供一个运营加工的功能，可以让运营同事将描述文件加工为模板。

• 转换模块负责的则是将视频编辑功能抽象为描述文件、将描述文件解析为具体的编辑功能的任务，保证抽象与解析的正确性相当重要。

视频编辑模块在不一样的开发平台上都有很好的实现方案，好比 iOS 原生提供的 AVFoundation，使用普遍的第三方开源库 GPUImage，以及更加通用的 ffmpeg 等。具体的实现方案能够结合业务场景与项目规划进行选择，咱们目前在 iOS 端采用的方案是苹果原生的 AVFoundation。如何结合 AVFoundation 实现咱们的视频编辑框架会在下文具体介绍。接下来咱们就来看下具体功能模块的设计与实现。

 

Part.3 模块功能与实现

3.1 描述模块

3.1.1 功能划分

首先咱们对「自定义编辑」模式下须要支持的具体功能进行分析，发现能够以编辑的对象为标准，将编辑功能划分为两类：段落编辑、画面编辑。

• 段落编辑：将视频段看做编辑对象，不关心画面内容，只在视频段层面上进行编辑，包含以下功能：

图4：段落编辑

 

• 画面编辑：将画面内容做为编辑对象，包含以下功能：

图5：画面编辑

 

3.1.2 视频编辑描述模型

有了编辑功能的划分后，要描述「对视频进行哪些编辑」，咱们还须要一个视频编辑描述模型。定义以下几个概念：

• 时间线：由时间点组成的单向递增直线，起始点为 0 点

• 轨道：以时间线为坐标系的容器，容器内存放的是每一个时间点须要的内容素材及「画面编辑」功能

1. 轨道具备类型，一条轨道仅支持一种类型

• 段落：轨道中的一段，即轨道所属时间线上两个时间点及两点之间的部分

1. 段落也具备类型，与其所属轨道类型保持一致

轨道类型列表：

其中「视频」、「图片」、「音频」类型轨道，是提供画面与声音内容的轨道。其他几个类型的轨道，则是用于描述具体作哪些画面编辑功能的轨道。特效类型轨道中能够指定若干画面编辑效果，如旋转、分区等。

结合编辑功能的划分，咱们能够看出段落编辑功能的编辑对象是轨道内的段落，画面编辑功能的编辑对象是轨道内存放的内容素材。

有了时间线、轨道、段落三个概念以及段落编辑、画面编辑两个编辑行为的划分后，咱们在抽象层面描述视频的编辑过程以下：

图6：视频编辑描述模型示意图

 

如上图所示，经过该模型，咱们已经可以完整的描述出「对视频进行哪些编辑」：

• 创做一个时长 60 秒的视频，内容素材有视频，图片，音乐，分别对应轨道 一、轨道 二、轨道 3，而且有转场、滤镜效果，由轨道 四、轨道 5 指定（其余效果再也不单独描述，以转场、滤镜效果为参考）。

• 该视频由轨道 1 的 [0-20] 段、轨道 2 的 [15-35] 段、轨道 1 的 [30-50] 段以及轨道 2 的 [45-60] 段拼接而成。

• [0-60] 视频全段有背景音乐，音乐由轨道 3 指定。

• [15-20]、[30-35]、[45-50] 三段内有转场效果，转场效果由轨道 4 指定。

• [15-35] 段有滤镜效果，滤镜效果由轨道 5 指定。

3.1.3 描述文件与模板

有了上述的视频编辑描述模型后，咱们还须要具体的文件来存储和分发该模型，即描述文件，咱们使用 JSON 文件来实现。同时还须要提供运营加工的能力，使运营同事为描述文件添加一些运营信息，生成模板。

• 描述文件: 根据视频编辑模型生成一份 JSON 文件

举个🌰

{
    "tracks": [{
            "type": "video",
            "name": "track_1",
            "duration": 20,
            "segments": [{
                "position": 0,
                "duration": 20
            }, ...]
        }, {
            "type": "photo",
            "name": "track_2",
            "duration": 20,
            "segments": [{
                "position": 15,
                "duration": 20
            }, ...]
        },
        {
            "type": "audio",
            "name": "track_3",
            "duration": 60,
            "segments": [{
                "position": 0,
                "duration": 60
            }]
        }, {
            "type": "transition",
            "name": "track_4",
            "duration": 5,
            "segments": [{
                "subtype": "fade_black",
                "position": 15,
                "duration": 5
            }, ...]
        }, {
            "type": "filter",
            "name": "track_5",
            "duration": 20,
            "segments": [{
                "position": 15,
                "duration": 20
            }]
        }, ...
    ]
}

• 模板: 由描述文件+若干业务信息组成的JSON文件

举个🌰

{
    "title": "模板标题",
    "thumbnail": "封面地址",
    "description": "模板简介",
    "profile": {    //描述文件
        "tracks": [...]   
    }
}

经过上述视频编辑描述模型与描述文件及模板的定义，结合转换器，咱们即可以在用户使用「自定义」编辑功能的基础上，生成一份描述文件来描述用户最终对视频进行的编辑行为。反过来咱们也能够经过解析描述文件，将用户选择的素材根据描述文件进行编辑，快速生成与描述文件中的编辑行为「同款」的视频。

3.2 编辑模块

3.2.1 AVFoundation 介绍

AVFoundation 音视频编辑分为素材混合、音频处理、视频处理、导出视频这四个流程。

（1）素材混合器 AVMutableComposition

AVMutableComposition 是一个或多个轨道（AVCompositionTrack）的集合，每一个轨道会根据时间线存储源媒体的文件信息，好比音频、视频等。

//AVMutableComposition 建立一个新AVCompositionTrack的API
- (nullable AVMutableCompositionTrack *)addMutableTrackWithMediaType:(AVMediaType)mediaType preferredTrackID:(CMPersistentTrackID)preferredTrackID;

每一个轨道由一系列轨道段（track segments）组成，每一个轨道段存储源文件的一部分媒体数据，好比 URL、轨道 ID（track identifier）、时间映射（time mapping）等。

//AVMutableCompositionTrack部分属性

/* provides a reference to the AVAsset of which the AVAssetTrack is a part  */
AVAsset *asset;

/* indicates the persistent unique identifier for this track of the asset  */
CMPersistentTrackID trackID;

NSArray<AVCompositionTrackSegment *> *segments;

其中 URL 指定文件的源容器，轨道 ID 指定须要用到的源文件轨道，而时间映射指定的是源轨道的时间范围，而且还指定其在合成轨道上的时间范围。

//AVCompositionTrackSegment的时间映射
CMTimeMapping timeMapping;

//CMTimeMapping定义
typedef struct 
{
	CMTimeRange source; // eg, media.  source.start is kCMTimeInvalid for empty edits.
	CMTimeRange target; // eg, track.
} CMTimeMapping;

图7：AVMutableComposition合成新视频的流程 

（来源：苹果官方开发者文档）

 

(2) 音频混合 AVMutableAudioMix 

AVMutableAudioMix 能够经过 AVMutableAudioMixInputParameters 指定任意轨道的任意时间段音量。

//AVMutableAudioMixInputParameters相关api

CMPersistentTrackID trackID;

- (void)setVolumeRampFromStartVolume:(float)startVolume toEndVolume:(float)endVolume timeRange:(CMTimeRange)timeRange;

图8：音频混合示意图

（来源：苹果官方开发者文档）

 

（3）视频渲染 AVMutableVideoComposition

咱们还可使用 AVMutableVideoComposition 来直接处理 composition 中的视频轨道。处理一个单独的 video composition 时，你能够指定它的渲染尺寸、缩放比例、帧率等参数并输出最终的视频文件。经过一些针对 video composition 的指令（AVMutableVideoCompositionInstruction 等），咱们能够修改视频的背景颜色、应用 layer instructions。

这些 layer instructions（AVMutableVideoCompositionLayerInstruction 等）能够用来对 composition 中的视频轨道实施图形变换、添加图形渐变、透明度变换、增长透明度渐变。此外，你还能经过设置 video composition 的 animationTool 属性来应用 Core Animation Framework 框架中的动画效果。

图9：AVMutableVideoComposition 处理视频 

（来源：苹果官方开发者文档）

 

(4) 导出 AVAssetExportSession

导出的步骤比较简单，只须要把上面几步建立的处理对象赋值给导出类对象就能够导出最终的产品。

图10：导出流程

（来源：苹果官方开发者文档）

 

3.2.2 编辑模块的实现

结合 AVFoundation 框架，咱们在视频编辑模块中分别实现了以下几个角色：

• 轨道：有视频与音频两种类型，存放帧图与声音。

1. 在视频类型的轨道中，扩展出图片类型轨道，即经过空的视频文件生成视频轨道，将所选的图片做为帧图提供给混合器。

2. 附加轨道：AVFoundation 提供了 AVVideoCompositionCoreAnimationTool 这个工具，可以方便的将 CoreAnimation 框架内的内容应用到视频帧图上。因此添加文字的功能，咱们在预览端经过 UIKit 建立了一系列预览视图，导出时转换到该工具的 CALayer 上。

• 段落：轨道中的某个时间段，做为段落编辑的对象。

• 指令：关联到指定的视频段落，进行图片处理，绘制每一帧画面。

1. 一个指令能够关联多条视频轨道，从这些视频轨道的指定时间段内获取帧图，做为画面编辑的对象。

2. 指令中画面编辑的具体实现方案，采用 CoreImage 框架。CoreImage 自己提供了一些内置的图片实时处理功能。CoreImage 不支持的特效，咱们经过自定义 CIKernel 的方式来实现。

• 音频混音器：针对添加音乐的功能，咱们使用 AVMutableAudioMix 完成。

• 视频混合器：咱们最终要获得的视频文件，通常包含一条视频轨道、一条音频轨道。混合器就是将咱们输入的媒体资源转换为轨道，根据用户的操做或者由描述模型转换，对视频进行段落编辑、组装指令进行画面编辑，对音频轨道进行混音，结合 AVPlayerItem 与 AVExportSession，提供实时预览与最终合成的功能。

有了上述几个角色后，在 iOS 端的视频编辑模块实现示意图以下：

图11：视频编辑模块示意图

 

如上图所示，混合器中包含两条视频轨道与一条音频轨道。通常来讲输入的视频与图片文件，都会生成一条对应的视频轨道，理论上混合器中应该有多条视频轨道。咱们图中混合器只保持两条视频轨道与一条音频轨道，首先是为解决视频解码器数量限制的问题，后面会有具体描述。其次是为了保证明现转场过渡功能。

指令序列由若干在时间段上连续的指令组成，每一个指令由时间段、帧图来源轨道、画面编辑效果组成。视频编辑功能中的段落编辑功能，即是对指令段的拼接；画面编辑功能，即是每一个指令段对帧图作的编辑处理。混合器提供的预览功能，能够将编辑改动实时展现给用户。肯定了编辑效果后，经过混合器提供的合成功能，便完成了最终视频文件的合成。

3.2.3 转换器 

有了视频编辑模块的实现方案后，咱们已经可以支持「自定义编辑」模式。最后经过转换器的链接，即可以将描述模型与编辑模块整合在一块儿，完成对「模板创做」模式的支持。这里转换器的实现较为简单，即将 JSON 格式描述文件解析为数据模型，混合器根据用户选择的素材与描述模型建立本身内部的轨道模型，拼接指令段便可。

另外一方面，混合器在完成编辑导出时，将本身内部的轨道模型与指令信息组装成数据模型，生成 JSON 格式的描述文件。

图12：描述模型与编辑模块相关转换

 

Part.4 近期优化方向

4.1 踩过的坑

在实现上述编辑框架的过程当中，咱们遇到过不少的问题，多数是因为 AVFoundation 中错误信息不够明确，定位问题比较耗时，总结起来大部分都是轨道时间轴对齐引发的问题。除时间轴对齐问题外，咱们在这里总结几个在实现时须要考虑到的问题，与你们分享一下，避免踩一样的坑。

(1) 混合器轨道数量限制

• 问题：AVMutableComposition 能够同时添加不少的轨道，即一个 composition 内能够同时存在多条视频轨道，而且能够正常经过 AVPlayer 预览播放。因此咱们最初实现的编辑模块，混合器中支持多条视频轨道，以下图所示。这种多条轨道结构，预览时没有问题，导出时却出现了「没法解码」的报错。转换前的混合器结构图：

图13：转换前的混合器结构图

 

• 缘由：经查证后发现是苹果设备对视频播放解码器的数量有限制，导出视频时，每条视频轨道会使用一个解码器，这就致使导出时若是视频轨道数量超出解码器数量的限制，没法导出。

• 解决方案：轨道模型转换，将最初混合器中的多视轨结构转换为目前的双视轨结构，这样在导出时便不会超出解码器数量限制。

(2) 性能优化：倒播功能实现方案

• 问题：最初的实现方案为导出一个新的视频文件，帧序列是原视频文件中的倒序。若是原视频文件很大，用户只裁剪了一种的一段，对这一段进行倒播时，仍然会将原视频文件进行倒序处理，导出一份新的视频，是一个十分耗时的操做。

• 解决方案：根据时间点获取视频文件的对应帧，倒播时只是将正常时间点转换为倒播后的时间点便可，不操做视频文件。相似于对数组的操做，只操做下标，而不直接改变数组的顺序。

(3) 性能优化：减小内存使用率

• 问题：预览时使用原图尺寸，消耗内存严重，添加多个高清图片后，预览过程会出现内存告警。

• 解决方案：在不影响用户体验的状况下，使用低分辨率的图片进行预览，导出时使用原图。

4.2 近期规划

目前这套视频编辑框架在马蜂窝旅游 App iOS 端运做良好，可以支撑业务的不断迭代，能够快速扩展出更多的画面编辑功能，固然也还有一些须要优化的细节有待完善。

近期咱们会结合机器学习与 AR 技术，探索一些有趣好玩的视频编辑场景，为用户提供更加个性化的旅行记录工具。

本文做者：李旭、赵成峰，马蜂窝内容中心 iOS 研发工程师。