• 在安卓项目中使用 FFmpeg 实现 GIF 拼接（可扩展为实现视频会议多人同屏效果）

    前言

    在我的项目 隐云图解制作 中，有一个功能是按照一定规则将多张 gif 拼接成一张 gif。

    当然，这里说的拼接是类似于拼图一样的拼接，而不是简单粗暴的把多个 gif 合成一个 gif 并按顺序播放。

    大致效果如下：

    注意：上面的动图只展示了预览效果，没有展示实际合成效果，但是合成效果和预览效果是一摸一样的，有兴趣的话，我可以再开一篇文章讲解怎么实现这个预览效果

    实现方法

    FFmpeg 简介

    在开始之前先简单介绍一下什么是 FFmpeg，不过我相信只要是稍微接触过一点音视频的开发者都知道 FFmpeg。

    FFmpeg 是一个开放源代码的自由软件，可以执行音频和视频多种格式的录影、转换、串流功能，包含了 libavcodec ——这是一个用于多个项目中音频和视频的解码器库，以及 libavformat ——一个音频与视频格式转换库。

    简单来说，只要是和音视频相关的操作，几乎都可以使用 FFmpeg 来实现。

    当然，FFmpeg 是一个纯命令行工具，所以我在这里简单介绍几个本文需要用到的参数：

    1. -y 若指定的输出文件已存在则强制覆盖
    2. -i 设置输入文件，可以设置多个
    3. -filter_complex 设置复杂滤镜，我们这次要实现的拼接 gif 就是依靠这个参数完成

    在安卓中使用 FFmpeg

    我现在使用的库是 ffmpeg-kit 使用这个库可以直接集成 FFmpeg 到项目中，并且能够方便的执行 FFmpeg 命令。

    该库执行 FFmpeg 很简单，只需要：

    1. val session = FFmpegKit.executeWithArguments("your cmd text")
    2. if (ReturnCode.isSuccess(session.returnCode)) {
    3.     Log.i(TAG, "Command execution completed successfully.")
    4. } else if (ReturnCode.isCancel(session.returnCode)) {
    5.     Log.i(TAG, "Command execution cancelled by user.")
    6. } else {
    7.     Log.e(TAG, String.format("Command execution fail with state %s and rc %s.%s", session.state, session.returnCode, session.failStackTrace))
    8. }
    9. 复制代码

    因为我需要自己管理线程，所以使用的是同步执行

    另外，我几乎试过当前 GitHub 上最近还在维护所有的 FFmpeg for Android 库，甚至还自己写过一个，但是都或多或少的有点问题，最终只有这个库能够适配我的需求。

    在此弱弱的吐槽一下某些“开源”库，只提供二进制包，不提供编译脚本，也不提供源代码，提供的二进制包缺少了某些依赖，我想自己动手编译都没法编译，一看 README ，好嘛，定制编译请联系作者付费获取，合着这开源开了个寂寞啊。

    拼接命令

    我们先来看一段完整的拼接命令，我会详细讲解各个参数的作用，最后再讲解如何动态生成需要的命令。

    完整命令：

    1. # 覆盖输出文件
    2. -y 
    3.  
    4. # 输入文件
    5. -i jointBg.png 
    6. -i 1.gif 
    7. -i 2.gif 
    8. -i 3.gif 
    9. -i 4.gif 
    10.  
    11. # 开始进行滤镜转换
    12. -filter_complex 
    13. [0:v]pad=1280:2161[bg];
    14. [1:v]scale=640:1137[gif0];
    15. [2:v]scale=640:368[gif1];
    16. [3:v]scale=640:1024[gif2];
    17. [4:v]scale=640:368[gif3];
    18.  
    19. [bg][gif0] overlay=0:0[over0];
    20. [over0][gif1] overlay=640:0[over1];
    21. [over1][gif2] overlay=0:1137[over2];
    22. [over2][gif3] overlay=640:368 
    23.  
    24. # 输出路径
    25. out.gif
    26. 复制代码

    为了方便查看，我使用换行分割了命令，使用时可不能加换行哦

    在这段代码中，我们使用 -y 参数指定如果输出文件已存在则覆盖。

    接下来使用 -i 参数输入了 5 个文件，其中 jointBg.png 是我生成的一个 1x1 像素的图片，用于后面扩展成背景画布，其他的 gif 文件就是要拼接的源文件。

    然后使用 -filter_complex 表示要做一个复杂滤镜，后面跟着的都是这个复杂滤镜的参数：

    [0:v]pad=1280:2161[bg]; 表示将输入的第一个文件作为视频打开，并将其当成画板，同时缩放分辨率为 1280x2161 （后面会讲这些分辨率是怎么来的），最后取名为 bg 。

    [1:v]scale=640:1137[gif0]; 表示将输入的第二个文件作为视频打开，并缩放分辨率至 640x1137 ， 最后取别名为 gif0 。

    下面的三行语句作用相同。

    然后就是开始拼接：

    [bg][gif0] overlay=0:0[over0]; 表示将 gif0 覆盖到 bg 上，并且覆盖的起点坐标为 0x0 ，最后将该其取名为 over0 。

    下面的三行代码作用相同。

    简单理解一下这个过程：

    1. 创建一个图片，并缩放尺寸至事先计算出来的最终拼接成品的尺寸作为背景
    2. 依次将输入的文件缩放至事先计算好的尺寸
    3. 依次将缩放后的输入文件覆盖（叠加）到背景上

    动画演示：

    仅作演示便于理解，实际拼接时一般都是放大 bg ， 缩小 gif，并且 gif 将完全覆盖住 bg

    计算尺寸

    上一节中的命令涉及到很多缩放过程，那么这个缩放的尺寸是如何得到的呢？

    这一节我们将讲解如何计算尺寸。

    首先，我们需要知道的是，当前这个功能，一共有三种拼接模式：

    1. 横向拼接
    2. 纵向拼接
    3. 宫格拼接

    本文主要讲解的是宫格拼接，宫格拼接的样式即文章开头的预览效果那种。

    既然是宫格拼接，那么绕不开的就是如果拼接的动图尺寸不一致，怎么确保拼接出来的动图美观？

    这里我们有两种策略，由用户自行选择：

    1. 完全以最小尺寸的图片为基准，将所有图片强制缩放到最小尺寸，这样可能会造成部分动图被拉伸失真。
    2. 以所有图片中的最小宽度为基准，等比例缩放其他图片，这样可以确保所有图片都不会失真，但是拼接出来的成品将不是一个完美的矩形，而是一个留有黑色背景的异形图片。

    确定了我们使用的两种缩放策略，下面就是开始计算成品的总尺寸和每张输入图片的需要缩放尺寸。

    不过在此之前，我们需要遍历所有输入图片，拿到所有图片的原始尺寸和所有图片中的最小尺寸：

    1. val jointGifResolution: MutableList<MutableList<Int>> = ArrayList() // 所有动图的原始尺寸 list
    2. var minValue = Int.MAX_VALUE  // 最小宽度(别问我为什么不命名成 minWidth ，问就是兼容性)
    3. var minValue2 = Int.MAX_VALUE  // 最小高度
    4.  
    5. for (uri in gifUris) {
    6.     val gifDrawable = GifDrawable(context.contentResolver, uri)
    7.     val height = gifDrawable.intrinsicHeight  // 当前 gif 的原始高度
    8.     val width = gifDrawable.intrinsicWidth  // 当前 gif 的原始宽度
    9.     jointGifResolution.add(mutableListOf(width, height))  // 将尺寸加入 list
    10.     
    11.     // 计算最小宽高
    12.     if (minValue > width) {
    13.         minValue = width
    14.     }
    15.     if (minValue2 > height) {
    16.         minValue2 = height
    17.     }
    18. }
    19. 复制代码

    其中，gifUris 即事先获取到的所有输入动图的 uri 列表。

    这里我们使用到了 GifDrawable 获取动图的尺寸，因为这不是本文的重点，所以不多加解释，读者只需知道这样可以拿到 gif 的原始尺寸即可。

    拿到所有动图的原始宽高和最小宽高后，下一步是计算需要的缩放值：

    1. var totalHeight = 0
    2. var totalWidth = 0
    3.  
    4. var squareIndex = 0
    5. val squareTotalHeight: MutableList<Int> = arrayListOf()
    6.  
    7. jointGifResolution.forEachIndexed { index, resolution ->
    8.     val jointWidth = minValue // 无论使用缩放策略 1 还是 2，缩放宽度都是最小宽度
    9.     val jointHeight = when (scaleMode) {
    10.         // 如果使用缩放策略 2 则需要按比例计算出缩放高度
    11.         GifTools.JointScaleModeWithRatio -> resolution[1] * minValue / resolution[0]
    12.         // 如果使用缩放策略 1 则直接强制缩放到最小高度
    13.         else -> minValue2
    14.     }
    15.     // 因为宫格拼接只能使用 2 的 n 次幂张图片，所以每行图片数量可以根据图片总数算出，不过太麻烦，所以这里我打了个表，直接从表里面拿
    16.     // val JointGifSquareLineLength = hashMapOf(4 to 2, 9 to 3, 16 to 4, 25 to 5, 36 to 6, 49 to 7, 64 to 8, 81 to 9, 100 to 10)
    17.     var lineLength = GifTools.JointGifSquareLineLength[jointGifResolution.size]
    18.     if (lineLength == null) {
    19.         lineLength = sqrt(jointGifResolution.size.toDouble()).toInt()
    20.     }
    21.     
    22.     if (scaleMode == GifTools.JointScaleModeWithRatio) { // 使用等比缩放策略
    23.         
    24.         if (index < lineLength) {  // 所有图片宽度都是一样的，所以直接加一行的宽度得到的就是最大宽度
    25.             totalWidth += jointWidth
    26.         }
    27.         try {
    28.             // 这里是获取每一列的当前行高，并将其加起来，最终遍历完会得到当前列的高度
    29.             val tempIndex = squareIndex % lineLength
    30.             Log.e(TAG, "getJointGifResolution: temp index = $tempIndex")
    31.             if (squareTotalHeight.size <= tempIndex) {
    32.                 squareTotalHeight.add(tempIndex, 0)
    33.             }
    34.             squareTotalHeight[tempIndex] = squareTotalHeight[tempIndex] + jointHeight
    35.         } catch (e: java.lang.Exception) {
    36.             Log.e(TAG, "getJointGifResolution: ", e)
    37.         }
    38.         
    39.         // 将缩放尺寸更新至尺寸列表
    40.         jointGifResolution[index] = mutableListOf(jointWidth, jointHeight)
    41.     } else {
    42.         // 如果不是按比例缩放，则直接将最小宽高存入总宽高
    43.         if (index < lineLength) {
    44.             totalHeight += min(jointHeight, jointWidth)
    45.             totalWidth += min(jointHeight, jointWidth)
    46.         }
    47.         
    48.         // 将缩放尺寸更新至尺寸列表
    49.         jointGifResolution[index] = mutableListOf(min(jointHeight, jointWidth), min(jointHeight, jointWidth))
    50.     }
    51.     squareIndex++
    52. }
    53. 复制代码

    上面的代码我已经加了详细的注释，至此所有图片的缩放尺寸已计算出来。

    即，总尺寸为：

    1. if (scaleMode != GifTools.JointScaleModeWithRatio) {
    2.     jointGifResolution.add(mutableListOf(totalWidth, totalHeight))
    3. }
    4. else {
    5.     Log.e(TAG, "getJointGifResolution: $squareTotalHeight")
    6.     jointGifResolution.add(mutableListOf(totalWidth, Collections.max(squareTotalHeight)))
    7. }
    8. 复制代码

    最小宽高为：

    1. jointGifResolution.add(mutableListOf(minValue, minValue2))
    2. 复制代码

    对了，你可能会奇怪，为什么我要把总尺寸和最小宽高存入缩放尺寸 list，哈哈，这是因为我懒，所以我对这个 list 的定义是：

    1. /**
    2.  *
    3.  * 遍历获取所有 gifUris 中的动图分辨率
    4.  *
    5.  * 并将经过处理后的所有长、宽之和存入 [size-2] ；
    6.  *
    7.  * 将最小的长宽存入 [size-1]
    8.  * */
    9. 复制代码

    动态生成命令

    完成了尺寸的计算，下一步是按照输入文件和计算出来的尺寸动态的生成 FFmpeg 命令。

    不过在这之前，我们需要先创建一个 1x1 的图片，用来扩展成背景：

    1. private suspend fun createJointBgPic(context: Context): File? {
    2.     val drawable = ColorDrawable(Color.parseColor("#FFFFFFFF"))
    3.     val bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888)
    4.     val canvas = Canvas(bitmap)
    5.     drawable.draw(canvas)
    6.     return try {
    7.         Tools.saveBitmap2File(bitmap, "jointBg", context.externalCacheDir)
    8.     } catch (e: Exception) {
    9.         log2text("Create cache bg fail!", "e", e)
    10.         null
    11.     }
    12. }
    13. 复制代码

    然后从尺寸列表中取出并删除追加在末尾的总尺寸和最小尺寸：

    1. // 别看了，没写错，就是两个 size-1 ，为啥？你猜
    2. val minResolution = gifResolution.removeAt(gifResolution.size - 1)
    3. val totalResolution = gifResolution.removeAt(gifResolution.size - 1)
    4. 复制代码

    然后，就是开始拼接命令，这里我为了方便使用，自己写了一个 FFmpeg 命令的 Builder：

    1. /**
    2.  * @author equationl
    3.  * */
    4. public class FFMpegArgumentsBuilder {
    5.     private final String[] cmd;
    6.  
    7.     public static class Builder {
    8.         private final ArrayList<String> cmd = new ArrayList<>();
    9.  
    10.         /**
    11.         * Such as add [arg, value] to cmd[]
    12.         * */
    13.         public Builder setArgWithValue(String arg, String value) {
    14.             this.cmd.add(arg);
    15.             this.cmd.add(value);
    16.             return this;
    17.         }
    18.  
    19.         /**
    20.          * Such as add arg to cmd[]
    21.          * */
    22.         public Builder setArg(String arg) {
    23.             this.cmd.add(arg);
    24.             return this;
    25.         }
    26.  
    27.         /**
    28.         * Such as "-ss time"
    29.         * */
    30.         public Builder setStartTime(String time) {
    31.             this.cmd.add("-ss");
    32.             this.cmd.add(time);
    33.             return this;
    34.         }
    35.  
    36.         /**
    37.          * Such as "-to time"
    38.          * */
    39.         public Builder setEndTime(String time) {
    40.             this.cmd.add("-to");
    41.             this.cmd.add(time);
    42.             return this;
    43.         }
    44.  
    45.         /**
    46.         * Such as "-i input"
    47.         * */
    48.         public Builder setInput(String input) {
    49.             this.cmd.add("-i");
    50.             this.cmd.add(input);
    51.             return this;
    52.         }
    53.  
    54.         /**
    55.         * <p>Such as "-t time"</p>
    56.          * <p>Note: call this before addInput() will limit input duration time; call before addOutput() will limit output duration time.</p>
    57.         * */
    58.         public Builder setDurationTime(String time) {
    59.             this.cmd.add("-t");
    60.             this.cmd.add(time);
    61.             return this;
    62.         }
    63.  
    64.         /**
    65.          * <p>if isOverride is true, add "-y"; else add "-n"</p>
    66.          * <p>if do not set this arg, FFMpeg may ask for if override existed output file</p>
    67.          * */
    68.         public Builder setOverride(Boolean isOverride) {
    69.             if (isOverride) {
    70.                 this.cmd.add("-y");
    71.             }
    72.             else {
    73.                 this.cmd.add("-n");
    74.             }
    75.             return this;
    76.         }
    77.  
    78.         /**
    79.          * Add output file to cmd[].<b>You must call this at end.</b>
    80.          * */
    81.         public Builder setOutput(String output) {
    82.             this.cmd.add(output);
    83.             return this;
    84.         }
    85.  
    86.         /**
    87.         * <p>Set input/output file format</p>
    88.          * <p>Such as "-f format"</p>
    89.         * */
    90.         public Builder setFormat(String format) {
    91.             this.cmd.add("-f");
    92.             this.cmd.add(format);
    93.             return this;
    94.         }
    95.  
    96.         /**
    97.          * Set video filter
    98.          * Such as "-vf filter"
    99.          * */
    100.         public Builder setVideoFilter(String filter) {
    101.             this.cmd.add("-vf");
    102.             this.cmd.add(filter);
    103.             return this;
    104.         }
    105.  
    106.         /**
    107.          * Set frame rate, Such as "-r frameRate"
    108.         * */
    109.         public Builder setFrameRate(String frameRate) {
    110.             this.cmd.add("-r");
    111.             this.cmd.add(frameRate);
    112.             return this;
    113.         }
    114.  
    115.         /**
    116.          * Set frame size, Such as "-s frameSize"
    117.          * */
    118.         public Builder setFrameSize(String frameSize) {
    119.             this.cmd.add("-s");
    120.             this.cmd.add(frameSize);
    121.             return this;
    122.         }
    123.  
    124.         public FFMpegArgumentsBuilder build() {
    125.             return new FFMpegArgumentsBuilder(this, false);
    126.         }
    127.  
    128.         /**
    129.          * Build cmd
    130.          *
    131.          * @param isAddFFmpeg true: Add a ffmpeg flag in first
    132.         * */
    133.         public FFMpegArgumentsBuilder build(Boolean isAddFFmpeg) {
    134.             return new FFMpegArgumentsBuilder(this, isAddFFmpeg);
    135.         }
    136.     }
    137.  
    138.     public String[] getCmd() {
    139.         return this.cmd;
    140.     }
    141.  
    142.     private FFMpegArgumentsBuilder(Builder b, Boolean isAddFFmpeg) {
    143.         if (isAddFFmpeg) {
    144.             b.cmd.add(0, "ffmpeg");
    145.         }
    146.         this.cmd = b.cmd.toArray(new String[0]);
    147.     }
    148.  
    149. }
    150. 复制代码

    开始生成命令文本：

    首先是输入文件等，

    1. val cmdBuilder = FFMpegArgumentsBuilder.Builder()
    2. cmdBuilder.setOverride(true) // -y
    3.         .setInput(jointBg.absolutePath)  // -i 输入背景
    4.  
    5. for (uri in gifUris) {  //输入GIF
    6.     cmdBuilder.setInput(FileUtils.getMediaAbsolutePath(context, uri)) // -i
    7. }
    8.  
    9. cmdBuilder.setArg("-filter_complex")  //添加过滤器
    10. 复制代码

    然后是添加过滤器参数，

    1. //过滤器参数
    2. var cmdFilter = ""
    3.  
    4. //设置背景并扩展分辨率到 total
    5. cmdFilter += "[0:v]pad=${totalResolution[0]}:${totalResolution[1]}[bg];"
    6.  
    7. //将输入文件缩放并取别名为 gifX (X为索引）
    8. gifResolution.forEachIndexed { index, mutableList ->
    9.     cmdFilter += "[${index+1}:v]scale=${mutableList[0]}:${mutableList[1]}[gif$index];"
    10. }
    11.  
    12. cmdFilter += "[bg][gif0] overlay=0:0[over0];"   //将第一个GIF叠加 bg 的 0:0 （即画面左下角）
    13.  
    14. //开始叠加剩余动图
    15. cmdFilter += getCmdFilterOverlaySquare(gifUris, gifResolution)
    16. 复制代码

    其中，getCmdFilterOverlaySquare 用于计算 gif 的摆放坐标，并合成参数命令，实现如下：

    1. private fun getCmdFilterOverlaySquare(gifUris: ArrayList<Uri>, gifResolution: MutableList<MutableList<Int>>): String {
    2.     //     "[bg][gif0] overlay=0:0[over0];"
    3.     var cmdFilter = ""
    4.     var h: Int
    5.     var w: Int
    6.     var index = 0
    7.     var lineLength = GifTools.JointGifSquareLineLength[gifUris.size]
    8.     if (lineLength == null) {
    9.         lineLength = sqrt(gifUris.size.toDouble()).toInt()
    10.     }
    11.  
    12.     for (i in 0 until lineLength) {
    13.         for (j in 0 until lineLength) {
    14.             if ((i==lineLength-1 && j==lineLength-1) || (i==0 && j==0)) { //最后一张单独处理,第一张已处理
    15.                 continue
    16.             }
    17.             if (j==0) { //竖排第一个，w当然等于 0
    18.                 w = 0
    19.             } else {
    20.                 w = 0
    21.                 for (k in 0 until j) {
    22.                     w += gifResolution[i*lineLength+k][0]
    23.                 }
    24.             }
    25.             if (i==0) {  //横排第一个，h等于0
    26.                 h = 0
    27.             } else {
    28.                 h = 0
    29.                 for (k in j until index step lineLength) {
    30.                     h += gifResolution[k][1]
    31.                 }
    32.             }
    33.  
    34.             cmdFilter += "[over${index}][gif${index+1}] overlay=$w:$h[over${index + 1}];"
    35.             index++
    36.         }
    37.     }
    38.  
    39.     w = 0
    40.     for (i in 0 until lineLength-1) {
    41.         w += gifResolution[i+lineLength*(lineLength-1)][0]
    42.     }
    43.  
    44.     h = 0
    45.     for (i in lineLength-1 until lineLength*lineLength-1  step lineLength) {
    46.         h += gifResolution[i][1]
    47.     }
    48.  
    49.     cmdFilter += "[over${index}][gif${index+1}] overlay=$w:$h"
    50.  
    51.     return cmdFilter
    52. }
    53. 复制代码

    上述代码不难理解，总之就是根据遍历到的 gif 索引，判断它应该所处的坐标，然后加入过滤器参数。

    最后，将过滤参数加入命令，加入输出文件路径，即可拿到最终命令文本 cmd：

    1. cmdBuilder.setArg(cmdFilter)
    2. cmdBuilder.setOutput(resultPath)
    3.  
    4. val cmd = cmdBuilder.build(false).cmd
    5. 复制代码

    最后，只要将这个命令文本仍给 FFmpeg 执行即可！

    总结

    虽然本文仅仅说的是如何拼接 Gif ， 但是 FFmpeg 是十分强大的，我这个属于是抛砖引玉。

    相信各位有过这样一种需求，那就是做一个多人同屏的实时会议功能，如果在看本文之前你可能不知所措，但是看完本文你一定会觉得这是小菜一碟。

    因为 FFmpeg 原生支持串流，支持视频处理，你只要把我这里的输入文件改成串流，输出文件改成串流，再按照你的需求改一下坐标，那不就完成了吗？

     

  • 相关阅读:
    《古代汉语》王力笔记整理版
    嵌入式Linux应用开发-第十二章设备树的改造
    将Xml转为Map集合工具类
    小程序支付基本流程
    算法37|738，714，968
    Android Compose 十二：常用组件列表 上拉加载
    低代码在物品领用领域数字化转型的案例分析
    体育场馆预约小程序,体育馆预约小程序,体育馆预约系统小程序
    贪心算法小结
    sqlserver在设计表结构时，如何选择字段的数据类型
  • 原文地址：https://blog.csdn.net/sinat_17133389/article/details/126931995