FFmpeg初探——基于FFmpeg的图片合成视频

见贤思齐

前言商家在发布商品的时候，大部分情况下是没有视频的，这样往往会造成商品展示不全等问题，而视频制作又比较麻烦，为了解决此痛点，我们需要提供一键合成视频的功能。之所以选择FFmpeg，是因为我们期望后续能够进行视频剪辑、字幕添加等更复杂的音视频操作。下面我们就来了解下什么是FFmpeg。什么是FFmpegFFmpeg是一款知名的开源音视频处理软件，它提供了丰富而友好的接口支持开发者进行二次开发，也就是说，我们可以把FFmpeg看作是一个跨平台的视频处理程序：FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec。FFmpeg中的“FF”指的是“FastForward”，“mpeg”则是“MovingPictureExpertsGroup”FFmpeg的原理FFmpeg对音视频的处理过程可以简概为：解复用=>解码=>编码=>复用器。FFmpeg的使用常见情况下使用FFmpeg首先要在当前系统配置FFmpeg环境，也就是对FFmpeg工具进行安装和配置，环境配置完成之后就可以使用命令行工具进行FFmpeg的调用。FFmpeg部分简单的命令行操作示例:获取音视频文件信息 ffmpeg -i video.mp4转换视频文件格式（转换mp4文件到avi文件） ffmpeg -i video.mp4 video.avi更改视频文件分辨率 ffmpeg -i input.mp4 -filter:v scale=1280:720 -c:a copy output.mp4视频中提取图像 ffmpeg -i input.mp4 -r 1 -f image2 image-%3d.png当然，FFmpeg还可以进行更多的操作，在此不进行更多的举例，感兴趣的同学可以参考官方文档(http://www.ffmpeg.org/)FFmpeg在Node.js中的应用在Node.js中有一个非常好用的模块，它就是fluent-ffmpeg:Thislibraryabstractsthecomplexcommand-lineusageofffmpegintoafluent,easytousenode.jsmodule.Inordertobeabletousethismodule,makesureyouhaveffmpeginstalledonyoursystem(includingallnecessaryencodinglibrarieslikelibmp3lameorlibx264).简而言之fluent-ffmpeg对FFmpeg复杂的命令行进行了一定的封装，抽象为我们使用起来非常舒服的各类方法和API，可以看下它的一些常见操作：fluent-ffmpeg的部分简单示例:指定输入：ffmpeg('input1.avi')  .input('input2.avi')  .input(fs.createReadStream('input3.avi'));音频选项：// 禁用音频ffmpeg('input1.avi').noAudio();// 设置音频比特率ffmpeg('input1.avi').audioBitrate(128);// 设置音频频率ffmpeg('input1.avi').audioFrequency(22050);视频选项：// 设置编解码器ffmpeg('input1.avi').videoCodec('libx264');// 设置输出帧大小和纵横比ffmpeg('input1.avi').size('640x?').aspect('4:3');远程环境使用fluent-ffmpeg(@ffmpeg-installer/ffmpeg)了解到fluent-ffmpeg之后，我们会发现它简介中提到的重要一点（makesureyouhaveffmpeginstalledonyoursystem(includingallnecessaryencodinglibrarieslikelibmp3lameorlibx264).），请确保在系统上安装了ffmpeg(包括所有必要的编码库，如libmp3lame或libx264)。那么随之而来的一个问题就是，当我把服务部署到远程机器时，远程机器如果没有安装过FFmpeg环境怎么办。解决这个问题我们用到的是另一个库@ffmpeg-installer/ffmpeg：Installsabinaryofffmpegforthecurrentplatformandprovidesapathandversion.SupportsLinux,WindowsandMacOS/X.@ffmpeg-installer/ffmpeg能为当前平台安装FFmpeg二进制文件，让我们具备在多个环境中去调用FFmpeg的能力。它和fluent-ffmpeg结合使用，只需如下操作：const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path;const ffmpeg = require('fluent-ffmpeg');ffmpeg.setFfmpegPath(ffmpegPath);将图片合成为视频下面就是我们想要使用FFmpeg进行的工作，将多张不同大小尺寸的图片合成为带有一定动画切换效果的视频：👇👇👇👇👇👇👇👇👇（为方便上传，视频转换成了gif）整个过程分为以下几步：1、输入被操作对象确定基础视频和目标视频，并输入基础视频。这个步骤主要就是确认了输入和输出的目标。// 基础视频const baseVideo = path.join(__dirname, '../assets/baseVideo30.mp4')// 目标视频const savePath = path.join(__dirname, '../assets/temp-video.mp4')// 基础视频输入let baseInput = await ffmpeg().input(baseVideo)2、图片输入方法和视频的输入相同，因为存在多张图片，所以使用for循环输入for (let i = 0; i  { // 视频处理完成    console.log('video one end');    taskInfo.savePath = savePath;    resolve();  })  .on('error', (error) => { // 视频处理失败    console.log('an error happend: create one video' + error);    reject(error);  })  .save(savePath); // 保存路径})注意mp4的编码问题大部分同学对MP4的理解是后缀为.mp4的文件，但其实MP4有非常复杂的含义（参考MPEG-4Part14(http://en.wikipedia.org/wiki/Mp4)），它本身不是一种简单的视频格式，而是一个包装了视频和音频格式的容器。MP4的视频格式可以有DivX也可有H264，vp8，vp9，theora。每个浏览器因为专利费等原因对不同格式的视频支持情况也不相同，具体可以参考HTML5video(https://en.wikipedia.org/wiki/HTML5_video)所以在此次需求中，就遇到了视频无法在浏览器播放的问题，原因就是一开始的basevideo是直接由FFmpeg默认产生。为了解决这个问题，我们使用了一个底层编码为H264格式的底视频。这里如果各位同学对FFmpeg有深入研究，有更好的解决方案的话，欢迎提供其他解决思路～总结以上就是本次对FFmpeg的一些介绍和实际开发中的使用，这只是FFmpeg的冰山一角，它还有很多更加强大的能力，大家如果对音视频感兴趣可以深入进行学习。当然，如果对本文中实际的解决方案有疑问或者有更好的建议，欢迎进行讨论～参考文献FFmpeg文档(http://www.ffmpeg.org/)npmfluent-ffmpeg(https://www.npmjs.com/package/fluent-ffmpeg)npm@ffmpeg-installer/ffmpe(https://www.npmjs.com/package/@ffmpeg-installer/ffmpeg)大转转FE喜欢就加入我们吧