服務(wù)器端時(shí) 為了外網(wǎng)訪問 我們?cè)趀xe軟件所在的文件夾啟動(dòng)cmd 輸入下面的命令
webrtc-streamer.exe -H x.x.x.x:9933 啟動(dòng)端口
然后把此端口放行映射出去即可
先上代碼
<template>
<div>
video的配置自己寫
<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：?jiǎn)?dòng)webrtc-streamer的設(shè)備IP和端口，默認(rèn)8000 上到服務(wù)器時(shí)記得換地址
this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
//需要查看的rtsp地址
this.webRtcServer.connect(這里寫你的地址')
//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: {
}
}
</script>
<style scoped></style>
下面準(zhǔn)備webrtc-streamer
下載https://github.com/mpromonet/webrtc-streamer/releases
下載后解壓
然后啟動(dòng)exe文件
如下圖則啟動(dòng)成功，此時(shí)在瀏覽器訪問127.0.0.1:8000可以看到本機(jī)監(jiān)控畫面
將下載包html文件夾下webrtcstreamer.js文件和html/libs文件夾下adapter.min.js文件復(fù)制到VUE項(xiàng)目public目錄下。在index.html文件里引入這兩個(gè)js文件
index.html中引入
然后在引入的頁面按照最上面的代碼寫就行了。文章來源地址http://www.zghlxwxcb.cn/news/detail-854243.html
文章來源：http://www.zghlxwxcb.cn/news/detail-854243.html
到了這里，關(guān)于webSRc實(shí)現(xiàn)瀏覽器播放rtsp【海康】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
