个人简介
👀个人主页： 前端杂货铺
🙋♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程
🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧
文章目录
前言
大家好，这里是前端杂货铺。
上篇文章 Canvas录制视频 我们讲解了在Canvas 上录制视频的解决方案，但是仍存在几个问题：
- 通过非浏览器打开视频，无法拖动进度条
- MediaRecorder 原生支持 webm，不支持 avi、mp4、flv等格式
- 视频属性信息有丢失，无时长、数据速率和总比特率均为 0kbps，无帧速率
经过一段时间的调研，发现可以使用 FFmpeg 完美的解决该问题
FFmpeg
什么是 FFmpeg ？
FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。
简单来讲，通过 FFmpeg 我们可以实现不同视频格式的转换，并且不影响视频的属性信息
下载 FFmpeg，我们可以打开 FFmpeg-Builds 进行选择安装（博主安装的是：ffmpeg-master-latest-win64-gpl.zip）
下载完成后，我们需要对其进行解压，推荐使用 7-zip，不易导致解压 FFmpeg 时数据丢失（其它解压工具应该也没太大问题，可以尝试使用）
7-zip 免费开源，体积 2M 以内，很容易安装 7-zip下载地址，按需选择即可
FFmpeg 解压后的目录如下：
FFmpeg 安装完成之后，我们需要配置环境变量 此电脑-属性-高级系统设置-环境变量，找到 path 进行编辑，添加我们安装 FFmpeg 的 bin 目录的地址
之后我们检查 FFmpeg 是否真正安装并配置成功： win + r 打开命令行，输入 ffmpeg --version，回车，如果显示如下，恭喜你安装配置成功！
FFmpeg的基本使用
使用我们 Canvas录制视频 的代码录制一段视频到桌面 
，它是 .webm 格式的，我们接下来使用 FFmpeg 把 .webm 格式转为 mp4 格式
javascript
// 把桌面上的 前端杂货铺0.3069.webm 视频转为 Demo.mp4视频（同时更改了名称和后缀名）
ffmpeg -i C:\Users\Administrator\Desktop\前端杂货铺0.3069.webm Demo.mp4
如下，则执行成功：
与此同时，我们的 Demo.mp4 也生成出来了 
打开视频，进度条可以正常的移动和拖动
右键-属性，我们查看该视频的基本信息，发现时长、帧宽度、帧高度、数据速率、总比特率和帧速率均有正确的信息
至此，问题解决完毕...
总结
FFmpeg 是非常强大的多媒体视频处理工具，它包括视频采集功能、视频格式转换、视频抓图、给视频加水印等。
为了解决 Canvas录制视频 的问题，本篇文章我们着重介绍了其 视频格式转换功能的使用
当然，其视频格式转换功能并不止于此，比如为视频帧率的帧率设置为 10 输出，以下代码即可实现：
javascript
ffmpeg -i C:\Users\Administrator\Desktop\前端杂货铺0.3069.webm -r 10 Demo.mp4更多 FFmpeg 的功能请自行查阅文档...
好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！
参考资料：
- Canvas录制视频【作者：前端杂货铺_CSDN】
- 百度百科 · ffmpeg
- Windows下安装使用ffmpeg【作者：糖果_知乎】
- ffmpeg转码视频【作者：音视频开发老马_CSDN】
