webrtc-streamer實時播放監控

不系舟178發表於2024-07-15
Web

公司要做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了

四、效果展示

　　

相關文章