gasInjection-project/src/components/vent/camera/createPlayer.vue

<template>
  <div id="LivePlayerBox">
    <component v-for="(item, index) in streamList" :key="index" :is="item.zj" :src="item.src" class="liveVideo" />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, h, onBeforeMount, onUnmounted, onBeforeUnmount } from 'vue';
  import HlsPlayer from '@/components/vent/camera/HlsPlayer.vue';
  import LivePlayerWrapper from '@/components/vent/camera/LivePlayerWrapper.vue';

  const props = defineProps<{
    srcList: any[];
  }>();

  const streamList = ref<any[]>([]);

  onMounted(() => {
    const componentList: any[] = [];
    for (let i = 0; i < props.srcList.length; i++) {
      const stream = props.srcList[i];
      if (stream.addr.includes('0.0.0.0')) {
        stream.addr = stream.addr.replace('0.0.0.0', window.location.hostname);
      }
      if (stream.addr.toLowerCase().includes('.m3u8') || stream.addr.toLowerCase().startsWith('rtsp://')) {
        componentList.push({ zj: HlsPlayer, src: stream.addr });
      } else if (stream.addr.startsWith('rtmp://')) {
        componentList.push({ zj: LivePlayerWrapper, src: stream.addr });
      } else {
        componentList.push({ zj: LivePlayerWrapper, src: stream.addr });
      }
    }
    streamList.value = componentList;
  });
  onBeforeUnmount(() => {
    streamList.value = [];
  });
</script>