mky-vent-base/src/views/vent/monitorManager/airDoor/components/cameraModal.vue

<template>
  <div class="camera-modal">
    <div v-for="(item, index) in addrList" :key="index" class="player-box">
      <div class="player-name">{{ item.name }}</div>
      <div style="padding-top: 3px">
        <template v-if="item.addr.startsWith('rtsp://')">
          <video :id="`video${index}`" muted autoplay></video>
          <div class="click-box" @dblclick="goFullScreen(`video${index}`)"></div>
        </template>
        <template v-else>
          <div :id="'player' + index"></div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import Player, { I18N } from 'xgplayer';
import ZH from 'xgplayer/es/lang/zh-cn';
import HlsPlugin from 'xgplayer-hls';
import FlvPlugin from 'xgplayer-flv';
import 'xgplayer/dist/index.min.css';
import { cameraAddr } from '../airdoor.api';
let props = defineProps({
  cameraData: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const playerList = ref([]);
let addrList = ref<{ name: string; addr: string; cameraRate: number; devicekind: string }[]>([]);
const webRtcServerList = <any[]>[];

async function getVideoAddrs() {
  console.log(props.cameraData, 'camera---')
  clearCamera();
  playerList.value = [];


  const cameraList = <{ name: string; addr: string; cameraRate: number; devicekind: string }[]>[];
  const cameras = props.cameraData.cameras;
  for (let i = 0; i < cameras.length; i++) {
    const item = cameras[i];
    if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs' || item['devicekind'] === 'HLL' || item['devicekind'] === 'YZG_URL') {
      // 从海康平台接口获取视频流
      const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
      const devicekindType = item['devicekind'] === 'YZG_URL' ? 'YZG_URL' : ''
      try {
        const data = await cameraAddr({ devicekind: devicekindType, cameraCode: item['addr'], videoType });
        if (data && data['url']) {
          cameraList.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
        }

      } catch (error) { }
    } else {
      if (item['addr'].includes('0.0.0.0')) {
        item['addr'] = item['addr'].replace('0.0.0.0', window.location.hostname);
      }
      cameraList.push({ name: item['name'], addr: item['addr'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
    }
  }
  addrList.value = cameraList;
  console.log(addrList.value, ' addrList.value-------------');

}

function getVideo() {
  const ip = VUE_APP_URL.webRtcUrl;
  for (let i = 0; i < addrList.value.length; i++) {
    const item = addrList.value[i];
    if (item.addr.startsWith('rtsp://')) {
      const dom = document.getElementById('video' + i) as HTMLVideoElement;
      dom.muted = true;
      dom.volume = 0;
      const webRtcServer = new window['WebRtcStreamer'](dom, location.protocol + ip);
      webRtcServerList.push(webRtcServer);
      webRtcServer.connect(item.addr);
    } else {
      setNoRtspVideo('player' + i, item.addr, item.cameraRate, item.devicekind);
    }
  }
}
function clearCamera() {
  const num = webRtcServerList.length;
  for (let i = 0; i < num; i++) {
    if (webRtcServerList[i]) {
      webRtcServerList[i].disconnect();
      webRtcServerList[i] = null;
    }
  }
  for (let i = 0; i < playerList.value.length; i++) {
    const player = playerList.value[i];
    if (player.destroy) player.destroy();
  }
  playerList.value = [];
}

function setNoRtspVideo(id, videoAddr, cameraRate, devicekind) {
  const fileExtension = videoAddr.split('.').pop();
  if (fileExtension === 'flv' || devicekind == 'flv') {
    const player = new Player({
      lang: 'zh',
      id: id,
      url: videoAddr,
      width: 589,
      height: 330,
      poster: '/src/assets/images/vent/noSinge.png',
      plugins: [FlvPlugin],
      fluid: true,
      autoplay: true,
      isLive: true,
      playsinline: true,
      screenShot: true,
      whitelist: [''],
      ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
      closeVideoClick: true,
      customConfig: {
        isClickPlayBack: false,
      },
      defaultPlaybackRate: cameraRate || 1,
      controls: false,
      flv: {
        retryCount: 3, // 重试 3 次，默认值
        retryDelay: 1000, // 每次重试间隔 1 秒，默认值
        loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
        fetchOptions: {
          // 该参数会透传给 fetch，默认值为 undefined
          mode: 'cors',
        },
        targetLatency: 10, // 直播目标延迟，默认 10 秒
        maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
        disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
        maxJumpDistance: 10,
      },
    });
    playerList.value.push(player);
  }
  if (fileExtension === 'm3u8' || devicekind == 'm3u8') {
    let player;
    if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
      // 原生支持 hls 播放
      player = new Player({
        lang: 'zh',
        id: id,
        url: videoAddr,
        width: 376,
        height: 210,
        isLive: true,
        autoplay: true,
        autoplayMuted: true,
        cors: true,
        ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
        poster: '/src/assets/images/vent/noSinge.png',
        defaultPlaybackRate: cameraRate || 1,
        controls: false,
        hls: {
          retryCount: 3, // 重试 3 次，默认值
          retryDelay: 1000, // 每次重试间隔 1 秒，默认值
          loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
          fetchOptions: {
            // 该参数会透传给 fetch，默认值为 undefined
            mode: 'cors',
          },
          targetLatency: 10, // 直播目标延迟，默认 10 秒
          maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
          disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
          maxJumpDistance: 10,
        },
      });
    } else if (HlsPlugin.isSupported()) {
      // 第一步
      player = new Player({
        lang: 'zh',
        id: id,
        url: videoAddr,
        width: 376,
        height: 210,
        isLive: true,
        autoplay: true,
        autoplayMuted: true,
        plugins: [HlsPlugin], // 第二步
        poster: '/src/assets/images/vent/noSinge.png',
        ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
        defaultPlaybackRate: cameraRate || 1,
        controls: false,
        hls: {
          retryCount: 3, // 重试 3 次，默认值
          retryDelay: 1000, // 每次重试间隔 1 秒，默认值
          loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
          fetchOptions: {
            // 该参数会透传给 fetch，默认值为 undefined
            mode: 'cors',
          },
          targetLatency: 10, // 直播目标延迟，默认 10 秒
          maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
          disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
          maxJumpDistance: 10,
        },
      });
    }
    playerList.value.push(player);
  }
}

function goFullScreen(domId) {
  const videoDom = document.getElementById(domId) as HTMLVideoElement;
  if (videoDom.requestFullscreen) {
    videoDom.requestFullscreen();
    videoDom.play();
  } else if (videoDom.mozRequestFullscreen) {
    videoDom.mozRequestFullscreen();
    videoDom.play();
  } else if (videoDom.webkitRequestFullscreen) {
    videoDom.webkitRequestFullscreen();
    videoDom.play();
  } else if (videoDom.msRequestFullscreen) {
    videoDom.msRequestFullscreen();
    videoDom.play();
  }
}

onMounted(async () => {
  await getVideoAddrs();
  getVideo();
});

onUnmounted(() => {
  clearCamera();
});
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .camera-modal {
    --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
  }
}

.camera-modal {
  --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .player-box {
    width: 400px;
    height: 235px;
    padding: 10px 12px;
    background: var(--image-camera_bg);
    background-size: 100% 100%;
    position: relative;
    margin: 10px;

    .player-name {
      font-size: 14px;
      position: absolute;
      top: 12px;
      right: 12px;
      color: #fff;
      background-color: hsla(0, 0%, 50%, 0.5);
      border-radius: 2px;
      padding: 1px 5px;
      max-width: 120px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      z-index: 999;
    }

    .click-box {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }
}
</style>