关于前端:前端视角看视频处理

最近在做某视频剪辑我的项目的后端开发，之前对于视频的解决始终是空白状态。我的项目中波及到的很多概念，随着一直的接触，有了一个从含糊到清晰的认知。

视频，英文：video，直译为视觉画面的频率，最原始的含意，应该是随着工夫的流逝不停地播放画面，进而产生了一种视觉上间断的成果，彷佛重现了事实世界的场景。

画面更新频率

上图是一组君子跑步的图片汇合（截取局部片段），组成的图片序列。当咱们设置成间断自动播放后，就会造成一个最简略、最原始的视频。

10fps = 每秒钟播放 10 张画面，即每张图片的视觉停留时间为 0.1 秒（1 / 10）

如上图所示，每张图停留从 0.5 秒到 0.1 秒不等，当以不同的速度播放画面时，会产生不同的视觉效果。这里就引出了视频中很重要的一个概念：画面更新频率，也即帧率（英文：Frame rate，frame per second，FPS）。画面更新频率由晚期的每秒 6 或 8 张，到当初的每秒 120 张不等。

帧数为多少时，能够保障视频画面的晦涩？

通常在二十四帧以上，人类肉眼的“视觉暂留”和“脑补”景象，前者是指人类视网膜在光信号隐没后，“残像”还会保留肯定工夫的景象；后者是大脑自行补足画面两头帧的“脑补”性能。它们的混合作用，让咱们误以为每秒 24 帧回放的照片是间断的。

从这里能够晓得，从视频里看到的画面，能够有限迫近事实的场景，却很难还原实在的世界。就像数学里的极限，视频里出现的是分段函数，永远不能出现平滑的曲线，能够有限靠近去拟合。

视频大小比例

常见的视频有 720P、1080P、4K 等

P，是英文 progressive 的缩写，示意视频画面领有的像素行数。当初的摄像头都是逐行扫描，即对每一行的像素逐个扫描。1080P，示意高度为 1080 行像素的视频

例如，1080P 视频个别是 1920×1080，即约 200 万像素，而 720P 视频则是 1280×720，即约 92 万像素。

K，示意视频的程度分辨率，能够了解成每一行的像素总数。

例如，2K 视频个别是 2048×1080，4K 视频个别是 4096×2160（或者：3840×2160 家电显示器上规范）

视频的比例，示意视频画面的长和宽的比值。常见的视频比例有 4:3，16:9。

能够看到 4:3 的比例，比 16 : 9 的比例更方正，更适宜浏览，大部分的书籍或电子阅读器的屏幕，采纳这个比例。

16 : 9，就是俗称的宽屏，更适宜看电视高清视频或 DVD。手机竖着摆放时，拍出照片的比例个别为 9 : 16

轨道

视频中的轨道，能够设想成各自独立运行的火车铁轨，自变量都是工夫，因变量是不同轨道上的素材参数。蕴含背景、视频、音频、字幕等轨道。

如上图所示，相似于，前端 web 中相对定位的层叠在一起的 DIV 块，或者图片中的图层，区别在于视频中的轨道是随时间轴一直连续的。每一条轨道都是独立存在，能够在单条轨道上自在编辑。除此之外，还能够增加滤镜、特效、花字、转场、文本等成果。

滤镜，和 CSS3 中的 filter 属性是一个意思，相当于是给图片增加滤镜，用来实现图像的各种特殊效果，比方灰色、色彩反转、黑白、马赛克、锐化等。能够让画面出现另外一种格调，滤镜实现的成果也十分炫酷，比方关上美颜滤镜，霎时老态龙钟。背地是一组滤镜函数，常见的有 scale(缩放)、、overlay(叠加)、rotate(旋转)等

• 文字的解决，用于实现视频的字幕、旁白、讲解等成果。
• 转场很好了解，电视剧中配角忽然做了个梦，回到小时候的场景，画面就切过去了
• 特效，比方西游记中腾云驾雾的成果，武侠电视剧中乔峰大侠的降龙十八掌等等。

视频编解码

图像深度，每个像素点占据的存储空间（BPP，byte per pixel，像素深度），决定了图片的显示品质。如果一副彩色图像，每个像素用 R（红）G（绿）B（蓝）三个重量示意，每个重量占据 8 位，则一个像素须要占据 24 位，即 3 个字节大小。

比特率：每秒传送的比特 (bit) 数。单位为 bps(Bit Per Second)，比特率越高，传送数据速度越快。

未通过压缩的视频数据，占据的存储空间十分大，不便于在网络中传输。如果视频每秒播放 30 张图片，每张图片的宽高别离为 300 和 200 像素，每个像素点须要 24 比特（每个字节为 8 位，即 3 个字节）的存储空间，则一秒钟的视频占据多大的空间呢。

数据量约为 5.3M，依照 1M 传输带宽计算，比特率是 131072 字节 / 秒（1Mbps=131072 字节 / 秒 =128kb/s=0.125M/S），则须要期待 40 多秒钟。这还不算其它轨道的信息，个别的视频都有音频轨道、字幕的。

视频是能够压缩的，因为原始视频蕴含大量的冗余信息，比方：人的视觉零碎有一些先天的个性，对某些细节不敏感。从实践上剖析，基于人的视觉个性去掉视频冗余信息既能够保障视频品质又能够压缩视频体积。

• 预测：通过帧内预测和帧间预测升高视频图像的空间冗余和工夫冗余。
• 变换：通过从时域到频域的变换，去除相邻数据之间的相关性，即去除空间冗余。
• 量化：通过用更毛糙的数据表示精密的数据来升高编码的数据量，或者通过去除人眼不敏感的信息来升高编码数据量。
• 扫描：将二维变换量化数据从新组织成一维的数据序列。
• 熵编码：依据待编码数据的概率个性缩小编码冗余。

视频编码的国际标准组织：l ITU-T（国际电信联盟通信规范部）视频编码标准以 H.26x 的模式示意，次要为视频会议和可视电话等实时视频通信利用设计的。

ISO/IEC（国际标准化组织；I 国内电工技术委员会）规范以 MPEG- x 的模式示意，次要为视频存储（DVD）、播送视频以及视频流（例如，网上视频、无线视频利用）设计的。

视频编码标准演变

上图能够清晰地看到各种编码的演进历史。以后通行的编码标准为 ITU- T 组织的 H.26x 系列视频编码和 MPEG 组织制订的局部编码标准，同一规范在不同的组织叫法可能不同。比方，AVC（高级视频编码），大家可能更相熟它的另一个名字——H.264，AVC 是 MPEG 组织在规范中给它起的名字。

我的项目实际

目前接触过 OpenCV 和 FFmpeg 两款开源的视频解决库。OpenCV 是计算机视觉的解决库，开源、跨平台，提供了 C ++、Python 和 Java 接口，多用于基于机器学习及深度学习的计算机视觉利用场景。FFmpeg 是一套能够用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。openCV 中会蕴含 FFmpeg，更加专一于图像方面的解决，而 FFmpeg 提供了弱小的视频加工能力。在最近参加的我的项目中，两者均应用到了。

上图展现了，视频剪辑我的项目的业务解决流程。

• 解析我的项目的配置后，初始化我的项目的工作目录
• 解析素材地址，并下载到本地目录
• 采纳多线程和多过程联合的形式，渲染素材媒体，管制并发数
• 底层调用 OpenCV 和 FFmpeg，合成视频，生成指标格局
• 增加片头、片尾以及水印等，上传到云端
• 删除中间环节产生的文件，开释系统资源

web 前端延展

上图浅显地展现了浏览器运行页面的过程，从输出页面地址，到最终出现视图，经验一些列的过程。在某种程度上，能够将浏览器视作非凡的视频播放器，它也是一帧一甄的解决页面。

当遇到网络提早或电脑性能问题时，便会呈现卡顿的景象。这种问题，次要是因为丢帧造成的，某些要害的画面帧没有展现进去，进而无奈在脑海中造成间断的画面，给人一种断层的感觉。

FFCreator

咱们团队推出的 FFCreator 是一个基于 node.js 的轻量、灵便的短视频制作库。您只须要增加几张图片或视频片段再加一段背景音乐，就能够疾速生成一个很酷的的视频短片。

你能够为视频增加音乐、字幕、文字、虚构主播等各种元素。当然能够十分不便的来制作单个或批量数据可视化类的视频。

个性

• 齐全基于 node.js 开发，十分易于应用，并且易于扩大和开发。
• 依赖很少、易装置、跨平台，对机器配置要求较低。
• 视频制作速度极快，一个 5 分钟的视频只须要 1-2 分钟。
• 反对近百种场景炫酷过渡动画成果。
• 反对图片、声音、视频剪辑、文本等元素。
• 反对字幕组件、能够将字幕与语音 tts 联合合成音频新闻。
• 反对图表组件，能够制作数据可视化类视频。
• 反对简略（可扩大）的虚构主播，您能够制作本人的虚构主播。
• 蕴含 animate.css90% 的动画成果，能够将 css 动画转换为视频。

FFCreator 官网网址：https://github.com/tnfe/FFCre…

总结

本文浅显地介绍了视频解决的一些基本概念，结合实际我的项目中遇到的困惑，逐个开展解释。而后，介绍了一些业务我的项目的处理过程，以及和 Web 前端的关联。最初，举荐一款咱们团队自主研发的视频解决工具，感兴趣的小伙伴欢送点赞珍藏。

相干参考

https://github.com/tnfe/FFCre…

Wetzel C D, Radtke P H, Stern H W. Instructional effectiveness of video media[M]. Lawrence Erlbaum Associates, Inc, 1994.

https://github.com/sitkevij/a…

https://www.jianshu.com/p/6ef…

https://www.zhihu.com/questio…

https://www.zhihu.com/questio…

https://blog.csdn.net/longsan…

http://www.360doc.com/content…