gasInjection-project/src/views/vent/monitorManager/camera/index.vue

<template>
  <div class="vent-flex-row-wrap">
    <div v-for="i in num" :key="i">
      <video :id="'video'+i" muted autoplay width="400" height="400"></video>
    </div>
  </div>
  
</template>
<script lang="ts" setup>
  import {onMounted, onUnmounted} from 'vue';
  const webRtcServerList = <any[]>[]
  const num = 10
  const urls = [
    'rtsp://76.75.8.120/axis-media/media.amp',
    'rtsp://80.90.151.112/axis-media/media.amp',
    'rtsp://174.6.126.86/axis-media/media.amp',
    'rtsp://213.34.225.97/axis-media/media.amp',
    'rtsp://76.75.8.120/axis-media/media.amp',
    'rtsp://176.65.94.105/axis-media/media.amp',
    'rtsp://37.157.51.30/axis-media/media.amp',
    'rtsp://64.187.201.16/axis-media/media.amp',
    'rtsp://194.32.173.211/axis-media/media.amp',
    'rtsp://admin:admin12345@192.168.1.64:554/Streaming/Channels/1'
  ]

  function getVideo() {
    const ip = VUE_APP_URL.webRtcUrl;
    for(let i =1; i<= num; i++){
      const webRtcServer = new window['WebRtcStreamer']('video'+i , location.protocol + ip)
      webRtcServerList.push(webRtcServer)
      webRtcServer.connect('rtsp://admin:admin12345@192.168.183.64:554/Streaming/Channels/1')
      // webRtcServer.connect(urls[i])
    }
  }

  onMounted(() => {
    getVideo()
  })

  onUnmounted(() => {
    for (let i = 0; i < num; i++) {
      webRtcServerList[i].disconnect()
      webRtcServerList[i] = null
    }
  })

</script>
<style lang="less">


</style>