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

news2024/11/25 2:23:50

声明

本文只做 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 端口就行。
在这里插入图片描述

补充:文档也说明了请注意浏览器版本对于 HLS 的支持情况,如果浏览器不能播放,请更换版本。

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

关于服务端部署

因为我只是前端,后端部分不是太懂,还是请叫后端大佬参考官网文档部署就行,更多请务必查看文档!!!!
推荐大佬文章:使用docker运行mediamtx

参考文章

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue的学习补充

1.Vue路由-404 作用&#xff1a;当路径找不到匹配时&#xff0c;给个提示页面 位置&#xff1a;配在路由最后 语法&#xff1a;path:*&#xff08;任意路径&#xff09;-前面不匹配就命中最后这个 2.Vue路由-模式设置 hash路由&#xff08;默认&#xff09; 例如&#xff…

ubuntu mmdetection配置

mmdetection配置最重要的是版本匹配&#xff0c;特别是cuda&#xff0c;torch与mmcv-full 本项目以mmdetection v2.28.2为例介绍 1.查看显卡算力 因为gpu的算力需要与Pytorch依赖的CUDA算力匹配&#xff0c;低版本GPU可在相对高的CUDA版本下运行&#xff0c;相反则不行 算力…

【多线程】Thread类的基本用法

文章目录 线程创建线程中断线程等待线程休眠 线程创建 方法一&#xff1a;用一个类 继承Thread 重写run方法 //创建一个类 继承Thread class MyThread extends Thread {//run方法是线程的入口Overridepublic void run() {while (true){System.out.println("hello Thread…

Unity 3D基础——缓动效果

1.在场景中新建两个 Cube 立方体&#xff0c;在 Scene 视图中将两个 Cude的位置错开。 2.新建 C# 脚本 MoveToTarget.cs&#xff08;写完记得保存&#xff09; using System.Collections; using System.Collections.Generic; using UnityEngine;public class MoveToTarget : M…

代理和多级代理

文章目录 代理使用场景代理过程实验演示多级代理 代理使用场景 1、拿下远程 web 服务器 2、webshell 链接不稳定&#xff0c;需要使用稳定的木马程序 3、远程服务器无法直接链接攻击者电脑 4、需要借助公网vps转发来自失陷服务器的木马流量 5、借助frp服务端(vps)和客户端(内网…

AI为锚,创新为帆,谱写数实融合发展新篇章

云聚园区&#xff0c;智享未来。9月27日&#xff0c;在苏州工业园区管理委员会、华为云计算技术有限公司的指导下&#xff0c;由SISPARK&#xff08;苏州国际科技园&#xff09;、华为&#xff08;苏州&#xff09;人工智能创新中心联合主办&#xff0c;东北大学工业智能与系统…

2.用Flask框架创建一个简单的Web程序

怎么安装Flask框架 在终端输入以下命令&#xff1a; pip install flask 验证flask安装&#xff1a; flask --version 编写app.py文件 app文件py如下&#xff1a; #导入flask框架中的两个模块 #Flask允许创建一个Flask应用实例&#xff0c;处理路由、请求和响应等功能 #render…

【交叉编译】tslib库交叉编译

tslib 是一个捕捉触屏事件的工具。qt 库在交叉编译的时候&#xff0c;提供了 -tslib 选项&#xff0c;使用该选项需要提前对 tslib 库进行交叉编译。 目录 1、源码下载 2、安装依赖 3、创建编译脚本 4、开始编译 1、源码下载 tslib 源码下载地址: https://github.com/lib…

oracle 与mysql兼容日期(格式:YYYY年MM月DD日)

日期类型&#xff1a;date 查询sql&#xff1a; select concat(concat(concat(to_char(END_DATE,YYYY),年),concat(to_char(END_DATE,MM),月)),concat(to_char(END_DATE,DD),日)) AS dateInfo from test显示结果&#xff1a;

python jieba 词性标注 中文词性分类 nlp jieba.posseg

参考&#xff1a;https://blog.csdn.net/yellow_python/article/details/83991967 from jieba.posseg import dt dt.word_tag_tab[好看] >>> vflag_en2cn { ‘a’: ‘形容词’, ‘ad’: ‘副形词’, ‘ag’: ‘形语素’, ‘an’: ‘名形词’, ‘b’: ‘区别词’, ‘…

2023年工业大麻行业研究报告

第一章 行业概况 1.1 定义 工业大麻行业是一个多面向且快速发展的领域&#xff0c;涵盖了从种植、加工到分销各个环节。与休闲大麻不同&#xff0c;工业大麻主要用于制造和商业用途。工业大麻的种植重点放在产生纤维、籽和生物质等有价值的产品上&#xff0c;而非产生高含量的…

Rt-Thread 移植3--临界段保护(KF32)

1.什么是临界段 执行下的时候不能被中断的代码段。 系统调度和外部中断都会打断&#xff0c;系统调度本质是产生PendSV中断。NMI FAULST和Hard FAULE除外2.代码实现 contex_gcc.c中添加 rt_base_t __attribute__((noinline)) rt_hw_interrupt_disable(void) {asm volatile(…

阿里云服务器内存型20个实例规格性能特点和适用场景汇总

阿里云服务器ECS内存型规格族属于独享型云服务器&#xff0c;在高负载不会出现计算资源争夺现象&#xff0c;因为每一个vCPU都对应一个Intel Xeon 处理器核心的超线程&#xff0c;内存型实例的云服务器其CPU处理器与内存配比通常为1:8&#xff0c;最高比约为1:20。本文介绍阿里…

Seata入门系列【6】分布式事务之TCC模式简介

1 历史背景 关于TCC的概念&#xff0c;最早是由Pat Helland于2007年发表的一篇名为《Life beyond Distributed Transactions:an Apostate’s Opinion》的论文提出。在该论文中&#xff0c;TCC还是以Tentative-Confirmation-Cancellation命名。正式以Try-Confirm-Cancel作为名称…

【运维笔记】swow源码编译安装

swow的github网址 https://github.com/swow/swow 从github中拉取源码 git pull https://github.com/swow/swow.git 编译安装 github中readme文件讲述了安装方法 这里整理了命令&#xff0c;进入拉取项目的目录后依次执行命令即可 #pwd 确保自己在swow目录中&#xff0c;如…

linux中搭建c语言环境并编译

安装gcc 安装 yum install gcc 检查 gcc --version 编译文件 1.编写test.c vim test.c #include <stdio.h>int main() {printf(" ***** \n");printf(" * o o * \n");printf("* ^ *\n");printf("* - *\n");printf…

VUE树结构实现

实现效果: 数据库表结构如下: 要求:需要有parentId,id。parentId就是父记录的id 表数据要求:一定不要让一条记录的parentid和id相同 前端代码: 注意:el-table标签里面需要加上属性,才可以有下拉箭头的样式 <el-table v-loading="listLoading" :data

· C语言在自动化如何控制系统

今日话题 C语言在自动化如何控制系统&#xff1f; 类&#xff1a;理解构造函数、属性、封装、继承、多态&#xff0c;有助于组织管理系统对象。 数据库&#xff1a;熟悉常见数据库&#xff08;如Access、SQL&#xff09;、SQL语言和操作&#xff0c;用于高效数据管理。 …

MySQL Row size too large (> 8126)

错误信息 ERROR 1118 (42000) at line 901: Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMATDYNAMIC or ROW_FORMATCOMPRESSED may help. In current row format, BLOB prefix of 768 bytes is stored inline. 错误原因 这个问题…

Stewart六自由度正解、逆解计算-C#和Matlab程序

目录 一、Stewart并联六自由度正解计算 &#xff08;一&#xff09;概况 &#xff08;二&#xff09;Matlab正解计算 1、参考程序一 2、参考程序二 &#xff08;三&#xff09;C#程序正解计算 1、工程下载链接 2、正解运行计算 &#xff08;四&#xff09;正程…