如何实现html显示WebRTC视频监控流

huaweichenai2025-11-04 17:03

一：webrtc服务搭建

1：webrtc镜像服务拉取

webrtc镜像服务地址：https://hub.docker.com/r/mpromonet/webrtc-streamer

复制代码

docker pull mpromonet/webrtc-streamer

2：webrtc镜像服务构建

复制代码

docker run -d --restart="always" -p 8251:8000 --name webrtc mpromonet/webrtc-streamer -o

二：html调用webrtc服务查看视频监控

html调用webrtc服务查看监控需要使用到adapter.min.js和webrtcstreamer.js

https://download.csdn.net/download/huaweichenai/92240098

简单示例如下：

复制代码

<html>
<head>
<script src="adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>        
	var webRtcServer      = null;
	window.onload         = function() { 
		webRtcServer      = new WebRtcStreamer("video",location.protocol+"//"+location.hostname+":8000");
		webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
	}
	window.onbeforeunload = function() { webRtcServer.disconnect(); }
</script>
</head>
<body> 
	<video id="video" />
</body>
</html>

根据如上操作我们就可以实现html显示WebRTC视频监控流