使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)
前言
首先說明目前我只完成了本地測試，因還沒確定技術(shù)選型所以暫無項目應(yīng)用，先做一下儲備，后續(xù)項目應(yīng)用的話這篇文章會持續(xù)更新。
監(jiān)控設(shè)備播放效果如下：基于公司環(huán)境測試了大華和?？档谋O(jiān)控設(shè)備（H264編碼）可以正確播放
1、下載webrtc-streamer，本機測試我下載的最新window版本
https://github.com/mpromonet/webrtc-streamer/releases
2、解壓下載包
3、雙擊webrtc-streamer.exe啟動服務(wù)
如下圖則啟動成功，此時在瀏覽器訪問127.0.0.1:8000可以看到本機監(jiān)控畫面
4、將下載包html文件夾下webrtcstreamer.js文件和html/libs文件夾下adapter.min.js文件復制到VUE項目public目錄下
在index.html文件里引入這兩個js文件
5、編寫測試頁面
注意：第三步在本機啟動服務(wù)所以 new WebRtcStreamer(id,serverUrl)中URL傳入127.0.0.1端口可
見第三步截圖為8000；各監(jiān)控設(shè)備廠商有自己的RTSP地址格式connect要傳入正確的rtsp地址。
<template>
<div>
<el-button @click="handleChange">切換</el-button>
<video id="video" autoplay width="900" height="900"></video>
</div>
</template>
<script>
export default {
name: 'index1',
data() {
return {
webRtcServer: null
}
},
mounted() {
//video：需要綁定的video控件ID
//127.0.0.1:8000：啟動webrtc-streamer的設(shè)備IP和端口，默認8000
this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
//需要查看的rtsp地址
this.webRtcServer.connect('rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0')
//rtsp://user:password@ip:port/h264/ch1/main/av_stream--海康
//rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0--大華
},
beforeDestroy() {
this.webRtcServer.disconnect()
this.webRtcServer = null
},
methods: {
handleChange() {
this.webRtcServer.connect('rtsp://user:password@ip:port/h264/ch1/main/av_stream')
}
}
}
</script>
<style scoped></style>6、運行項目可查看監(jiān)控視頻播放效果
以上為本機測試webrtc-streamer實現(xiàn)實時視頻播放效果的全過程，后續(xù)還要驗證服務(wù)器運行服務(wù)、局域網(wǎng)公網(wǎng)訪問以及性能等。
總結(jié)
到此這篇關(guān)于使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)的文章就介紹到這了,更多相關(guān)webrtc-streamer實時視頻播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
markRaw是將一個對象標記為普通對象,而toRaw是將reactive對象變?yōu)槠胀▽ο?在 Vue 3 中,markRaw 是一個用于告訴 Vue 的響應(yīng)性系統(tǒng)不要對某個對象進行轉(zhuǎn)換或追蹤其響應(yīng)性的函數(shù),下面給大家介紹vue3中markRaw詳解,感興趣的朋友一起看看吧2024-04-04
vue開發(fā)移動端使用better-scroll時click事件失效的解決方案
這篇文章主要介紹了vue開發(fā)移動端使用better-scroll時click事件失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
vue面試created中兩次數(shù)據(jù)修改會觸發(fā)幾次頁面更新詳解
這篇文章主要為大家介紹了vue面試created中兩次數(shù)據(jù)修改會觸發(fā)幾次頁面更新問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
下面小編就為大家?guī)硪黄唵握務(wù)剉ue的過渡動畫(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了通過cordova將vue項目打包為webapp的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue 如何處理防止按鈕重復點擊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue中點擊active并第一個默認選中功能的實現(xiàn)
這篇文章主要介紹了Vue中點擊active并第一個默認選中功能的實現(xiàn)代碼，代碼簡單易懂，非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來。Vue.js和其他庫相比是一個小而美的庫，作者的主要目的是通過一個盡量簡單的 API 產(chǎn)生可反映的數(shù)據(jù)綁定和可組合的視圖組件，感覺作者的思路非常清晰。2016-04-04
這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據(jù)
本文主要介紹了el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-10-10