【工具软件】mediamtx——网页、vue3项目中播放 rtsp 视频流(支持265转码)

声明

本文只做 mediamtx 的使用实操,请务必参考下面的博客,,我也参考下面的大佬博客,感谢@唯一602的无私分享:
在web页面中直接播放rtsp视频流,重点推荐:mediamtx,不仅仅是rtsp

mediamtx 介绍

官方文档
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
从介绍我们可以看到,支持的格式特别多,因此我也很推荐用这个来做 rtsp 的方案。

windows 本地使用

安装 ffmpeg

教程请自行百度,可以参考:
ffmpeg安装教程(windows版)

下载和运行 mediamtx_v1.0.0

请参考这篇博客关于安装和基础运行的部分内容:
在web页面中直接播放rtsp视频流,重点推荐:mediamtx,不仅仅是rtsp

注意:API配置设为yes,apiAddress是api的地址和端口号,默认127.0.0.1:9997,可以使用本机IP,0.0.0.0表示127.0.0.1和本机实际IP都可以访问

项目中使用

个人建议项目中使用的话,采用接口调用的方式,官方接口文档

根据上面博客的介绍,核心有三个接口:
注意,查询添加删除的接口调用的端口地址默认是:8889

import mediamtx_request from './mediamtx_request'; // axios 封装// 查询所有流
export function getAllMediaStream() {return mediamtx_request({url: '/v2/paths/list',method: 'get',});
}// 添加视频流
export function addMediaStream(name: string, source: string) {return mediamtx_request({url: '/v2/config/paths/add/' + name,method: 'post',data: {source,},});
}// 删除视频流
export function deleteMediaStream(name: string) {return mediamtx_request({url: '/v2/config/paths/remove/' + name,method: 'post',});
}

在项目中,我们需要手动先查询再注册

const streamSource = [{name: 'stream6000',source: 'rtsp://xxxx/h264/ch1/sub/av_stream',},{name: 'stream6001',source: 'rtsp://xxxx/h264/ch1/sub/av_stream',},
];// 查询当前视频流getAllMediaStream().then((res: any) => {const items = res.items;let names: string[] = [];if (items.length > 0) {names = items.map((item: any) => item.name);}streamSource.forEach((item) => {if (!names.includes(item.name)) {// 添加视频流addMediaStream(item.name, item.source);}});});

最后是使用,直接使用 iframe 标签调用地址就行:
注意:VITE_MEDIAMTX_HLS_API 是你所采用的播放地址,HLS 支持 265,官方默认端口是 8888,所以如果采用 HLS 播放,直接用 8888 端口就行;非 265 视频流直接用 8889 端口就行。

const stream6000 = import.meta.env.VITE_MEDIAMTX_HLS_API + '/stream6000/';
<iframe :src="stream6000" :allowfullscreen="true" frameborder="0"></iframe>

关于服务端部署

请叫后端大佬参考官网文档部署就行,更多请务必查看文档!!!!

参考文章

在web页面中直接播放rtsp视频流,重点推荐:mediamtx,不仅仅是rtsp

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ与springboot整合

1、基本概念 Server&#xff1a;接收客户端的连接&#xff0c;实现AMQP实体服务&#xff1b;Connection&#xff1a;连接&#xff0c;应用程序与Server的网络连接&#xff0c;TCP连接&#xff1b;Channel&#xff1a;信道&#xff0c;消息读写等操作在信道中进行。客户端可以建…

Linux[find命令]-根据路径和条件搜索指定文件并删除

一、find命令简介 find命令&#xff1a;用于根据给定的路径和条件查找相关文件或目录&#xff0c;参数灵活方便&#xff0c;且支持正则表达式&#xff0c;结合管道符后能够实现更加复杂的功能。 基本语法格式&#xff1a;find pathname -options 搜索内容 [其他选项] pathname…

Python 自动化Web测试

限于作者水平有限&#xff0c;以下内容可能是管窥之见&#xff0c;希望大家高抬贵手&#xff0c;且让我斗胆抛砖引玉。 公司产品迪备主要是通过网页操作来进行数据库的备份与恢复&#xff0c;监控与管理&#xff0c;因此在测试的过程中&#xff0c;可以用python测试脚本来模拟…

LLVM(5)ORC实例分析

ORC实例总结 总结 因为API茫茫多&#xff0c;逻辑上的一些概念需要搞清&#xff0c;编码时会容易很多。JIT的运行实体使用LLVMOrcCreateLLJIT可以创建出来&#xff0c;逻辑上的JIT实例。JIT实例需要加入运行库&#xff08;依赖库&#xff09;和用户定义的context&#xff08;…

最新数据库流行度最新排名(每月更新)

2023年10月数据库流行度最新排名 TOP DB顶级数据库索引是通过分析在谷歌上搜索数据库名称的频率来创建的 一个数据库被搜索的次数越多&#xff0c;这个数据库就被认为越受欢迎。这是一个领先指标。原始数据来自谷歌Trends 如果您相信集体智慧&#xff0c;那么TOP DB索引可以帮…

flutter 常用组件:文本、图片和按钮

文章目录 文本控件富文本控件图片本地图片网络图片按钮文本控件 ##一’码’当先 Text(这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本,textAlign:TextAlign.center,style: TextStyle(fontWeight: FontWeight.bold, font…

BC v1.2充电规范

1 JEITA Reference to https://www.mianbaoban.cn/blog/post/169964 符合 JEITA 规范的锂离子电池充电器解决方案 2 Battery Fuel Gauge 2.1 Cycle Count&#xff08;充放电循环次数&#xff09; 此指令回传一只读字段&#xff0c;代表电芯组已经历的完整充放电循环数。当放电容…

java 每种设计模式的作用,与应用场景

文章目录 前言java 每种设计模式的作用&#xff0c;与应用场景 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0…

2023品牌新媒体矩阵营销洞察报告:流量内卷下,如何寻找增长新引擎?

近年来&#xff0c;随着移动互联网的发展渗透&#xff0c;短视频、直播的兴起&#xff0c;新消费/新零售、兴趣电商/社交电商等的驱动下&#xff0c;布局线上渠道已成为绝大多数品牌的必然选择。 2022年&#xff0c;越来越多的品牌加入到自运营、自播的行列中&#xff0c;并且从…

SR660 V2 ESXI 的安装

连接BMC端口 登录BMC管理界面&#xff08;需要设置三个参数&#xff1a; IP DNS RAID &#xff09; 在网络设置里有IP DNS 的设置 配置IP 配置DNS Ctrl shift 选中物理驱动器配置里的两块磁盘 否则会弹出报错&#xff1a;最小值2物理设备应该按照所选的RAID等级来配置 配置…

java.util.concurrent.locks.Condition详解

Condition翻译成中文是“条件”&#xff0c;一般我们称其为条件变量&#xff0c;每一个Condition对象都通过链表保存了一个队列&#xff0c;我们称之为条件队列。 当然了&#xff0c;这里所说的Condition对象一般指的是Condition接口的实现类ConditionObject&#xff0c;比如我…

如何在 Spring Boot 中进行数据备份

在Spring Boot中进行数据备份 数据备份是确保数据安全性和可恢复性的关键任务之一。Spring Boot提供了多种方法来执行数据备份&#xff0c;无论是定期备份数据库&#xff0c;还是将数据导出到外部存储。本文将介绍在Spring Boot应用程序中进行数据备份的不同方法。 方法1: 使用…

CentOS 7 安装 MySQL8.0

由于centOS7中默认安装了 MariaDB , 需要先进行卸载 # 查看版本 rpm -qa | grep mariadb # 卸载 rpm -e --nodeps 文件名 # 查看是否卸载干净 rpm -qa | grep mariadb安装wget&#xff1a; yum -y install wget进入/usr/local/下&#xff1a; cd /usr/local/新建mysqlrpm文…

【unity】制作一个角色的初始状态(左右跳二段跳)【2D横板动作游戏】

前言 hi~ 大家好&#xff01;欢迎大家来到我的全新unity学习记录系列。现在我想在2d横板游戏中&#xff0c;实现一个角色的初始状态-闲置状态、移动状态、空中状态。并且是利用状态机进行实现的。 本系列是跟着视频教程走的&#xff0c;所写也是作者个人的学习记录笔记。如有错…

win10电脑插入耳机,右边耳机声音比左边小很多

最近使用笔记本看视频&#xff0c;发现插入耳机&#xff08;插入式和头戴式&#xff09;后&#xff0c;右边耳机声音比左边耳机声音小很多很多&#xff0c;几乎是一边很清晰&#xff0c;另一边什么都听不到。 将耳机插到别人电脑上测试耳机正常&#xff0c;那就是电脑的问题。试…

Spring AOP的失效场景

首先&#xff0c;Spring的AOP其实是通过动态代理实现的&#xff0c;所以&#xff0c;想要让AOP生效&#xff0c;前提必须是动态代理生效&#xff0c;并且可以调用到代理对象的方法什么情况下会不走代理对象的调用呢&#xff1f;首先就是类内部的调用&#xff0c;比如一些私有方…

Postman历史版本下载

1. 下载对应版本的postman 历史版本下载 请把下面链接的"版本号"替换为指定的版本号&#xff0c;例如&#xff1a;8.8.0 Windows64位 ​https://dl.pstmn.io/download/version/版本号/win64​ Windows32位 https://dl.pstmn.io/download/version/版本号…

GEO生信数据挖掘(六)实践案例——四分类结核病基因数据预处理分析

前面五节&#xff0c;我们使用阿尔兹海默症数据做了一个数据预处理案例&#xff0c;包括如下内容&#xff1a; GEO生信数据挖掘&#xff08;一&#xff09;数据集下载和初步观察 GEO生信数据挖掘&#xff08;二&#xff09;下载基因芯片平台文件及注释 GEO生信数据挖掘&…

matlab相机标定实验

实验原理 1. 相机标定坐标系 相机的参数对目标的识别、定位精度有很大的影响&#xff0c;相机标定就是为了求出相机的内外参数。标定中有3个不同层次的坐标系&#xff1a;世界坐标系、相机坐标系和图像坐标系&#xff08;图像物理坐标系和图像像素坐标系&#xff09;。世界坐…

清华智谱AI大模型ChatGLM-Pro申请开通教程

清华智谱AI大模型ChatGLM-Pro申请开通教程 ChatGLM系列模型&#xff0c;包括ChatGLM-130B和ChatGLM-6B模型&#xff0c;支持相对复杂的自然语言指令&#xff0c;并且能够解决困难的推理类问题。其中&#xff0c;ChatGLM-6B模型吸引了全球超过 160 万人下载安装&#xff0c;该模…