UWP 手绘视频创作工具技术分享系列 - 手绘视频与视频的结合

本篇作为技术分享系列的第三篇，详细讲一下手绘视频中结合视频的处理方式。

随着近几年短视频和直播行业的兴起，视频成为了人们表达情绪和交流的一种重要方式，人们对于视频的创作、编辑和分享有了更多的需求。而视频的编辑、剪辑方式，也由过去需要借助专业的视频剪辑软件，专业的视频剪辑操作者操作，变为现在的普通用户可以使用视频类 App 很方便的创作出视频。

短视频和直播类 App 对于视频的处理，主要集中在：滤镜、美颜、贴纸、视频剪切和拼接、视频变速、音轨合成，这些实现基本都是基于 OpenCV、OpenGL 和 FFMpeg 的实现，这里我们不多做介绍，本篇主要介绍的是手绘视频中插入视频文件的处理和视频中加入手绘视频元素的处理。

这两种形式的应用场景很多，例如手绘视频中有一个电视机框，视频在框内播放；再比如视频为天气预报，周围加上手绘视频的人物元素，形成人物解说的形式；再比如最常见的在视频中加入一些手绘视频元素，做成动态特效或字幕/表情等，下面是几个例子：

  

  

上面例子的结合方式分别是：

1) 黑板部分为插入的视频，周围是手绘人物和手势，字幕等；

2) 电视机框内是插入的视频，周围手绘视频元素营造一个观看电视的场景；

3) 电视框内是插入的视频，手绘视频元素营造播报新闻的场景；

4) 这个是我临时做的，在视频中插入手绘视频元素，主体还是视频，做出一些特效等。

下面先介绍手绘视频中插入视频文件的处理：

以上面前三张图为例，这种结合方式中插入的视频，都是把视频以固定大小放在了固定的位置，在设定的开始时间开始出现，播放完成后消失。而声音处理方面，在视频出现后，手绘视频的背景音乐需要和视频的声音做音轨合成。结合前面几篇说的 SVG 的绘制和文字的绘制，整体流程：

接下来是视频中插入手绘视频元素的处理：

这种情况以第四张图为例，这种方式，我们认为视频会维持原本的尺寸和帧率，而手绘视频元素，在指定时间，以指定的速度角度和指定的起始终止位置出现，动画播放完成后，或维持在原位置，或消失。整体流程：

上面两种方式的整体流程中，大部分流程是共通的，或者说第二种情况是第一种情况的一个特例，它指定的视频宽高就是视频的宽高，视频之外不存在手绘元素。而且视频固定出现在层级的最底层。

流程中大部分操作都是比较常规的音视频操作，如解析视频文件、合成音轨、视频帧序列生成视频文件等。其中关键的一个步骤是视频每一帧的获取，因为涉及到各种元素的动画，所以这个获取过程的原理是：在后台运行一张画布，把每个需要渲染的元素动画，按照实际动画属性去渲染，包括位置、速度、角度、层级覆盖关系等，然后按照导出视频指定的帧率去截取画布生成视频帧。

到这就把手绘视频与视频的结合介绍完了，实现过程相对简单，但是应用场景很广泛，如果有更有趣的场景，欢迎交流！