使用WebRtcStreamer播放rtsp视频

一、使用步骤

1.安装WebRtcStreamer包

代码如下（示例）：

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-webrtc": "^2.0.0"//这个就是需要安装的包
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }
}

2.把WebRtcStreamer.js文件放入public文件夹下，并在index.html引入WebRtcStreamer.js

代码如下（示例）：

index.html文件中引入webrtcstreamer.js

 <script src="/webrtcstreamer.js"></script>

3.从后台获取rtsp流地址和服务器地址

<template>
  <div>
    <a-card :bordered="false">
      <!-- 监控-begin -->
      <a-row :gutter="24">
        <!-- 视频区域 -->
        <a-col :md="16" :sm="16" class='right_card'>
          <!-- <p class="title1">实时监控</p> -->
          <div v-for="item in FlvPlayerList" :key="item.id" style="float:left">
            <div style="margin-right: 20px; margin-bottom: 20px">
              <p style="font-size: 16px; margin-bottom: 5px" class="svg_title">
                <a-icon type="video-camera" class="svg_icon" /><span>{{ item.devicePosition }}</span>
              </p>
              <video  
                style="width: 400px; height: 300px; margin-top:-10px"
                ref="monitorVideo" 
                :data-video-rtsp="`rtsp://${item.rtspIp}/live/mainstream`"
                :data-video-url="`${item.webrtcstreamerAddr}`">
              </video>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import {getAddressList } from '@/api/user'

export default { 
  data() {
    return {
      webRtcServerList:[]
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  destroyed() {
     this.webRtcServerList.forEach(webRtcServer => {
      webRtcServer.disconnect()
    });
  },
  mounted() {
    this.getaddress()
  methods: {
    // 视频流地址
    getaddress() {
      getAddressList().then((res) => {
        let flv = res.result.records
        if (flv.length >= 4) {
          this.FlvPlayerList = flv.slice(-4);
          console.log('FlvPlayerList',this.FlvPlayerList)
        } else {
          this.FlvPlayerList = flv.slice(0, 4)
        };
        // ---回调函数延迟在下一次dom更新数据后调用---//
        this.$nextTick(()=>{
          // 获取渲染dom的集合
         let monitorVideoDomArray= [...this.$refs.monitorVideo]
        //  循环遍历返回webRtcServer
         let webRtcServerList= monitorVideoDomArray.map(dom => {
              let webRtcServer= new WebRtcStreamer(dom,dom.getAttribute('data-video-url'));
    	        webRtcServer.connect(dom.getAttribute('data-video-rtsp'));
              return webRtcServer
         });
         //  存储webRtcServer方便管理销毁
         this.webRtcServerList = webRtcServerList
        })
      })
    },
}
</script>
<style scoped>
@import '~@assets/less/common.less';

</style>

1本次案例中的一个视频流对应的是一个服务器，多个视频流对应一个服务器的demo：链接：https://pan.baidu.com/s/193V8jPu7yQkxy8QnNdbEEA
提取码：dsgi