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

<template>
  <div class="camera-container">
    <div class="left-area">
      <cameraTree :selected="selected" :list="listArr" :draggable="true" @detail-node="onDetail" @on-click="onClick">
        <template #icon="{ item }">
          <template v-if="item.isFolder">
            <SvgIcon v-if="item.expanded" size="18" name="file-open" />
            <SvgIcon v-else size="18" name="file-close" />
          </template>
          <treeIcon class="iconfont" :title="item.title" v-else />
        </template>
        <template #operation="{ type }">
          <!-- <i class="iconfont icon-eyeoutlined"></i> -->
          <span style="color:#ccc;font-size:12px">详情</span>
        </template>
      </cameraTree>
    </div>
    <div class="right-area" v-if="addrList.length > 0">
      <div class="vent-flex-row-wrap camera-box">
        <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>
      <div class="pagination">
        <Pagination v-model:current="current" v-model:page-size="pageSize" :total="total"  @change="onChange" />
      </div>
    </div>
    <div class="camera-box" v-else>
      <Empty />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Pagination, Empty } from 'ant-design-vue';
import { list, cameraAddr, getCameraDevKind, getDevice, getVentanalyCamera } from './camera.api'
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 cameraTree from './common/cameraTree.vue';
import { SvgIcon } from '/@/components/Icon';
import treeIcon from './common/Icon/treeIcon.vue';

//当前选中树节点
let selected = reactive<any>({
  id: null,
  pid: null,
  title: '',
  isFolder: false,
});
//tree菜单列表
let listArr = reactive<any[]>([]);
let searchParam = reactive({
  devKind: '',
  strType: '',
})

I18N.use(ZH)
let router = useRouter(); //路由
const pageSize = ref(8)
const current = ref(1)
const total = ref(0)
const playerList = ref([])
const webRtcServerList = <any[]>[]
let addrList = ref<{ name: string, addr: string }[]>([])

async function getCameraDevKindList() {
  let res = await getCameraDevKind()
  if (res.length != 0) {
    listArr.length = 0
    listArr.push({
      pid: 'root',
      isFolder: true,
      expanded: true,
      title: '全部',
      id: 0,
      children: []
    })
    res.forEach(el => {
      el.pid = 0
      el.isFolder = true,
        el.expanded = false,
        el.title = el.itemText
      el.id = el.subDictId
      el.children = []
      listArr[0].children.push(el)
    })
    selected.id = listArr[0].id;
    selected.pid = listArr[0].pid;
    selected.title = listArr[0].title;
    selected.isFolder = listArr[0].isFolder;
  }
}


//点击目录
async function onClick(node) {
  if(selected.title === node.title && selected.id === node.id) return
  current.value = 1
  selected.id = node.id;
  selected.pid = node.pid;
  selected.title = node.title;
  selected.isFolder = node.isFolder;
  if (node.pid != 'root') {
    if (node.isFolder) {
      let res = await getDevice({ devicetype: node.itemValue })
      if (res.msgTxt.length != 0) {
        res.msgTxt[0].datalist.forEach(el => {
          el.pid = node.id
          el.isFolder = false
          el.title = el.strinstallpos
          el.id = el.deviceID
        })
        listArr[0].children.forEach(v => {
          if (v.id == node.id) {
            v.children = res.msgTxt[0].datalist
          }
        })
      }
      searchParam.devKind = node.itemValue
      searchParam.strType = ''
      await getVideoAddrs()
    } else {
      getVideoAddrsSon(node.deviceID)
    }

  } else {
    searchParam.devKind = ''
    searchParam.strType = ''
    await getVideoAddrs()
  }
  getVideo()
};

//点击详情跳转
function onDetail(node) {
  console.log(node, '详情-------------')
  switch (node.deviceType) {
    case 'gate_qd':
      router.push('/monitorChannel/monitor-gate?id=' + node.deviceID)
      break;
    case 'pump_over':
      router.push('/monitorChannel/gasPump-home?id=' + node.deviceID)
      break;
    case 'pump_under':
      router.push('/monitorChannel/gasPump-home?id=' + node.deviceID)
      break;
  }
}

async function getVideoAddrs() {
  clearCamera();
  playerList.value = []
  let res = await list({ ...searchParam, pageSize: pageSize.value, pageNo: current.value })
  total.value = res['total'] || 0
  if (res.records.length != 0) {
    const cameraList = <{ name: string, addr: string }[]>[]
    const cameras = res.records
    for (let i = 0; i < cameras.length; i++) {
      const item = cameras[i];

      if (item['devicekind'] === 'toHKRtsp') {
        // 从海康平台接口获取视频流
        try {
          const data = await cameraAddr({ cameraCode: item['addr'] });
          if (data) {
            cameraList.push({ name: item['name'], addr: data['url'] });
          }
          // cameraList.push({
          //   name: item['name'],
          //   // addr: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
          //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
          // });
        } 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'] });
      }
    }
    addrList.value = cameraList
  }
}

async function getVideoAddrsSon(Id) {
  clearCamera();
  playerList.value = []
  let res = await getVentanalyCamera({ deviceid: Id })
  console.log(res, 'xin---------------')
  if (res.records.length != 0) {
    const cameraList = <{ name: string, addr: string }[]>[]
    const cameras = res.records
    for (let i = 0; i < cameras.length; i++) {
      const item = cameras[i];

      if (item['devicekind'] === 'toHKRtsp') {
        // 从海康平台接口获取视频流
        try {
          const data = await cameraAddr({ cameraCode: item['addr'] });
          if (data && data['url']) {
            cameraList.push({ name: item['name'], addr: data['url'] });
          }
          // cameraList.push({
          //   name: item['name'],
          //   // addr: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
          //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
          // });
        } 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'] });
      }
    }
    addrList.value = cameraList
  }
}

function onChange(page) {
  current.value = page;
  getVideoAddrs().then(() => {
    getVideo()
  })
}

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)
    }
  }
}

function setNoRtspVideo(id, videoAddr) {
  const fileExtension = videoAddr.split('.').pop();
  if (fileExtension === 'flv') {
    const player = new Player({
      lang: 'zh',
      id: id,
      url: videoAddr,
      width: 354,
      height: 245,
      poster: '/src/assets/images/vent/noSinge.png',
      plugins: [FlvPlugin],
      fluid: true,
      autoplay: true,
      isLive: true,
      playsinline: false,
      screenShot: true,
      whitelist: [''],
      ignores: ['time'],
      closeVideoClick: true,
      customConfig: {
        isClickPlayBack: 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') {
    let player
    if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
      // 原生支持 hls 播放
      player = new Player({
        lang: 'zh',
        id: id,
        url: videoAddr,
        width: 354,
        height: 245,
        isLive: true,
        autoplay: true,
        autoplayMuted: true,
        cors: true,
        poster: '/src/assets/images/vent/noSinge.png',
        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: 354,
        height: 245,
        isLive: true,
        autoplay: true,
        autoplayMuted: true,
        plugins: [HlsPlugin], // 第二步
        poster: '/src/assets/images/vent/noSinge.png',
        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()
  }
}

function clearCamera() {
  const num = webRtcServerList.length
  for (let i = 0; i < num; 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 = []
}

onMounted(async () => {
  await getVideoAddrs()
  // getTreeList()
  getCameraDevKindList()
  getVideo()
})

onUnmounted(() => {
  clearCamera()
})

</script>
<style lang="less">
.camera-container {
  position: relative;
  width: calc(100% - 30px);
  height: calc(100% - 84px);
  display: flex;
  margin: 15px;
  justify-content: space-between;
  align-items: center;

  .left-area {
    width: 15%;
    height: 100%;
    padding: 20px;
    border: 1px solid #99e8ff66;
    background: #27546e1a;
    box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
    -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
    -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
    box-sizing: border-box;

    // lxh
    .iconfont {
      color: #fff;
      font-size: 12px;
      margin-left: 5px;
    }
  }

  .right-area {
    width: 85%;
    height: 100%;
    padding: 0px 0px 0px 15px;
    box-sizing: border-box;

    .camera-box {
      height: calc(100% - 60px);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;

      .player-box {
        width: 375px;
        height: 272px;
        padding: 10px;
        background: url('/@/assets/images/vent/camera_bg.png');
        background-size: 100% 100%;
        position: relative;
        margin: 10px;

        .player-name {
          font-size: 14px;
          position: absolute;
          top: 15px;
          right: 15px;
          color: #fff;
          background-color: hsla(0, 0%, 50%, .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;
        }
      }
    }

    .pagination {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}



:deep(video) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
</style>