使用webrtc-streamer查看实时监控

最新推荐文章于 2024-06-27 12:02:39 发布
最新推荐文章于 2024-06-27 12:02:39 发布
阅读量1.6w 收藏 67
点赞数 6
分类专栏： webrtc 文章标签： javascript js webrtc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nov4th/article/details/119803478
版权

使用webrtc-streamer查看实时监控

webrtc-streamer

webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目，它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpeg+flv.js的方案，延迟降低到了0.4秒左右，画面的加载速度也变快了，切换浏览器标签后也不会暂停画面，并且解决了http1.1的同域名中的并发限制(在谷歌浏览器中可以同时播放6个以上的video)。

webrtc-streamer下载

windows：下载地址，选择对应版本下载后解压运行【webrtc-streamer.exe】即可

centos7.4：因为一些环境原因，建议在docker中使用

# docker中获取webrtc-streamer
docker pull mpromonet/webrtc-streamer

# 启动webrtc-streamer镜像
docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer

测试

页面中需要用到的js文件：【webrtcstreamer.js】、【adapter.min.js】，分别在windows版的【html】和【html\libs】目录

核心代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<video id='video' style='object-fit:fill' controls autoplay autobuffer muted preload='auto'></video>
		
		<script type="text/javascript" src="./js/webrtcstreamer.js"></script>
		<script type="text/javascript" src="./js/adapter.min.js"></script>
		<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
		<script>        
		    var webRtcServer = null;
		    
		    //页面加载时加载视频画面
		    window.onload = function() { 
		    	//video：需要绑定的video控件ID
		    	//192.168.1.226：启动webrtc-streamer的设备IP
		        webRtcServer = new WebRtcStreamer("video",location.protocol+"//192.168.1.226:8000");
		        //需要查看的rtsp地址
				webRtcServer.connect("rtsp://admin:12345@192.168.1.65:554/h264/ch1/main/av_stream");
		    }
		    
			//页面退出时销毁
		    window.onbeforeunload = function() { 
				webRtcServer.disconnect();
			}
		</script>
	</body>
</html>

常用的RTSP格式

#海康摄像头
rtsp://<账号>:<密码>@<IP>:<端口,默认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://<账号>:<密码>@<IP>:<端口,默认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
nov4th
关注
  • 6
    点赞
  • 踩
  • 67
    收藏
    觉得还不错? 一键收藏
  • 62
    评论
专栏目录
webrtc-streamer-card:可以从webrtc-streamer（RTSP，H264，H265 ...）流式传输零延迟视频的家庭辅助Lovelace卡
05-23
webrtc-流光卡 可以从webrtc-streamer（RTSP，H264，H265 ...）流式传输零延迟视频的家庭辅助Lovelace卡 您需要一个正在运行的Webrtc-streamer实例，有关更多详细信息和完整选项，请参见官方存储库： : webrtc-streamer基于live555 lib，因此它应该能够处理MPEG，H.265，H.264，H.263 +，DV或JPEG视频以及几种音频编解码器。 可以通过Docker运行最简单的方法docker run -p 8000:8000 -it mpromonet/webrtc-streamer 在您的家庭辅助www目录中克隆或解压缩此存储库。 自定义卡必须作为仪表板资源中的模块添加： resources: - url: /local/webrtc-streamer-card/webrtc-streame
webrtc-streamer实现网络摄像头实时监控
04-19
1、win7到win11都试过了，都可以。win11使用webrtc-streamer-v0.7.2（支持性比较好）。 2、打开30个延时在1s左右。 3、不要双击启动exe文件。有窗口和无窗口的bat文件已经写好了，文件在webrtc下。 4、运行之后，改一下html的rtsp流。 5、支持所有浏览器，不需要插件。
webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目
06-07
webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目，它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpeg+flv.js的方案，延迟降低到了0.4秒左右，画面的加载速度也变快了，切换浏览器标签后也不会暂停画面，并且解决了http1.1的同域名中的并发限制(在谷歌浏览器中可以同时播放6个以上的video)。
【使用webrtc-streamer解析rtsp视频流】
最新发布
baidu_41564215的博客
06-27 941
使用webrtc-streamer，解析rtsp视频流
vue实现rtsp视频流浏览器实时播放
mullerpp的博客
07-15 7607
因为video标签只能播放特定格式的视频，比如MP4、WebM和Ogg格式，而对于这种视频流文件则需要通过转码实现，而vue-video-player也只能播放特定格式的视频，所以要播放监控的实时视频，除了在浏览器的地址栏直接打开摄像头的地址，还可以通过webrtc-streamer和video标签在页面实现监控实时播放。
探索WebRTC Streamer：实时通信的新境界
gitblog_00083的博客
03-23 872
探索WebRTC Streamer：实时通信的新境界 项目地址:https://gitcode.com/mpromonet/webrtc-streamer 在这个数字化的时代，实时音视频通信已经成为日常生活和工作中不可或缺的一部分。今天，我们将深入探讨一个开源项目——WebRTC Streamer，它是一个基于WebRTC技术构建的强大工具，为用户提供了一种简单而高效的方式来实现实时流媒体传输。...
webrtc-streamer
04-18
vue2、vue3播放rtsp视频流
史上最详细的webrtc-streamer访问摄像机视频流教程
热门推荐
刘苏义的博客
03-31 3万+
最近公司在搞流媒体，我推荐了webrtc-streamer进行搭建，使用了一段时间后，出现新的需求，需要将内网的摄像机进行公网访问，我查询了几乎所有的帖子和github的问题回复，都没有给我一个准确的答案，经过不断尝试和摸索，我终于成功了，我希望将我的过程记录下来，让更多的中国开发者可以少走弯路，我对于webrtc不是很了解，但是这并不影响我使用开源的webrtc-streamer进行开发。
webRtc-streamer简单使用-备份
m0_66509866的博客
08-02 5807
第一次写，见谅可能写得不太好如果有啥问题，可以留言交流
使用VUE和webrtc-streamer实现rtsp实时监控
耳火的博客
01-07 6874
本文简单总结了自己使用过程的一些知识点和VUE和webrtc-streamer实现rtsp实时监控的一些步骤，希望可以帮到你。
利用Webrtc-streamer展示rstp视频流
书读百遍，其义自见
03-22 6266
目录一级目录二级目录三级目录一、下载二、docker方式安装下载镜像把rstp流加入、设置别名、启动三、启动四、html使用效果 一级目录 二级目录 三级目录 Webrtc-streamer展示rstp视频流，网上很多都没有说清楚，这里记录下。 一、下载 https://github.com/mpromonet/webrtc-streamer/releases 二、docker方式安装 下载镜像 docker pull mpromonet/webrtc-streamer 把rstp流加入、设置别名、
webrtc-streamer:用于V4L2捕获设备，RTSP源和屏幕捕获的WebRTC流媒体
04-05
WebRTC流媒体 WebRTC-streamer是一项使用简单机制通过WebRTC流式传输视频捕获设备和RTSP源的实验。 它嵌入了一个实现API的HTTP服务器，并提供了一个简单HTML页面，该页面通过AJAX使用它们。 WebRTC信令是通过HTTP请求实现的： / api / call：发送报价并获取答案 / api / hangup：关闭通话 / api / addIceCandidate：添加候选人 / api / getIceCandidate：获取候选人列表 可使用/ api / help获得HTTP API列表。 如今，在 ， ， 和上进行了构建： 适用于Ubuntu Bionic上的x86_64 适用于交叉编译的armv7（此版本在Raspberry Pi2和NanoPi NEO上运行） 适用于交叉编译的armv6 + vfp（此版本在Raspberr
webrtc基于webrtc-streamer推流实现直播
02-02
webrtc基于webrtc-streamer推流实现直播，前端基于vue3实现，下载可用
公网视频流访问之webrtc-streamer
征途无悔
01-13 1万+
前言 之前两篇帖子 视频流调试过程（海康威视+Kurento） 使用Kurento提供公网视频流 分别解决了从rstp视频流转码到页面播放和kurento的网络穿透的问题。但是吧，在我这次的具体方案中，它还是有个很讨厌的地方，就是需要https。而因为是政府项目，政府又因为很多麻烦的审核问题不想申请域名，这里就总是会出现一个看上去很吓人的安全警告。虽然无伤大雅，但是领导看见了总是会想一想的，说不定就给不少人找了很多麻烦。 后来，我的同事发现了另一个项目webrtc-streamer 这个项目也是基于web
Docker WebRTC容器部署方案（mpromonet/webrtc-streamer）
Dontla的博客
06-30 6387
WebRTC（Web Real-Time Communication）是一种开放的实时通信技术，它允许浏览器之间进行音频、视频和数据的实时传输。WebRTC的目标是通过简化实时通信的开发过程，使开发者能够轻松地在Web应用程序中集成实时通信功能。WebRTC的核心技术包括三个主要组件：媒体捕获和处理：WebRTC提供了API，使开发者能够从摄像头和麦克风中捕获音视频流，并对其进行处理和编码。
史上最详细的webrtc-streamer的H265解决方案
刘苏义的博客
08-14 7426
我最欣赏马斯克的一句话，我不在乎专利，专利只会抑制科技的发展。我找遍了所有教程都没有关于webrtc-streamer可以播放H265的rtsp视频流的方案，我摸索到了我就分享出来，不管你们怎么想，我希望你们看了我的贴子，并且收益的话，希望你们也可以像我一样，知识只有分享才能共同进步！
VUE+webrtc-streamer 实现实时视频播放（监控设备-rtsp）
蓝胖子的博客
12-08 3832
VUE+webrtc-streamer 实现实时视频播放（监控设备-rtsp）
vue前端部署webrtc-streamer访问摄像机视频流教程
hxd_0316的博客
12-11 2995
经过一番查找，最终决定使用B站（bilibili）开源的flvjs作为解决方案，其原理是后端用ffmpeg将rtsp视频流转换为flv，然后通过websocket传输flv视频流，然后前端通过websocket获取到视频流后，使用flvjs对视频流再一次处理并进行播放，这是一套无插件无flash免费的视频直播解决方案。后面我们又发现了通过webrtc-streamer播放视频流的方法，成功解决了延迟卡顿的问题。再次强调-H后面是你要监听的地址端口， -o 为了不转码，使用GPU运行，从而降低CPU负荷。
【无标题】
m0_67900727的博客
03-14 932
简介 背景 由于项目需要，需要使用摄像头预览功能，设备型号为海康威视。目前已存在的基于 FFmpeg 的方案延迟都太高，所以项目最终选择基于此方案。 方案 方案选用为基于 WebRTC 的视频即时通讯，它原生支持对 RTP 协议的解码，所以能够做到延迟很低，大概0.2-0.4秒左右，其他方案都有大于1秒的延迟。 WebRTC对浏览器有要求，可以在下面的地址中查看支持的浏览器。https://caniuse.com/rtcpeerconnection 以下介绍内容来自百度百科 Web
C# 使用webrtc-streamer
11-11
根据提供的引用内容，webrtc-streamer是一个基于WebRTC的流媒体服务器，可以用于实时视频流传输。如果您想在C#中使用webrtc-streamer，可以使用WebRTC .NET库。这个库提供了一个WebRTC的C#实现，可以用于在C#应用程序中实现WebRTC功能。您可以使用这个库来连接webrtc-streamer服务器并传输视频流。 以下是使用WebRTC .NET库连接webrtc-streamer服务器的示例代码： ```csharp using System; using System.Threading.Tasks; using WebRTC; namespace WebRTCExample { class Program { static async Task Main(string[] args) { // 创建PeerConnectionFactory var options = new PeerConnectionFactoryOptions(); var factory = new PeerConnectionFactory(options); // 创建PeerConnection var configuration = new RTCConfiguration { IceServers = new[] { new RTCIceServer { Urls = new[] {"stun:stun.l.google.com:19302"} } } }; var pc = factory.CreatePeerConnection(configuration); // 创建VideoTrack var videoDevice = await MediaDevice.GetUserMedia(new MediaStreamConstraints { Video = new VideoMediaTrackConstraints { Width = new ConstrainULong {Exact = 640}, Height = new ConstrainULong {Exact = 480}, FrameRate = new ConstrainDouble {Exact = 30} } }); var videoTrack = videoDevice.GetVideoTracks()[0]; // 添加VideoTrack到PeerConnection var sender = pc.AddTrack(videoTrack); // 连接webrtc-streamer服务器 var offer = await pc.CreateOffer(); await pc.SetLocalDescription(offer); // 将offer发送给webrtc-streamer服务器 // 等待webrtc-streamer服务器返回answer var answer = await pc.WaitForAnswer(); // 设置webrtc-streamer服务器返回的answer await pc.SetRemoteDescription(answer); // 等待连接建立 await Task.Delay(5000); // 关闭连接 await pc.Close(); videoDevice.Stop(); } } } ``` 请注意，这只是一个示例代码，您需要根据您的实际情况进行修改。另外，您需要在项目中添加WebRTC .NET库的引用。
评论 62
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值