FFmpeg——使用Canvas录制视频尚存问题的解决方案

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉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 格式

// 把桌面上的 前端杂货铺0.3069.webm 视频转为 Demo.mp4视频（同时更改了名称和后缀名）
ffmpeg -i C:\Users\Administrator\Desktop\前端杂货铺0.3069.webm Demo.mp4
1
2

如下，则执行成功：

---

与此同时，我们的 Demo.mp4 也生成出来了

打开视频，进度条可以正常的移动和拖动

---

右键-属性，我们查看该视频的基本信息，发现时长、帧宽度、帧高度、数据速率、总比特率和帧速率均有正确的信息

至此，问题解决完毕…

---

总结

FFmpeg 是非常强大的多媒体视频处理工具，它包括视频采集功能、视频格式转换、视频抓图、给视频加水印等。

为了解决 Canvas录制视频 的问题，本篇文章我们着重介绍了其 视频格式转换功能的使用

当然，其视频格式转换功能并不止于此，比如为视频帧率的帧率设置为 10 输出，以下代码即可实现：

ffmpeg -i C:\Users\Administrator\Desktop\前端杂货铺0.3069.webm -r 10 Demo.mp4
1

更多 FFmpeg 的功能请自行查阅文档…

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

---

参考资料：

1. Canvas录制视频【作者：前端杂货铺_CSDN】
2. 百度百科 · ffmpeg
3. Windows下安装使用ffmpeg【作者：糖果_知乎】
4. ffmpeg转码视频【作者：音视频开发老马_CSDN】

---

---