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 格式

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 的功能请自行查阅文档...

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


参考资料:

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


相关推荐
脑子缺根弦1 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
肥or胖10 小时前
【FFmpeg 快速入门】本地播放器 项目
开发语言·qt·ffmpeg·音视频
笑虾10 小时前
bat 批处理实现 FFmpeg 命令导出 mov 到 png 序列帧
ffmpeg·png·mov·序列帧
DogDaoDao13 小时前
GitHub开源轻量级语音模型 Vui:重塑边缘智能语音交互的未来
大模型·github·音视频·交互·vui·语音模型·智能语音
张海森-1688201 天前
视频码率是什么?视频流分辨率 2688x1520_25fps采用 h264格式压缩,其码率为
音视频
mortimer2 天前
当AI配音遇上视频:实现音画同步的自动化工程实践
python·ffmpeg·ai编程
DogDaoDao2 天前
视频HDR技术全解析:从原理到应用的深度探索
音视频·hdr·sdr·视频渲染·hdr10·视频hdr技术标准·人眼视觉系统
IoT砖家涂拉拉2 天前
萌宠语聊新模板!借助On-App AI降噪与音频处理技术,远程安抚宠物更轻松、更安心!
人工智能·ai·app·音视频·智能家居·智能硬件·宠物
AI视觉网奇2 天前
截取视频 截取mp4 视频缩放
音视频
DogDaoDao2 天前
2025年 GitHub 主流开源视频生成模型介绍
人工智能·深度学习·开源·大模型·github·音视频·视频生成