快捷導(dǎo)航

使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)

更新時(shí)間：2022年11月23日 11:38:01 作者：辣姐什么鬼

WebRTC-streamer是一項(xiàng)使用簡(jiǎn)單機(jī)制通過WebRTC流式傳輸視頻捕獲設(shè)備和RTSP源的實(shí)驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)的相關(guān)資料,需要的朋友可以參考下

前言
1、下載webrtc-streamer，本機(jī)測(cè)試我下載的最新window版本
2、解壓下載包
3、雙擊webrtc-streamer.exe啟動(dòng)服務(wù)
4、將下載包html文件夾下webrtcstreamer.js文件和html/libs文件夾下adapter.min.js文件復(fù)制到VUE項(xiàng)目public目錄下
5、編寫測(cè)試頁(yè)面
6、運(yùn)行項(xiàng)目可查看監(jiān)控視頻播放效果
總結(jié)

前言

首先說明目前我只完成了本地測(cè)試，因還沒確定技術(shù)選型所以暫無(wú)項(xiàng)目應(yīng)用，先做一下儲(chǔ)備，后續(xù)項(xiàng)目應(yīng)用的話這篇文章會(huì)持續(xù)更新。

監(jiān)控設(shè)備播放效果如下：基于公司環(huán)境測(cè)試了大華和?？档谋O(jiān)控設(shè)備（H264編碼）可以正確播放

1、下載webrtc-streamer，本機(jī)測(cè)試我下載的最新window版本

https://github.com/mpromonet/webrtc-streamer/releases

2、解壓下載包

3、雙擊webrtc-streamer.exe啟動(dòng)服務(wù)

如下圖則啟動(dòng)成功，此時(shí)在瀏覽器訪問127.0.0.1:8000可以看到本機(jī)監(jiān)控畫面

4、將下載包html文件夾下webrtcstreamer.js文件和html/libs文件夾下adapter.min.js文件復(fù)制到VUE項(xiàng)目public目錄下

在index.html文件里引入這兩個(gè)js文件

5、編寫測(cè)試頁(yè)面

注意：第三步在本機(jī)啟動(dòng)服務(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：?jiǎn)?dòng)webrtc-streamer的設(shè)備IP和端口，默認(rèn)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、運(yùn)行項(xiàng)目可查看監(jiān)控視頻播放效果

以上為本機(jī)測(cè)試webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放效果的全過程，后續(xù)還要驗(yàn)證服務(wù)器運(yùn)行服務(wù)、局域網(wǎng)公網(wǎng)訪問以及性能等。

總結(jié)

到此這篇關(guān)于使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)的文章就介紹到這了,更多相關(guān)webrtc-streamer實(shí)時(shí)視頻播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: