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

个人简介

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

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


参考资料:

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

在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/117010.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

creating server tcp listening socket 127.0.0.1:6379: bind No error

window下启动redis服务报错: creating server tcp listening socket 127.0.0.1:6379: bind No error 解决方案如下按顺序输入如下命令即可连接成功 redis-cli.exeshutdownexit运行:redis-server.exe redis.windows.conf shutdown出现以下错误&#xff…

Type-C接口详解

USB接口发展史 USB接口历经Type-A→Type-B→Type-C五次大的更新换代;目前Type-A Standard作为标准USB接口形式,仍然在大范围应用,而Micro-A以及Type-B系列已经慢慢谈出人们的视野,逐渐被新型的Type-C代替。 Type-C接口 24PIN Typ…

路由器基础(十一):ACL 配置

访问控制列表 (Access Control List,ACL) 是目前使用最多的访问控制实现技术。访问控制列表是路由器接口的指令列表,用来控制端口进出的数据包。ACL适用于所有的被路由协议,如IP、IPX、AppleTalk 等。访问控制列表可以分为基本访问控制列表和高级访问控制…

Redis之哨兵模式

文章目录 前言一、主从复制1.概述2.作用3.模拟实践搭建场景模拟实践 二、哨兵模式1.概述2.配置使用3.优缺点4.sentinel.conf完整配置 总结 前言 从主从复制到哨兵模式。 一、主从复制 1.概述 主从复制,是指将一台 Redis 服务器的数据,复制到其他的 Red…

UE5——源码阅读——1

UE启动 hInInstance :项目实例 hPrevInstance:项目上一个实例 pCmdLine:参数 nCmdShow:窗口显示 TRACE_BOOKMARK(TEXT(“WinMain.Enter”));:UE用来追踪记录的函数,用于标记应用程序在执行过程中一些特定的…

Git 使用

Git 使用 目录 Git 使用一、命令行操作0. 配置用户名邮箱1. 初始化一个新的 Git 仓库2. 从远程仓库克隆一个仓库3. 添加文件到暂存区4. 提交更改到本地仓库5. 拉取/推送代码6. 分区操作​7. 其他查看操作8.基本操作流程 二、idea/pycharm操作1、 集成git2、 idea添加项目3、 fe…

网络工程师进阶课:华为HCIP认证课程介绍

微思网络HCIP VIP试听课程:DHCP协议原理与配置https://www.bilibili.com/video/BV1cy4y1J7yg/?spm_id_from333.999.0.0 【赠送】IT技术视频教程,白拿不谢!思科、华为、红帽、数据库、云计算等等 https://xmws-it.blog.csdn.net/article/det…

2.2整式的加减(第1课时)——合并同类项教学及作业设计

【学习目标】 1.理解同类项的概念,并能正确辨别同类项. 2.理解合并同类项的依据是乘法分配律,掌握合并同类项的方法. 知识点归纳: ★合并同类项后,所得的项的系数是___________…

docker部署elk

目录 前言 一、创建程序工作路径 二、创建私有网络 三、部署elasticsearch 1.先搜速后下载 2.创建一个基础的容器(此步骤是为了拷贝容器里的文件) 3.拷贝文件到宿主机 3.1进入容器 3.2拷贝并授权 3.3删除基础容器 4.创建容器 5.访问9200测试 …

【java学习—十三】处理流之三:标准输入输出流(3)

文章目录 1. 相关概念2. 举例与练习2.1. 举例2.2. 练习 1. 相关概念 System.in 和 System.out 分别代表了系统标准的输入和输出设备,默认输入设备是键盘,输出设备是显示器。     System.in 的类型是 InputStream     System.out 的类型是 PrintS…

C++进阶篇4---set和map

一、关联式容器 在初阶篇中,我们已经接触过STL中的部分容器,比如:vector、list、deque等,这些容器统称为序列式容器,因为其底层为线性序列的数据结构,里面存储的是元素本身。 那什么是关联式容器&#xff1…

【算法挨揍日记】day19——62. 不同路径、63. 不同路径 II

62. 不同路径 62. 不同路径 题目描述: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” &#x…

14.1 Linux 并发与竞争

一、并发与竞争 并发:多个执行单元同时、并行执行。 竞争:并发的执行单元同时访问共享资源(硬件资源和软件上的全局变量等)易导致竞态。 二、原子操作 1. 原子操作简介 原子操作:不能再进一步分割的操作,一般用于变量或位操作。 …

AI:53-基于机器学习的字母识别

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌本专栏包含以下学习方向: 机器学习、深度学…

latex自定义缩写

Latex 写文章可能常用到一些缩写,如: .e.g.i.e.cf.etc.w.r.t.i.i.d.et al. 其中有些要斜体,如果每次都要用 \textit{...}、{\it ...} 弄斜,有点麻烦。CVPR 模板中有定义一些命令,可以更方便地输入这些缩写。这里记录…

linux中if条件判断,case...esac,function学习

第一、 if [ 判断式 ] ; then fi 注意:中括号和判断式之间的空格,否则会报错,上案例 第二个图的12行,中括号和条件判断如果没有空格,则会提示缺号‘】’,如第二个图最上面的提示。所以使用中括号的格式…

AI:59-基于深度学习的行人重识别

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌在这个漫长的过程,中途遇到了不少问题,但是…

系列十二、过滤器 vs 拦截器

一、过滤器 vs 拦截器 1.1、区别 (1)触发时机不一样,过滤器是在请求进入容器后Servlet之前进行预处理的,请求结束返回也是,是在Servlet处理完后,返回给前端之前; (2)过滤…

TCP三次握手和四次挥手

文章目录 TCP三次握手TCP四次挥手 TCP三次握手 三次握手主要是保证连接是双工的,可靠主要是保证重传机制的 客户端发送建立连接的请求,SYN置1,携带一个序号seq服务端接收客户端建立连接的请求后发送一个响应,SYN置1,A…

[BUUCTF NewStar 2023] week5 Crypto/pwn

最后一周几个有难度的题 Crypto last_signin 也是个板子题,不过有些人存的板子没到,所以感觉有难度,毕竟这板子也不是咱自己能写出来的。 给了部分p, p是1024位给了922-101位差两头。 from Crypto.Util.number import * flag b?e 655…