Web端H5播放RTSP

news2024/11/24 21:03:27

Web端H5播放RTSP

  • 一、要实现
  • 二、基础介绍
    • 1.RTSP是什么?
    • 2.RTSP播放测试工具VLC
    • 3.主流设备常用的RTSP格式
  • 三、方案
    • 1. webrtc-streamer
    • 2. 安装和配置环境
    • 3. 运行demo.html
    • 4.存疑
    • 5.参考了好多~

一、要实现

不用萤石云等类似的平台,实现Web端直接显示监控视频。

二、基础介绍

1.RTSP是什么?

**RTSP是安防设备里用的比较多的一个协议。**英文全称是Real Time Streaming Protocol,实时流传输协议,看字面意思还是比较好理解,流既包括视频流,也有音频。 RTSP协议是TCP/IP体系中的应用层协议,支持TCP或者UDP传输。可以一对多传输音视频流,支持双向传输,主动或者被动均可,同时对网络延时容忍度很高。

RTSP、RTMP、HLS、FLV等回头研究了在再补充。

2.RTSP播放测试工具VLC

VLC播放器可以很好的支持rtsp视频流,同时VLC播放器在电脑,手机均有对应的客户端,这样用VLC可以在多终端播放rtsp视频流。
在这里插入图片描述

3.主流设备常用的RTSP格式

  1. 对于一些不知道rtsp视频流地址的安防设备,我们可以使用第三方的onvif工具ONVIF Device Manager,来探测其rtsp视频流地址。

  2. 摄像头视频编码要设置为H.264。(webrtc使用H.264,还不支持H.265)
    在这里插入图片描述

#海康摄像头 rtsp://<账号>:<密码>@:<端口,默认554>/<视频编码,h264/h265>/<通道,ch1起始>/<码流,main主
sub子>/av_stream
例:rtsp://admin:12345@192.168.1.116:554/h264/ch1/main/av_stream

#海康NVR,账号密码为NVR的而不是摄像头账号密码,区分摄像头靠通道号,时间格式:日后面加T,秒后面加Z rtsp://<账号>:<密码>@<地址>:<端口,默认554>/Streaming/tracks/<前面是通道号 D1:1,后两位是码流
01:主> 02:子>?starttime=<起始时间,20210814T173350Z>&endtime=<结束时间,20210814T180000Z>
例:rtsp://admin:aaaa1111@192.168.1.90:554/Streaming/tracks/101?starttime=20210818T171300Z&endtime=20210818T171400Z

#大华摄像头 rtsp://<账号>:<密码>@:<端口,默认554>/cam/realmonitor?channel=<通道,起始1>&subtype=<码流,0:主> 1:子>
例:rtsp://admin:admin@192.168.1.230:554/cam/realmonitor?channel=1&subtype=0

#大华NVR,账号密码为NVR的而不是摄像头账号密码,区分摄像头靠通道号,时间格式:年月日时分后面加_ rtsp://<账号>:<密码>@<地址>:<端口,默认554>/cam/playback?channel=<通道号,D1:1>&subtype=<码流,0:主 1:子)>&starttime=<起始时间,2021_08_18_14_13_41>&endtime=<结束时间,2021_08_18_14_15_41>
例:rtsp://admin:aaaa1111@192.168.1.95:554/cam/playback?channel=1&subtype=0&starttime=2021_08_18_10_52_00&endtime=2021_08_18_10_53_00

三、方案

1. webrtc-streamer

webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。(好像还有ffmpeg+flv.js一类的的方案,不知道性能上有没有差别,没研究……)。

项目Github:https://github.com/mpromonet/webrtc-streamer/
支持Windows/linux/macOS版本,采用了windows版。

Windows版下载地址:https://github.com/mpromonet/webrtc-streamer/releases
这里demo用的版本是 【webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release.tar.gz 】。

webRTC对各浏览器的支持情况 (https://caniuse.com/rtcpeerconnection)
在这里插入图片描述

2. 安装和配置环境

从上边地址下载windows版以后,解压到本地,运行其中的[webrtc-streamer.exe]就算是启动服务了。
在这里插入图片描述
运行以后:
在这里插入图片描述

3. 运行demo.html

手头没有现成的摄像头,所以找了些现成的rtsp测试没问题。
在这里插入图片描述

  1. 具体配置看demo中的注释。
  2. demo.html需要放WEB服务下,我放在php下,就正常访问了。
<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<title>PC端H5播放RTSP</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
	<style>
	div {
		background:#000;
	}
	</style>
</head>
<body style="padding:2rem"> 

<section class="row">
	<div id="" class="col-md-3">
		<!-- 播放控件,播几个加几个video -->
        <video id="video" autoplay="true" controls muted="muted" width="100%" height="100%"  />
	</div>
	<div id="" class="col-md-3">
        <video id="video1" autoplay="true" controls muted="muted" preload='auto' width="100%" height="100%"  />
	</div>
	<div id="" class="col-md-3">
        <video id="video2" autoplay="true" controls muted="muted" preload='auto' width="100%" height="100%"   />
	</div>
	<div id="" class="col-md-3">
        <video id="video3" autoplay="true" controls muted="muted" preload='auto' width="100%" height="100%"   />
	</div>
</section>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<script src="html/libs/adapter.min.js" ></script>
<script src="html/webrtcstreamer.js" ></script>

<script>
/****************************
* 一个video
*/
/*
	var webRtcServer =null;

	//页面加载时加载视频画面
    window.onload = function() { 

		//video:需要绑定的video控件ID。
		//location.protocol:可设置或返回当前URL的协议(如:http:/https:)。
		//window.location.hostname:启动webrtc-streamer.exe的设备主机名或IP(如:localhost/127.0.0.1)。
        webRtcServer = new WebRtcStreamer("video",location.protocol+"//"+window.location.hostname+":8000");

		//需要播放的rtsp地址
		webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4");
    }

	//页面退出时销毁
    window.onbeforeunload = function() { 
		webRtcServer.disconnect(); 
	}
*/


/****************************
* 多个video
* 定义个playRtsp()方法,传入数组,格式是['video的id','rstp地址']。
*/

function playRtsp(pArr) {
	var i;
	for (i=0; i < pArr.length; i++)
	{
		//var webRtcServer0     = null;
		//var webRtcServer1      = null;
		var webRtcServer = "webRtcServer"+i;
		//webRtcServer = null;
	}
    window.onload         = function() { 
		for (i=0; i < pArr.length; i++)
		{
			webRtcServer = new WebRtcStreamer(pArr[i][0],location.protocol+"//"+window.location.hostname+":8000");
			webRtcServer.connect(pArr[i][1]);
		}
    }
    window.onbeforeunload = function() { 
		for (i=0; i < pArr.length; i++)
		{
			webRtcServer.disconnect(); 
		}
	}
}

//定义个播放列表,放数组里。
var playListArr = [
["video","rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"],
["video1","rtsp://213.34.225.97/axis-media/media.amp"],
["video2","rtsp://37.157.51.30/axis-media/media.amp"],
['video3','rtsp://71.83.5.156/axis-media/media.amp']
];
//调用播放方法
playRtsp(playListArr);

</script>
</body>
</html>

4.存疑

  1. 不知道webrtc-streamer读真实摄像头的效果怎么样。
  2. 不知道能不能商用。

5.参考了好多~

https://www.cnblogs.com/savorboard/p/webrtc-rtsp.html
https://blog.csdn.net/qq_45777115/article/details/118054927?spm=1001.2014.3001.5502
https://blog.csdn.net/EthanCo/article/details/125321957
https://blog.csdn.net/nov4th/article/details/119803478

先这样,回头再补充……

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

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

相关文章

LwIP——以太网描述符

目录 什么是以太网DMA描述符 TX DMA描述符成员变量简介 RX DMA描述符成员变量简介 以太网DMA描述符结构 如何追踪描述符 如何创建Tx/Rx描述符 以太网发送和接收数据流程 总结 在移植LwIP之前有必要了解一下以太网DMA描述符的相关知识&#xff0c;ST以太网模块中的接收/发…

【华为OD机试真题 python】箱子之字形摆放【2022 Q4 | 100分】

■ 题目描述 【箱子之字形摆放】 有一批箱子(形式为字符串,设为str), 要求将这批箱子按从上到下以之字形的顺序摆放在宽度为 n 的空地,请输出箱子的摆放位置。 例如:箱子ABCDEFG,空地宽度为3,摆放结果如图: 则输出结果为:AFGBECD 输入描述 输入一行字符串,通过空…

19. 丢弃法(Dropout)

1. 动机 一个好的模型需要对输入数据的扰动鲁棒&#xff08;不管一张图片加入多少噪音&#xff0c;也能看清这张图片&#xff09; 使用有噪音的数据等价于Tikhonov正则丢弃法&#xff1a;在层之间加入噪音 输入数据加入随机扰动可以防止过拟合&#xff0c;泛化性更好&#xf…

Python学习基础笔记四十四——模块

1、看一个例子&#xff1a; 创建一个demo.py文件&#xff1a; print(in demo.py)def hello():print(in hello function) 然后我们在另外一个文件中import这个demo文件&#xff1a; import demo# 调用demo.py文件中的hello()函数 demo.hello() 注意&#xff0c;demo后面没有…

Linux系统网络编程——第二十节 多路复用之epoll 模型

目录 epoll相关系统调用 1、epoll_create&#xff1a; 2、epoll_ctl() 3、epoll_wait epoll模型原理 epoll的使用场景 各位好&#xff0c;博主新建了个公众号《自学编程村》&#xff0c;拉到底部即可看到&#xff0c;有情趣可以关注看看哈哈&#xff0c;关注后还可以加博主…

Redis原理篇

目录Redis数据结构动态字符串SDS整数集合Intset键值型Dict压缩链表 ZipList快速链表QuickList跳表SkipList对象RedisObjectRedis网络模型Redis通信协议-RESP协议Redis内存回收过期key处理内存淘汰策略Redis数据结构 动态字符串SDS Redis构建了一种新的字符串结构&#xff0c;…

从C#5.0说起:再次总结C#异步调用方法发展史

本篇继续介绍WaitHandler类及其子类 Mutex&#xff0c;ManualResetEvent&#xff0c;AutoResetEvent的用法。 .NET中线程同步的方式多的让人看了眼花缭乱&#xff0c;究竟该怎么去理解呢&#xff1f; 其实&#xff0c;我们抛开.NET环境看线程同步&#xff0c;无非是执行两种操…

软件测试基础知识总览【纯知识,建议收藏慢慢学】

1. 软件测试定义 首先要明确测试的定义,所谓测试,就是以检验产品是否满足需求为目标。 而软件测试,自然是为了发现软件(产品)的缺陷而运行软件(产品) 比较标准的软件测试的定义是:在规定的条件下对程序进行操作&#xff0c;以发现错误&#xff0c;对软件质量进行评估。 IEE…

算法总结,不断更新

文章目录摩尔投票法DFS算法BFS算法题源来自于力扣网 摩尔投票法 适用场景 如何在选票无序的情况下&#xff0c;选出获胜者。 例题&#xff1a; 找出数组中&#xff0c;出现次数超过总数一半的数字&#xff08;出现次数 > n/2&#xff09;。 输入&#xff1a;[1,1,3,2,4,6,…

10000字吐血总结+24张图带你彻底弄懂线程池

大家好。今天跟大家聊一聊无论是在工作中常用还是在面试中常问的线程池&#xff0c;通过画图的方式来彻底弄懂线程池的工作原理&#xff0c;以及在实际项目中该如何自定义适合业务的线程池。 一、什么是线程池 线程池其实是一种池化的技术的实现&#xff0c;池化技术的核心思…

MVC|JAVA|SSM框架计算机硬件评测交流平台的开发和实现

收藏点赞不迷路 关注作者有好处 文末获取源码 项目编号&#xff1a;BS-PT-070 一&#xff0c;项目简介 计算机硬件在社会上有很多广泛的发烧友&#xff0c;他们急需一个发布专业硬件测评数据的平台并进行交流互动的社区。本次开发实现的计算机硬件交流平台就是作为一个专业的…

Android序列化之Parcel源码分析(2)

文章目录1.Parcel.java2.Parcelable和Parcel的关系3.Parcel写入数据源码分析3.1.java层Parcel创建3.2.native层Parcel创建3.3写入IBinder接口标识符3.4写入String数据4.Parcel读取数据源码分析4.1获取IBinder接口标识符4.2读取String数据1.Parcel.java Android可以通过Parcel进…

【OpenCV学习】第15课:处理卷积边缘问题

仅自学做笔记用,后续有错误会更改 &#xff08;卷积的概念可以看看第14课&#xff09; 理论 卷积边缘问题&#xff1a;从下图最右方的结果可以看出&#xff0c;卷积操作之后&#xff0c; 剩余的绿色像素部分&#xff0c; 我们是没有处理到的 那么如何处理这个问题呢&#xf…

论文3:查找文献在指定期刊的引用格式

文章目录说明&#xff1a;1.谷歌学术搜索&#xff08;可以用一些国内的镜像&#xff09;&#xff0c;并点击被引用次数2.勾选在引用文章中搜索&#xff0c;并在搜索框搜索指定期刊的关键词3.这里指定期刊是RAL即IEEE Robotics and Automation Letters4.任意点开上图中的一篇文章…

支付宝当面付网站对接支付教程

有很多人会开支付宝当面付但是不会配置它老会出现一下情况 第二种情况如下&#xff1a; 如果遇到以上情况可以按照我的步骤就可以解决 详细步骤&#xff1a; 一、应用APPID获取方法 1.打开网站&#xff1a;https://openhome.alipay.com/platform/developerIndex.htm&#x…

Canal配置多个实例以及将Mysql指定表的binlog导入指定的Kafka的Topic

Canal配置多个实例以及将Mysql指定表的binlog导入指定的Kafka的Topic 进入Canal的conf目录 复制模板配置文件 cp -r example/ Ordercp -r example/ Orderdetail修改canal.propertieswenjain vim canal.properties修改内容如下&#xff0c;指定输出模式为kafka canal.serverM…

【元胞自动机】心房颤动/扑动模型研究(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…

(附源码)ssm学校疫情服务平台 毕业设计 291202

ssm学校疫情服务平台 摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对学校疫情服务平台等问…

【数电实验】触发器及其应用

实验三 触发器及其应用 一 实验目的 1 了解触发器的触发方式&#xff08;上升沿触发、下降沿出发&#xff09;及其触发特点&#xff1b; 2 测试常用触发器的逻辑功能&#xff1b; 3 掌握用触发器设计同步时序逻辑电路的方法。 二 实验内容 1 测试双D触发器74HC74的逻辑功能…

手工编译konsole备忘

背景 系统自带的终端弱爆了&#xff0c;本来想编译深度终端的&#xff0c;但DTK风格的程序在非DDE桌面&#xff08;应该是dde_kwin这个窗管的问题&#xff09;巨难看&#xff0c;无意中添加了Konsole&#xff0c;发现已经有我需要使用的右键打开当前目录文件管理器的功能。 …