一、ffmpeg介绍

ffmpeg 是视频处理最常用的开源软件。
它功能强大，用途广泛，大量用于视频网站和商业软件（比如 Youtube 和 iTunes），也是许多音频和视频格式的标准编码/解码实现。
参考文档：http://www.ruanyifeng.com/blog/2020/01/ffmpeg.html

1、容器

视频文件本身其实是一个容器（container），里面包括了视频和音频，也可能有字幕等其他内容。
常见的容器格式有以下几种。一般来说，视频文件的后缀名反映了它的容器格式。

查看 FFmpeg 支持的容器

  1. $ ffmpeg -formats

2、编码格式

视频和音频都需要经过编码，才能保存成文件。不同的编码格式（CODEC），有不同的压缩率，会导致文件大小和清晰度的差异。
常用的视频编码格式有：H.262、H.264、H.265

查看 FFmpeg 支持的编码格式

  1. $ ffmpeg -codecs

3、编码器（encoders）

编码器（encoders）是实现某种编码格式的库文件。只有安装了某种格式的编码器，才能实现该格式视频/音频的编码和解码。

以下是一些 FFmpeg 内置的视频和音频编码器。

  1. 视频
  2. libx264：最流行的开源 H.264 编码器
  3. NVENC：基于 NVIDIA GPU 的 H.264 编码器
  4. libx265：开源的 HEVC 编码器
  5. libvpx：谷歌的 VP8 和 VP9 编码器
  6. libaom：AV1 编码器
  8. 音频
  9. libfdk-aac
  10. aac

查看 FFmpeg 已安装的编码器。

  1. $ ffmpeg -encoders

二、ffmpeg的使用

1、ffmpeg的五个部分

FFmpeg 的命令行参数非常多，可以分成五个部分。

  1. $ ffmpeg {1} {2} -i {3} {4} {5}

上面命令中，五个部分的参数依次如下。

  1. 全局参数
  2. 输入文件参数
  3. 输入文件
  4. 输出文件参数
  5. 输出文件

参数太多的时候，为了便于查看，ffmpeg 命令可以写成多行。

  1. $ ffmpeg \
  2. [全局参数] \
  3. [输入文件参数] \
  4. -i [输入文件] \
  5. [输出文件参数] \
  6. [输出文件]

例子

  1. $ ffmpeg \
  2. -y \ # 全局参数
  3. -c:a libfdk_aac -c:v libx264 \ # 输入文件参数
  4. -i input.mp4 \ # 输入文件
  5. -c:v libvpx-vp9 -c:a libvorbis \ # 输出文件参数
  6. output.webm # 输出文件

上面的命令将 mp4 文件转成 webm 文件，这两个都是容器格式。
输入的 mp4 文件的音频编码格式是 aac，视频编码格式是 H.264；
输出的 webm 文件的视频编码格式是 VP9，音频格式是 Vorbis。

如果不指明编码格式，FFmpeg 会自己判断输入文件的编码。因此，上面的命令可以简单写成下面的样子。

  1. $ ffmpeg -i input.avi output.mp4

2、FFmpeg 常用的命令行参数如下。

  1. -c：指定编码器
  2. -c copy：直接复制，不经过重新编码（这样比较快）
  3. -c:v：指定视频编码器
  4. -c:a：指定音频编码器
  5. -i：指定输入文件
  6. -an：去除音频流
  7. -vn： 去除视频流
  8. -preset：指定输出的视频质量，会影响文件的生成速度，有以下几个可用的值 ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow。
  9. -y：不经过确认，输出时直接覆盖同名文件。

三、ffmpeg的常见用法

1、查看文件信息

  1. $ ffmpeg -i input.mp4

上面命令会输出很多冗余信息，加上-hide_banner参数，可以只显示元信息。

  1. $ ffmpeg -i input.mp4 -hide_banner

2、转化编码格式

转换编码格式（transcoding）指的是， 将视频文件从一种编码转成另一种编码。比如转成 H.264 编码，一般使用编码器libx264，所以只需指定输出文件的视频编码器即可。

  1. $ ffmpeg -i [input.file] -c:v libx264 output.mp4

下面是转成 H.265 编码的写法。 hevc也叫H.265。

  1. $ ffmpeg -i [input.file] -c:v libx265 output.mp4

3、转化容器格式

转换容器格式（transmuxing）指的是，将视频文件从一种容器转到另一种容器。下面是 mp4 转 webm 的写法。

  1. $ ffmpeg -i input.mp4 -c copy output.webm

上面例子中，只是转一下容器，内部的编码格式不变，所以使用-c copy指定直接拷贝，不经过转码，这样比较快。

4、调整码率

调整码率（transrating）指的是，改变编码的比特率，一般用来将视频文件的体积变小。下面的例子指定码率最小为964K，最大为3856K，缓冲区大小为 2000K。

  1. $ ffmpeg \
  2. -i input.mp4 \
  3. -minrate 964K -maxrate 3856K -bufsize 2000K \
  4. output.mp4

5、改变分辨率

下面是改变视频分辨率（transsizing）的例子，从 1080p 转为 480p 。

  1. $ ffmpeg \
  2. -i input.mp4 \
  3. -vf scale=480:-1 \
  4. output.mp4

6、提取音频

如果需要从视频里面提取音频（demuxing），可以像下面这样写。

  1. $ ffmpeg \
  2. -i input.mp4 \
  3. -vn -c:a copy \
  4. output.aac

上面例子中，-vn表示去掉视频，-c:a copy表示不改变音频编码，直接拷贝。

7、添加音轨

添加音轨（muxing）指的是，将外部音频加入视频，比如添加背景音乐或旁白。

  1. $ ffmpeg \
  2. -i input.aac -i input.mp4 \
  3. output.mp4

上面例子中，有音频和视频两个输入文件，FFmpeg 会将它们合成为一个文件。

8、截图

下面的例子是从指定时间开始，连续对1秒钟的视频进行截图。

  1. ffmpeg \
  2. -y \
  3. -i input.mp4 \
  4. -ss 00:01:24 -t 00:00:01 \
  5. output_%3d.jpg

如果只需要截一张图，可以指定只截取一帧。

  1. $ ffmpeg \
  2. -ss 01:23:45 \
  3. -i input \
  4. -vframes 1 -q:v 2 \
  5. output.jpg

上面例子中，-vframes 1指定只截取一帧，-q:v 2表示输出的图片质量，一般是1到5之间（1 为质量最高）。

9、裁剪

裁剪（cutting）指的是，截取原始视频里面的一个片段，输出为一个新视频。可以指定开始时间（start）和持续时间（duration），也可以指定结束时间（end）

  1. $ ffmpeg -ss [start] -i [input] -t [duration] -c copy [output]
  2. $ ffmpeg -ss [start] -i [input] -to [end] -c copy [output]

下面是实际的例子。

  1. $ ffmpeg -ss 00:01:50 -i [input] -t 10.5 -c copy [output]
  2. $ ffmpeg -ss 2.5 -i [input] -to 10 -c copy [output]

上面例子中，-c copy表示不改变音频和视频的编码格式，直接拷贝，这样会快很多。

由非关键帧引发的问题解决：
参考：https://zhuanlan.zhihu.com/p/27366331

  1. ffmpeg -ss 00:00:00 -t 00:00:20 -accurate_seek -i input -c copy -avoid_negative_ts 1 output

10、为音频添加封面

有些视频网站只允许上传视频文件。如果要上传音频文件，必须为音频添加封面，将其转为视频，然后上传。
下面命令可以将音频文件，转为带封面的视频文件。

  1. $ ffmpeg \
  2. -loop 1 \
  3. -i cover.jpg -i input.mp3 \
  4. -c:v libx264 -c:a aac -b:a 192k -shortest \
  5. output.mp4

上面命令中，有两个输入文件，一个是封面图片cover.jpg，另一个是音频文件input.mp3。-loop 1参数表示图片无限循环，-shortest参数表示音频文件结束，输出视频就结束。

四、前端使用ffmpeg

https://ffmpegwasm.netlify.app/#demo

1、安装

  1. npm install @ffmpeg/ffmpeg @ffmpeg/core --save

2、引入

  1. import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

3、使用

Browser

  1. <body>
  2.   <video id="player" controls></video>
  3.   <input type="file" id="uploader">
  4.   <script src="ffmpeg.min.js"></script>
  5.   <script>
  6.     const { createFFmpeg, fetchFile } = FFmpeg;
  7.     const ffmpeg = createFFmpeg({ log: true });
  8.     const transcode = async ({ target: { files } }) => {
  9.       const { name } = files[0];
  10.       await ffmpeg.load();
  11.       ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
  12.       await ffmpeg.run('-i', name,  'output.mp4');
  13.       const data = ffmpeg.FS('readFile', 'output.mp4');
  14.       const video = document.getElementById('player');
  15.       video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
  16.     }
  17.     document
  18.       .getElementById('uploader').addEventListener('change', transcode);
  19.   </script>
  20. </body>

Vue

  1. <template>
  2.   <div class="home">
  3.     <input type="file" ref="uploader" @change="change()"/> <br>
  4.     <input type="text" v-model="cmd" style="width:500px;"></input> <br>
  5.     <video :src="videoSrc" controls ></video>
  6.   </div>
  7. </template>
  9. <script>
  10. import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
  11. export default {
  12.   data() {
  13.     return {
  14.       videoSrc:'',
  15.       cmd:'ffmpeg -i input -c:v libx264 -an output',
  16.     }
  17.   },
  18.   methods: {
  19.     async change(){
  20.       const files = this.$refs.uploader.files
  21.       this.videoSrc = await this.ffmpegRun(files,this.cmd)
  22.     },
  23.     async ffmpegRun(files,cmd){
  24.       const ffmpeg = createFFmpeg({ log: true });
  25.       const { name } = files[0];
  26.       await ffmpeg.load();
  27.       cmd = cmd.replace('input',name);
  28.       cmd = cmd.replace('output','output.mp4');
  29.       cmd = cmd.replace('ffmpeg ','');
  30.       const cmdArr = cmd.split(' ');
  31.       ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
  32.       await ffmpeg.run(...cmdArr);
  33.       const data = ffmpeg.FS('readFile', 'output.mp4');
  34.       return URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
  35.     }
  36.   }
  37. }
  38. </script>
  40. //vue.config.js
  41. const path = require('path');
  42. const express = require('express');
  44. module.exports = {
  45.   publicPath: process.env.NODE_ENV === 'production'
  46.     ? '/vue-app/'
  47.     : '/',
  48.   configureWebpack: {
  49.     devServer: {
  50.       before: app => {
  51.         app.use('/node_modules/', express.static(path.resolve(__dirname, 'node_modules')))
  52.       },
  53.       headers: { "Cross-Origin-Embedder-Policy" : "require-corp", "Cross-Origin-Opener-Policy" : "same-origin" }
  54.     }
  55.   }
  56. };

Node.js

  1. const fs = require('fs');
  2. const { createFFmpeg, fetchFile } = require('@ffmpeg/ffmpeg');
  3. const ffmpeg = createFFmpeg({ log: true });
  4. (async () => {
  5.   await ffmpeg.load();
  6.   ffmpeg.FS('writeFile', 'test.avi', await fetchFile('./test.avi'));
  7.   await ffmpeg.run('-i', 'test.avi', 'test.mp4');
  8.   await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', 'test.mp4'));
  9.   process.exit(0);
  10. })();