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

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

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

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

前言

首先說明目前我只完成了本地測試，因還沒確定技術選型所以暫無項目應用，先做一下儲備，后續(xù)項目應用的話這篇文章會持續(xù)更新。

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

1、下載webrtc-streamer，本機測試我下載的最新window版本

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

2、解壓下載包

3、雙擊webrtc-streamer.exe啟動服務

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

4、將下載包html文件夾下webrtcstreamer.js文件和html/libs文件夾下adapter.min.js文件復制到VUE項目public目錄下

在index.html文件里引入這兩個js文件

5、編寫測試頁面

注意：第三步在本機啟動服務所以 new WebRtcStreamer(id,serverUrl)中URL傳入127.0.0.1端口可

見第三步截圖為8000；各監(jiān)控設備廠商有自己的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的設備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>