web js 播放rtsp视频流方案

发布时间 2023-07-05 11:17:58作者: 四码难追

场景

需要在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文件夹拷贝到项目里面
      • image
    • 具体代码
      <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>
      
      
  • 注意

    视频流一定要设置成h264格式的,可以在海康摄像头管理界面去设置

  • 效果
    image