Web端H5播放RTSP（一）

已于 2022-12-14 15:23:59 修改
阅读量7.5k 收藏 12
点赞数 3
分类专栏： Javascript HTML5 JS插件 文章标签： javascript
于 2022-12-11 13:12:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phpfer/article/details/128273477
版权
Javascript 同时被 3 个专栏收录
33 篇文章 1 订阅
订阅专栏
HTML5
18 篇文章 0 订阅
订阅专栏
JS插件
4 篇文章 0 订阅
订阅专栏

Web端H5播放RTSP

一、要实现

不用萤石云等类似的平台，实现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

先这样，回头再补充……

东成熙就
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
h5无插件 RTSP 摄像头在线播放代码
07-25
详见博客“h5无插件 RTSP 摄像头在线播放（用海康摄像头测试）”
h5实现播放RTSP视频流WebRTC.docx
04-18
h5实现播放RTSP视频流WebRTC.docx
Web 播放 RTSP(Webrtc方案)
最新发布
qq_39782968的博客
06-12 1608
通过webrtc播放海康摄像头rtsp流
HTML5 播放 RTSP 视频的实例代码
12-07
目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的，因此也不能直接播放 RTSP 流。 在借助一定工具的情况下，可以实现在 Web 页面上播放 RTSP 流。本文介绍的方法可以应用于传统 Web 应用和 Electron 应用中，唯一的区别是将 Electron 应用的主进程当作传统 Web 应用的服务器。 目前已有 RTSP 播放方案的对比 既然是做直播，就需要延迟较低。当摄像头掉线
在html5中播放RTSP/RTMP/HLS/HTTP视频流媒体的几种方案，并支持H.265
liveweb视频汇聚平台
08-17 4700
经过多年的项目实战和研发经验的积累，总结了一下对于H5视频可视化在视频播放上如何做到无插件H5展示的方法，尤其是契合安防行业的方案；
web无插件播放RTSP摄像机方案，H5能不能支持RTSP播放
liveweb视频汇聚平台
08-17 131
问题：有没有flash播放RTSP的播放器？H5能不能支持RTSP播放？答案：没见过，以后估计也不会有；问题：可以自己做浏览器插件播放RTSP吗？答案：可以的，chrome做ppapi插件，IE用ocx插件；但是，兼容性太差了，开发成本过高。在PC web兼容性上面，目前最好的方案是flash或者H5，但是H5在IE比较低版本上面会存在不支持的问题，还是需要前端兼容切换成flash模式；在手机 web/微信兼容上面，毫无疑问，H5是唯一选择；
html5中播放rtsp流实现监控、直播等方案
liveweb视频汇聚平台
07-07 4287
这个库类似语法糖，本质上就是通过nodejs在终端中执行ffmpeg的命令，它将繁琐的ffmpeg命令进行封装，转化成易于理解的链式调用，让我们不需要花费太多的时间去了解ffmpeg命令中琐碎的细节，只需通过封装好的一些显而易见的方法就可以操作视频转码。服务端搭建完，接下来就等前端连接服务器上的websocket，获取转码后的flv格式数据，然后渲染出来就行了。我们通过flv.js这个库来便捷的实现它。以上基本上实现了业务功能需求，运用到生产环境时，可进一步完善代码细节，测试各种异常情况，增加代码健壮性。
H5直播RTSP摄像头视频流解决方案
yinshipin007的博客
11-08 1787
视频直播是借助流媒体及通信技术，通过采集、编码、发布和播放等过程实现实时播放。近年来，随着移动互联网的发展，企业的移动端应用日渐增长，手机直播需求也应运而生。根据业务需求，需在App端和H5端调用摄像头视频流，来达到现场生产作业直播的目的。
html5播放rtsp方案
蹲在电饭煲上的猫
05-23 4435
由于工作的原因需要开发海康和大华的摄像头，当中遇到了在浏览器播放实时画面的问题，由于摄像头是rtsp格式的，h5原生不支持这种格式，网上查了很多教程大多是使用rtsp转rtmp，不过rtmp需要falsh的支持，但是在chrome已经默认禁用、包括未来也会逐渐淘汰，所有最终这种方案被淘汰。 于是我想应该把rtsp转化成一种类似http协议的方式，能够直接被h5识别，于是我google，百度就不用说了，查了半天全是没有的东西。终于我找到了一种叫jsmpeg的插件，它主要是通过webSocket发送MPEG，
轻松实现在web页面中直接播放rtsp视频流
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
04-12 3万+
帮你轻松实现在页面中直接播放rtsp视频流 使用准备ffmpeg运行rtsp2web前端代码课外知识 写在前面 我之前研究在 web 中直接播放 rtsp 视频流时，写过一篇文章：【前端】rtsp 与 rtmp 视频流的播放方法。阅读这篇文章对你的学习有很大帮助。在文章中我有过详细的分析和解读，给出了结论：要想在 web 中实时播放 rtsp 视频流：借助后端转码推流将是必要的操作。 实现 我用 node.js 实现了转码推流的功能，并将其打包成 rtsp2web 发布到了 npm 上。......
rtsp流媒体测试工具
08-15
rtsp流媒体测试工具，测试监控设备或直播流工具 工具非常好用。
webrtc实现h5播放rtsp流
04-25
在实现H5播放RTSP流时，我们首先需要一个服务器来处理RTSP流并将其转换为WebRTC兼容的数据格式，通常是RTP（Real-time Transport Protocol）。这个过程通常称为“RTSP到WebRTC的适配”。有几种开源项目如Medialooks...
web端 多路 视频实时播放rtsp流
05-22
本项目基于“web端多路视频实时播放rtsp流”这一主题，结合SpringBoot、WebSocket和FFmpeg技术，实现了在Web端无需插件即可播放多路RTSP视频流的功能。下面将详细介绍这些关键技术及其在项目中的应用。 首先，RTSP...
rtsp(h5转流播放)
05-13
然而，HTML5（H5）原生并不支持RTSP流，这使得在Web浏览器中直接播放RTSP流成为了一个挑战。为了解决这个问题，我们可以借助第三方工具如FFmpeg来将RTSP流转换为H5兼容的格式，例如HLS或MPEG-DASH，从而实现在H5端...
web,H5无插件播放RTSP摄像机解决方案,Windows、 Linux、 Android、 iOS多平台支持
liveweb视频汇聚平台
08-28 386
所以，我们需要将各种视频格式：H.265、MJPEG、MPEG4转成H.264再转发给H5播放，各种音频格式：G.711A/U、G.726，都统一转码成AAC格式，同样的道理，H5对AAC支持更好一些；关于时间戳调优上，部分监控厂商（大华、雄迈等）的摄像机，其出流的时间戳是极其不均匀的，这就会导致流媒体分发的流经常会出现快放、慢放、卡顿缓冲加载的现象，所以就需要在流媒体分发时对时间戳进行一次均匀化，这一点上可以参考的ffmpeg的-re命令的方案，对时间戳进行了优化，保证均匀播放；
H5视频可视化播放RTSP/RTMP/HLS/HTTP视频流媒体的几种可行方案
liveweb视频汇聚平台
08-15 925
经过多年的项目实战和研发经验的积累，总结了一下对于H5视频可视化在视频播放上如何做到无插件H5展示的方法，尤其是契合安防行业的方案；
150-200毫秒超低延迟RTSP H5播放 web播放解决方案
liveweb视频汇聚平台
07-20 1474
liveweb具备较强的灵活性，在视频直播过程中liveweb可通过H5进行视频解码，只要客户端支持H5，就能完美进行视频的无插件直播，同时还支持大码率视频直播，并可支持H.264、H.265两种编码格式。如果大家正在找寻一款供能强大的流媒体播放器，那么liveweb将会是一个不错的选择，我们也欢迎大家的了解和试用
Windows环境下使用HTML5播放RTSP流
IT_LittleBaby的博客
01-06 910
HTML5 播放RTSP流。
web端播放rtsp视频流
05-15
要在web端播放RTSP视频流，可以尝试使用一些第三方库或框架。以下是一些可能有用的选项： 1. Video.js：一个开源的HTML5视频播放器，支持RTSP视频流。它使用RTSP-over-WebSocket实现。 2. Node-RTSP-Stream：一个Node.js模块，可以将RTSP视频流转换为MJPEG流，以便在网页上播放。它使用FFmpeg进行转换。 3. JSMpeg：一个基于JavaScript的视频播放器，可以播放MPEG1视频流，并支持通过WebSocket实时传输。使用Node.js和FFmpeg可以将RTSP视频流转换为MPEG1流。 4. VXG Media Player：一个商业的HTML5视频播放器，支持RTSP视频流，并提供了丰富的自定义选项和API。 需要注意的是，由于RTSP是一种流媒体协议，不同于HTTP协议，因此在web端播放RTSP视频流需要一些额外的处理和转换。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值