当前位置: 首页 > 后端技术 > Node.js

前端视角看视频处理

时间:2023-04-03 20:29:03 Node.js

最近在做一个视频剪辑项目的后端开发,之前视频处理一直是空白。项目中涉及到的很多概念,随着不断的接触,都有了从模糊到清晰的认知。Video,英文:video,直译为视觉画面的频率,最本意应该是随着时间的流逝不断播放画面,从而产生视觉上连续的效果,仿佛再现了现实世界中的场景。画面更新频率上图是由小人奔跑图片合集组成的图片序列(截取部分片段)。当我们将它设置为连续自动播放时,就会形成最简单最原始的视频。2fps4fps6fps8fps10fps10fps=每秒播放10张图片,即每张图片的视觉停留时间为0.1秒(1/10)。当屏幕显示时,会产生不同的视觉效果。这就引出了视频中一个很重要的概念:画面更新频率,即帧率(英文:Framerate,framepersecond,FPS)。图片更新频率从早期的每秒6、8帧到现在的每秒120帧。多少帧才能保证视频画面的流畅?通常在24帧以上,出现人肉眼的“视觉暂留”和“脑补偿”现象,前者指的是人眼视网膜的“残像”在经过一定时间后仍会存在的现象光信号消失;后者是脑补现象,画面中框的“脑补”功能。它们的混合效果让我们误以为每秒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块,或者图片中的图层。不同之处在于视频中的轨道沿时间轴继续。每个轨道独立存在,可以在单个轨道上自由编辑。此外,您还可以添加滤镜、特效、字体、转场、文字等效果。Filter,和CSS3中的filter属性含义相同,相当于给图片加了一个滤镜,实现图片的各种特殊效果,比如灰度、颜色反转、黑白、马赛克、锐化等。它可以让画面呈现出另一种风格,滤镜达到的效果也很炫酷,比如打开美颜滤镜,瞬间提神。其背后是一组滤镜功能,如scale(缩放)、overlay(叠加)、rotate(旋转)等文字处理,用于实现视频字幕、旁白、解说等效果。过渡很容易理解。电视剧中,主人公突然做了一个梦。当他回到小时候的场景时,场景被特效剪掉了。等待。视频编解码图像深度和每个像素所占用的存储空间(BPP,byteperpixel,pixeldepth)决定了图像的显示质量。如果一幅彩色图像,每个像素由R(红)、G(绿)、B(蓝)三个分量表示,每个分量占用8位,那么一个像素需要占用24位,即3个字节尺寸。比特率:每秒传输的比特数。单位是bps(BitPerSecond),比特率越高,数据传输速度越快。未压缩的视频数据占用存储空间大,不方便在网络中传输。如果视频每秒播放30张图片,每张图片的宽和高分别为300和200像素,每个像素需要24位(每个字节为8位,即3个字节)的存储空间,那么一张需要多少第二个视频占用的空间?FPS(framerate)size(图像宽高)BPP(imagedepth)BPS(bitrate)文件大小(KB)30300??200241M5273数据量约5.3M,按1M传输带宽计算,比特率为131072字节/second(1Mbps=131072bytes/second=128kb/s=0.125M/S),需要等待40多秒。这还不算其他轨道的信息。通常,视频有音轨和字幕。视频之所以可以压缩,是因为原始视频中包含了很多冗余信息,例如:人类的视觉系统有一些先天的特点,对某些细节不敏感。从理论上分析,根据人的视觉特征去除视频冗余信息,既可以保证视频质量,又可以压缩视频体积。预测:通过帧内预测和帧间预测,减少视频图像的空间冗余和时间冗余。变换:通过时域到频域的变换,去除相邻数据之间的相关性,即去除空间冗余。量化:通过用较粗糙的数据表示较精细的数据来减少编码数据量,或者通过去除人眼不敏感的信息来减少编码数据量。扫描:将二维变换后的量化数据重组为一维数据序列。熵编码:根据待编码数据的概率特性减少编码冗余。视频编码国际标准组织:lITU-T(国际电信联盟通信标准部)视频编码标准,以H.26x的形式表示,主要针对视频会议、可视电话等实时视频通信应用而设计.以MPEG-x形式表示的ISO/IEC(国际标准化组织;国际电工委员会)标准主要设计用于视频存储(DVD)、广播视频和视频流(例如,Internet视频、无线视频应用程序)).视频编码标准的演进上图清楚地展示了各种编码的演进历史。目前流行的编码标准有ITU-T组织的H.26x系列视频编码和MPEG组织制定的部分编码标准。同一个标准在不同的组织中可能有不同的称呼。比如AVC(AdvancedVideoCoding),大家可能更熟悉它的另一个名字——H.264,AVC是MPEG组织在标准中给它起的名字。项目实践目前接触到两个开源视频处理库,OpenCV和FFmpeg。OpenCV是一个计算机视觉处理库。它是开源和跨平台的。它提供C++、Python和Java接口。多用于基于机器学习和深度学习的计算机视觉应用场景。FFmpeg是一组开源计算机程序,可用于记录、转换数字音频和视频,并将其转换为流。FFmpeg将包含在openCV中,它更侧重于图像处理,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...WetzelCD,RadtkePH,SternHW.视频媒体的教学效果[M].LawrenceErlbaumAssociates,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...