海康监控rtsp方式展示

柠檬很甜-

已于 2024-02-19 14:28:47 修改

阅读量350

点赞数 1

文章标签： html

于 2024-02-02 11:27:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43861449/article/details/135986567

版权

文章介绍了如何在HTML和Vue.js应用中利用webrtc-streamer库实现实时视频流的连接和控制，包括从GitHub下载最新版本，以及在页面加载和退出时管理WebRTC服务器连接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webrtc-streamer.exe下载最新版https://github.com/mpromonet/webrtc-streamer/releases

我下载的webrtc-streamer-v0.8.5-dirty-Windows-AMD64-Release.tar.gz

测试代码如下：

h5:

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

vue:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<video id='video' controls autoplay></video>

		<script type="text/javascript" src="webrtcstreamer.js"></script>
		<script type="text/javascript" src="libs/adapter.min.js"></script>

		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: "#rtspBody",
				components: {

				},
				data() {
					return {
						webRtcServer: null
					}
				},
				created() {
					//this.initPlayer()
				},
				mounted() {
					//video：需要绑定的video控件ID
					//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
					this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
					//需要查看的rtsp地址
					this.webRtcServer.connect('rtsp://admin:mima@192.168.1.0:554/h264/ch35/main/av_stream')
					//rtsp://user:password@ip:port/h264/ch1/main/av_stream--海康
					//rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0--大华
				},
				destroyed() {
					this.webRtcServer.disconnect()
					this.webRtcServer = null
				},
				methods: {
					initPlayer(){
						this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
						this.webRtcServer.connect('rtsp://admin:mima@192.168.1.0:554/h264/ch35/main/av_stream')
					},
					handleChange() {
						this.webRtcServer.connect('rtsp://admin:mima@192.168.1.0:554/h264/ch35/main/av_stream')
					}
				}
			})
		</script>
	</body>
</html>