web js 播放rtsp视频流方案

场景

需要在web端预览海康无线摄像头视频流，所以采用海康自身提供的web sdk无法使用

方案1

rtsp流推送到应用服务器，应用服务器再通过ffmpeg 推送到nginx, js再去拉流
缺点：多了一层转发，造成了一定的延迟

方案2

通过webRTC方案，使用现有开源插件 webrtc-streamer
https://github.com/mpromonet/webrtc-streamer

实施

采用docker安装

docker run --net=host -itd --name webrtc-streamer mpromonet/webrtc-streamer:v0.6.5
-- 注意
    0.6.5 之后的版本会导致api/getIceServers 无法访问，问题还没找到

代码示例

去github上下载前端包 https://github.com/mpromonet/webrtc-streamer/releases
解压后，将html文件夹拷贝到项目里面

具体代码

<html>
<head>
	<script src="html/libs/adapter.min.js" ></script>
	<script src="html/webrtcstreamer.js" ></script>
	<script>
		var webRtcServer      = null;
		window.onload         = function() {
			webRtcServer      = new WebRtcStreamer("video", "http://192.168.31.160:8000");
			webRtcServer.connect("rtsp://192.168.31.199:554/openUrl/Tsca7jq");
		}
		window.onbeforeunload = function() { webRtcServer.disconnect(); }
	</script>
</head>
<body>
<video id="video"></video>
</body>
</html>