webrtc-streamer实时播放监控

公司要做web端监控实时播放，经过调研，webrtc-streamer的方式对前后端项目侵入最少，且没有延迟卡钝的现象。

一、准备工作

　　一个摄像头，摄像头对应的rtsp流链接，一台电脑，一个vue项目。

二、Webrtc-streamer安装及启动教程

 

　　1、下载安装包

　　　　下载地址：https://github.com/mpromonet/webrtc-streamer/releases

　　　　 

　　2、解压后文件如下所示，打开cmd命令

 　　　　

　　3、执行命令webrtc-streamer.exe -H 127.0.0.1:8010，出现以下即表示运行成功。

 

　　　　

 三、vue前端项目设置

　　1、html代码　　　　

<template name="监控播放组件">
    <div class="video-box">
        <video id="rtc_player" controls muted autoplay class="video-player"></video>
    </div>
</template>

　　2、js代码

initPlayer() {
　　if (!this.rtspUrl) return;

　　this.destroyWebRtcServer()
　　// rtc_player：需要绑定的video控件ID
　　// 127.0.0.1:8010：启动webrtc-streamer的设备IP和端口，默认8000
　　this.webRtcServer = new WebRtcStreamer('rtc_player', location.protocol + `//127.0.0.1:8010`)
　　// 需要查看的rtsp地址
　　this.webRtcServer.connect('rtsp链接地址')
},
destroyWebRtcServer() {
　　this.webRtcServer && this.webRtcServer.disconnect()
　　this.webRtcServer = null
},

ok了

四、效果展示