个人简介
👀个人主页: 前端杂货铺
🙋♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧
文章目录
- 前言
- FFmpeg
- FFmpeg的基本使用
- 总结
前言
大家好,这里是前端杂货铺。
上篇文章 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
如下,则执行成功:
与此同时,我们的 Demo.mp4 也生成出来了
打开视频,进度条可以正常的移动和拖动
右键-属性,我们查看该视频的基本信息,发现时长、帧宽度、帧高度、数据速率、总比特率和帧速率均有正确的信息
至此,问题解决完毕…
总结
FFmpeg 是非常强大的多媒体视频处理工具,它包括视频采集功能、视频格式转换、视频抓图、给视频加水印等。
为了解决 Canvas录制视频 的问题,本篇文章我们着重介绍了其 视频格式转换功能的使用
当然,其视频格式转换功能并不止于此,比如为视频帧率的帧率设置为 10 输出,以下代码即可实现:
ffmpeg -i C:\Users\Administrator\Desktop\前端杂货铺0.3069.webm -r 10 Demo.mp4
更多 FFmpeg 的功能请自行查阅文档…
好啦,本篇文章到这里就要和大家说再见啦,祝你这篇文章阅读愉快,你下篇文章的阅读愉快留着我下篇文章再祝!
参考资料:
- Canvas录制视频【作者:前端杂货铺_CSDN】
- 百度百科 · ffmpeg
- Windows下安装使用ffmpeg【作者:糖果_知乎】
- ffmpeg转码视频【作者:音视频开发老马_CSDN】