当前位置：首页 > news >正文

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

news 2026/2/10 0:56:06

个人简介

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

在这里插入图片描述

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

个人简介 👀个人主页： 前端杂货铺 🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展 📃个人状态： 研发工程师，现效力于中国工业软件事业 🚀人生格言： 积跬步…...

编程日记 2023/11/5 5:01:35

css进阶知识点速览

0前言零基础部分的博客 1选择器进阶 1.1后代选择器作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素选择器语法：选择器1 选择器2 {css} 结果： 在选择器1所找到标签的后代中注意： 后代包括&#xf…...

编程日记 2023/11/5 5:00:33

P2047 [NOI2007] 社交网络

Portal. 观察到数据范围 n ≤ 100 n\leq 100 n≤100，考虑用 Floyd。在 Floyd 更新最短路的过程中，如果以当前结点为中转点的路径更新过，那么可以累加答案；否则，更新最短路径并重置答案。统计答案时，枚…...

编程日记 2023/11/5 4:59:32

线性表的顺序存储

1.创建：实质是对data与length的修改 //定义一个线性表 typedef struct {int data[MaxSize];//存储线性表的元素 int length;//线性表的长度 }SqList; //新建一个表 void create(SqList &l){//传入地址才可以对其值进行改变 printf("请输入线性表的长度&…...

编程日记 2023/11/5 4:58:31

ChinaSoft 论坛巡礼 | 安全攸关软件的智能化开发方法论坛

2023年CCF中国软件大会（CCF ChinaSoft 2023）由CCF主办，CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办，将于2023年12月1-3日在上海国际会议中心举行。本次大会主题是“智能化软件创新推动数字经济与社…...

编程日记 2023/11/5 4:57:29

采用XML作为GUI描述语言

设计方案采用XML作为GUI描述语言的机制主要包括以下几个方面: 模型定义:使用XML定义GUI组件的模型,包括组件的名称、类型、属性、事件等。布局管理:使用XML定义GUI组件的布局,包括组件之间的相对位置、大小、对齐方式等。数据绑定:使用XML定义GUI组件的数据绑定方式,包括数据来…...

编程日记 2023/11/5 4:56:28

rust入门基础案例：猜数字游戏

案例出处是《Rust权威指南》，书中有更加详细的解释。从这个例子中，我们可以了解到 rust 的两个操作： 如何从控制台读取用户输入rust 如何生成随机数代码格式化编译器可在保存时对代码做格式化处理，底层调用 rustfmt 来实现&a…...

编程日记 2023/11/5 4:55:26

vue-cli5.0.x优雅降级，配置项目兼容旧版浏览器

兼容低版本谷歌浏览器 vue-cli5.0.x脚手架下的，如何降低项目版本以适用于底版本的浏览器。直接使用默认配置打包部署出来的项目再40，60、70版本的谷歌浏览器跑不起来，蓝屏或者浏览器白屏一般这种情况都需要通过Babel去做转换，我…...

编程日记 2023/11/5 4:54:25

关于RabbitMQ的小总结

问题：消息在转换机无法被路由发布确认高级作用在生产者发送到转换机，回退消息作用在消息在转换机无法被路由的情况（消息无法路由的意思是，消息在转换机没有匹配到对应的队列），进行消息回退，打…...

编程日记 2023/11/5 4:53:23

webgoat靶场攻关

A（5） Broken Access Control Insecure Direct Object References 直接对象引用直接对象引用是指应用程序使用客户端提供的输入来访问数据和对象。例子使用 GET 方法的直接对象引用示例可能如下所示 https://some.company.tld/dor?id12345 https…...

编程日记 2023/11/5 4:51:20

BEV-YOLO 论文学习

1. 解决了什么问题？ 出于安全和导航的目的，自驾感知系统需要全面而迅速地理解周围的环境。目前主流的研究方向有两个：第一种传感器融合方案整合激光雷达、相机和毫米波雷达，和第二种纯视觉方案。传感器融合方案的感知表现鲁棒&am…...

编程日记 2023/11/5 4:50:19

C++可以使用负数作为下标索引

今天碰到一个题目，写bfs写炸了，发现好像数组越界，但是却没有报错，而是被边界检查拦截了导致死循环了？？？ ps:所以写边界问题，首要的就是对边界进行检查，不检查越界之后…...

编程日记 2023/11/5 4:48:16

react+canvas实现横跨整个页面的动态的波浪线（贝塞尔曲线）

本来写这个特效我打算用css实现的，结果是一波三折，我太难了，最终没能用css实现，转战了canvas来实现。来吧先看效果图当然这个图的波浪高度、频率、位置、速度都是可调的，请根据自己的需求调整，如果你讲波…...

编程日记 2023/11/5 4:47:16

峰回网关数采PLC

1.网络配置例如：plc地址是192.168.1.56 1.访问网关峰回网关默认网关地址 192.168.3.18，或者（10.10.253.354），本案例按照3.18讲解。 1和1相连，0和电脑相连本地电脑修改ip为192.168.3.3（和3…...

编程日记 2023/11/5 4:46:12

Vue+element el-date-picker 时间日期选择器设置默认值，选择框不显示问题（已解决）

时间选择器默认值的问题显示的时候如果用下面的方式赋值将不会显示出来： this.deviceFormData.time[0] that.$filterArray.formatDatehh(start);this.deviceFormData.time[1] that.$filterArray.formatDateEnd(end);实际上是有数据的，但是不会显示出…...

编程日记 2023/11/5 4:45:12

数据挖掘题目：根据规则模板和信息表找出R中的所有强关联规则，基于信息增益、利用判定树进行归纳分类，计算信息熵的代码

一、（30分）设最小支持度阈值为0.2500, 最小置信度为0.6500。对于下面的规则模板和信息表找出R中的所有强关联规则： S∈R，P（S，x ）∧ Q（S，y ）> Gpa&#xf…...

编程日记 2023/11/5 4:44:11

Reshape.XL 1.2 for Excel插件 Crack

特征插件 Reshape.XL 包括 130 个基本可组合功能。使用它们，您可以快速轻松地进行非常复杂的数据转换和处理。它们的架构和基本定义受到 SQL 和 R 语言的强烈启发。到目前为止，类似的功能只能通过脚本语言供程序员使用。借助 Reshape.XL 插件&#xf…...

编程日记 2023/11/5 4:43:10

开发知识点-PHP从小白到拍簧片

从小白到拍簧片位异或运算（^ ）引用符号(&)strlen() 函数base64_encode预定义 $_POST 变量session_start($array);操作符php 命令set_time_limit(7200)isset()PHP 命名空间(namespace)new 实例化类extends 继承一个类使用另一个类方法error_reporti…...

编程日记 2023/11/5 4:42:09

飞书开发学习笔记(二)-云文档简单开发练习

飞书开发学习笔记(二)-云文档简单开发练习一.云文档飞书开发环境API 首先还是进入开放平台飞书开放平台：https://open.feishu.cn/app?langzh-CN 云文档相关API都在“云文档”目录中，之下又有"云空间",“文档”，“电子表格”&a…...

编程日记 2023/11/5 4:41:08

设计模式——命令模式（Command Pattern）+ Spring相关源码

文章目录一、命令模式定义二、例子2.1 菜鸟教程例子2.1.1 定义命令类接口2.1.2 定义命令执行者2.1.3 被处理对象Stock。2.1.4 封装处理Stock的命令 2.2 JDK源码——Runnable2.2.1 命令接口2.2.2 命令处理者2.2.3 命令实现类 2.3 SpringMVC——Controller2.3.1 请求对象 handle…...

编程日记 2023/11/5 4:40:07

SciencePlots——绘制论文中的图片

文章目录安装一、风格二、1 资源安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源论文绘图神器来了：一行…...

编程新知 2025/9/8 13:50:07

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...

编程新知 2026/1/22 15:36:10

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释当然可以！这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙一、前言：离区块链还有多远？区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。要真正理解区…...

编程新知 2025/10/12 1:37:40

Python的call 方法

在 Python 中，__call__ 是一个特殊的魔术方法（magic method），它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时（例如 obj()），Python 会自动调用该对象的 __call__ 方法…...

编程新知 2026/1/16 9:01:18

使用python进行图像处理—图像滤波（5）

图像滤波是图像处理中最基本和最重要的操作之一。它的目的是在空间域上修改图像的像素值，以达到平滑（去噪）、锐化、边缘检测等效果。滤波通常通过卷积操作实现。 5.1卷积(Convolution)原理卷积是滤波的核心。它是一种数学运算，…...

编程新知 2025/10/23 13:48:47

第2篇：BLE 广播与扫描机制详解

本文是《BLE 协议从入门到专家》专栏第二篇，专注于解析 BLE 广播（Advertising）与扫描（Scanning）机制。我们将从协议层结构、广播包格式、设备发现流程、控制器行为、开发者 API、广播冲突与多设备调度等方面，全面拆解这一 BLE 最基础也是最关键的通信机制。一、什么是 B…...

编程新知 2026/1/31 6:20:08

Go 并发编程基础：select 多路复用

select 是 Go 并发编程中非常强大的语法结构，它允许程序同时等待多个通道操作的完成，从而实现多路复用机制，是协程调度、超时控制、通道竞争等场景的核心工具。一、什么是 select select 类似于 switch 语句，但它用于监听多个通…...

编程新知 2025/11/29 4:18:11

小白的进阶之路系列之十四----人工智能从初步到精通pytorch综合运用的讲解第七部分

通过示例学习PyTorch 本教程通过独立的示例介绍PyTorch的基本概念。 PyTorch的核心提供了两个主要特性：一个n维张量，类似于numpy，但可以在gpu上运行用于构建和训练神经网络的自动微分我们将使用一个三阶多项式来拟合问题 y = s i n ( x ) y=sin(x) y=sin(x)，作为我们的…...

编程新知 2025/11/23 2:58:48

Linux——TCP和UDP

一、TCP协议 1.特点 TCP提供的是面向连接、可靠的、字节流服务。 2.编程流程 （1）服务器端的编程流程 ①socket() 方法创建套接字 ②bind()方法指定套接字使用的IP地址和端口。 ③listen()方法用来创建监听队列。 ④accept()方法处理客户端的连接…...

编程新知 2026/2/5 3:37:45

文章目录

前言

FFmpeg

FFmpeg的基本使用

总结

相关文章：