初探视频原理和FFmpeg

见贤思齐

编者按：本文作者郭文涛，奇舞团前端开发工程师。本文导读阅读本文你将获得以下知识：了解视频的基本原理。了解 FFmpeg 是什么，和一些常用的用法。用 FFmpeg 搭建简单的视频直播推流。FFmpeg 在 NodeJS 中的一些用法。背景短视频大行其道的年代，作为程序员势必需要了解：视频编辑背后的原理和技术。本文简略的描述了视频的组成原理和常用的视频编辑工具，以及在 NodeJS 中的用法。想要了解视频原理，首先应该从图像原理开始说起。图像基础1. 像素图像画面由一个数字序列表示的图像中的一个最小单位色块，被称之像素（pixel/px）。注意：像素只有位图才会有，是用来记录位图图像的。我们所说的图像大小为1920*1080，指的就是长宽各有 1920 和 1080 的像素点，那么一张1920*1080的图片总共有的像素点为：1920*1080 = 2073600个像素点。图像的大小如何计算？图像的大小：像素数量 * 像素大小 = 图片大小，而 像素大小 和 像素深度1有关系。RGB表示的真彩色能表示256×256×256=16,777,216，就是我们常见的1600万色，是人眼可见的全部色彩，超出没有意义。RGB的像素深度有1bit、4bit、8bit、16bit、24bit、32bit，如在ps中下图在新建一张画布选择8bit（指 rgb 每种颜色占 8bit），那这样1 px = 3 * 8bit = 24bit，俗称24 位图。根据以上公式就能算出如下图图像的大小：500 * 378 * 24 / 8 = 567000Byte = 567000Byte / 1024 = 553.7109375 Kb，和 ps 显示的图像大小一样。但往往真实的图片大小远比以上计算的结果小很多， 这是因为导出的图片都经过压缩的，关于图片压缩技术可自行搜索学习。视频基础1. 视频和图像的关系？视频就是图片一帧一帧连起来的产物，连起来的越快看着越流畅，用 帧率（就是每秒播放图片的数量 FPS）来衡量视频的流畅度。那么根据图片大小的算法就能算出视频的大小。视频的大小 = 时长（秒） * 帧率（FPS）* 图片大小；那么1920×1280分辨率， 30FPS，时长 1 秒的视频的大小就是：1920 * 1280 * 24 / 8 * 30 / 1024 / 1024 = 210.9375 M，那么 1 小时的影片需要：210.9 * 60 * 60 / 1024 = 741.4453125 G，不禁产生疑问，为啥我下载的大片才 1G 多？莫慌，视频要是这么简单，那我们就太天真了，所以就有了下文 「视频编码」 。2. 视频是怎么来的？几个概念帧（Frame）：就是一张静止的画面， 是视频的最小单位。帧速率（FPS）：每秒播放图片的数量。码率（Bit Rate）：视频文件在单位时间内使用的数据流量，决定视频的质量和大小，单位是 kb/s 或者 Mb/s。一般来说同样分辨率下，视频文件的码流越大，压缩比就越小，画面质量就越高。码流越大，说明单位时间内取样率越大，数据流，精度就越高，处理出来的文件就越接近原始文件，图像质量越好，画质越清晰，要求播放设备的解码能力也越高。码率的常见三种模式：-CBR-全程码率恒定-文件大小可预测-编码压力小，直播常用-VBR-码率可变-简单场景码率低，复杂场景码率高-CRF-固定质量模式-CRF值越低，视频看起来质量越高视频构成视频和音频就像是饭和菜，封装格式就相当于碗。注意： 下文所有视频均代表包含音频的视频。1. 视频封装格式常见封装格式有 MP4、AVI、FLV、mov、RMVB、MKV、WMV、3GP、ASF 等。2. 编码格式视频编码是对采用视频压缩算法将一种视频格式转换成另一种视频格式的描述，音频编码同理。常见的视频编码格式有：AC-1、MPEG2/H.262、VP8、MPEG4、VP9、H.261、H.263、H.264、H.265 等。常见的音频编码格式有：WMA、MP3、AC-3、AAC、APE、FLAC、WAV 等。视频压缩原理主要是将视频像素数据（RGB，YUV 等）压缩成为视频码流，从而降低视频的数据量，也就是处理像素。YUV: 和RGB一样是一种颜色编码格式，相比RGB更利于压缩。其中"Y"表示明亮度（Lumina nce 或 Luma），也就是灰阶值；而"U"和"V"表示的则是色度（Chrominance 或 Chroma），作用是描述影像色彩及饱和度，用于指定像素的颜色。视频压缩分为下面两种类型：1. 帧内压缩也叫空间压缩，类似于图像压缩，属于有损压缩算法，达不到很高的压缩比。2. 帧间压缩主要是通过记录关键帧，通过压缩关键帧之间连续帧的冗余信息（连续帧内相同的像素区域）的过程。为了记录关键帧，将视频的画面帧分为三类：I 帧：帧内编码帧（intra picture），能展示最完整的画面， 可压缩的空间小，编码过程属于帧内编码。P 帧：前向预测编码帧(predictive-frame)，需要参考前面的 I 帧或者 P 帧来找出不同部分进行编码，压缩比比较高。B 帧 双向预测，也就是 B 帧记录的是本帧与前后帧的差别。也就是说要解码 B 帧，不仅要取得之前的缓存画面，还要解码之后的画面，通过前后画面的与本帧数据的叠加取得最终的画面。B 帧压缩率高，但是对解码性能要求较高。GOP（Group of Pictures）值编码器将多张图像进行编码后生产成一段一段的 GOP ，每一组 IPB 帧的序列包含多少帧，也就是一个 I 帧结束后需要经过多少帧才能出现下一个 I 帧。所以同码率下 GOP 值越大，B 帧和 P 帧越多，视频质量越高。在压缩或者解压缩视频的过程用到编解码器（Codec）。总的过程可以：视频的编码的过程：下图来源于即时通讯网2。视频解码的过程：音频压缩原理音频压缩是在保证信号在听觉方面不产生失真的前提下，对音频数据信号进行尽可能大的压缩， 去除冗余信息。冗余信号包含人耳听觉范围外的音频信号以及被掩蔽掉的音频信号等。例如，人耳所能察觉的声音信号的频率范围为 20Hz ～ 20KHz，除此之外的其它频率人耳无法察觉，都可视为冗余信号。此外，根据人耳听觉的生理和心理声学现象，当一个强音信号与一个弱音信号同时存在时，弱音信号将被强音信号所掩蔽而听不见，这样弱音信号就可以视为冗余信号而不用传送。音频压缩不是今天的主角，想深入学习可参考如下链接：https://baike.baidu.com/item/%E9%9F%B3%E9%A2%91%E5%8E%8B%E7%BC%A9/392863https://www.kamilet.cn/how-audio-compression-works-and-can-you-really-tell-the-difference/FFmpeg1. FFmpeg 什么？FFmpeg is a collection of libraries and tools to process multimedia content such as audio, video, subtitles and related metadata.简单说就是一个跨平台的视频处理的程序。2. FFmpeg 的原理整个过程基本可以说成：解复用 => 解码 => 编码 => 复用器。_______ ______________|||||input|demuxer|encoded data|decoder|file|--------->|packets|-----+|_______||______________||v_________|||decoded||frames||_________|________ ______________|||||||output| decoder => encoder => muxer。Fluent-ffmpeg 是将复杂的 ffmpeg 命令抽象成 nodeJs 的模块，前提是系统已安装 FFmpeg，这对于前端工程师来说，可以用它处理众多音视频操作。挖坑下一篇预告：FFmpeg 和 wasm 在浏览器中的碰撞本文参考文章1. 即时通讯网-史上最通俗视频编码技术入门：http://www.52im.net/thread-2840-1-1.html2. 简书-音视频基础知识：https://www.jianshu.com/p/614b3e6e641a3. 滤镜实现各种图片效果 | Video-Filters | avfilter | 变色：https://www.geek-share.com/detail/2763908000.html4. 阮一峰：FFmpeg 视频处理入门教程：http://www.ruanyifeng.com/blog/2020/01/ffmpeg.html文内链接https://baike.baidu.com/item/像素深度http://www.52im.net/thread-2840-1-1.htmlhttps://ffmpeg.org/https://github.com/fluent-ffmpeg/node-fluent-ffmpeg关于奇舞周刊《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。