mky-vent-base/src/hooks/system/useCamera.ts

import { defHttp } from '/@/utils/http/axios';
import { render, h, nextTick } from 'vue';
import LivePlayer from '@liveqing/liveplayer-v3';
import { useDrag } from '../event/useDrag';

export function useCamera() {
  const cameraList = (params) => defHttp.get({ url: '/safety/ventanalyCamera/list', params });
  const cameraAddrList = (params) => defHttp.post({ url: '/ventanaly-device/camera/info', params });

  let webRtcServer = <any[]>[];
  let playerDoms = <(HTMLVideoElement | undefined | null)[]>[];

  async function getCamera(deviceid, parentPlayerDom?) {
    if (!parentPlayerDom) {
      parentPlayerDom = document.createElement('div');
      parentPlayerDom.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed; z-index: 999;`);
    }
    const res = await cameraList({ deviceid });
    const cameras: [] = res.records || [];
    let cameraAddrs: any[] = [],
      cameraNames: string[] = [];
    if (cameras.length > 0) {
      cameras.forEach((item) => {
        if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
          cameraNames.push(item['name']);
        } else {
          cameraAddrs.push({ name: item['name'], addr: item['addr'] });
        }
      });
    }
    if (cameraNames.length > 0) {
      // 请求接口从装备院拿数据
      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames });
      for (let i = 0; i < addrs.length; i++) {
        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] });
      }
    }

    const obj = await deviceCameraInit(cameraAddrs, parentPlayerDom, webRtcServer);
    webRtcServer = obj.webRtcServerList;
    playerDoms = obj.playerDoms;
  }

  function deviceCameraInit(cameraAddrs, player: HTMLElement, webRtcServerList: any[] = []) {
    const playerDoms: (HTMLVideoElement | undefined | null)[] = [];
    const webRtcServer: any[] = [];
    let livePlayerDiv: HTMLElement | null = document.getElementById('LivePlayerBox');
    if (livePlayerDiv) {
      livePlayerDiv.remove();
      livePlayerDiv = null;
    }
    if (!livePlayerDiv) {
      const dom = document.createElement('div');
      dom.setAttribute('id', 'LivePlayerBox');
      livePlayerDiv = dom;
      player.appendChild(livePlayerDiv);
    }
    const videoParentDomList: (HTMLElement | [string, { name: string; addr: string }])[] = [];
    return new Promise((resolve) => {
      const playCamrea = () => {
        if (cameraAddrs.length > 0) {
          const promiseList: Promise<any>[] = [];
          cameraAddrs.forEach(async (cameraUrl: { name: string; addr: string }, index) => {
            const promise = new Promise(async (childResolve) => {
              let cameraNameDom: null | HTMLElement = null;
              console.log('摄像头地址--------->', cameraUrl, cameraUrl.addr.startsWith('rtsp://'), livePlayerDiv);
              if (cameraUrl.addr && cameraUrl.addr.startsWith('rtsp://')) {
                const server = webRtcServerList.shift();
                if (server) {
                  try {
                    const videoElement = server.videoElement as HTMLVideoElement;
                    videoElement.volume = 0;
                    const cameraNameDom = videoElement.parentElement?.getElementsByClassName('video-name')[0];
                    if (cameraNameDom) cameraNameDom.innerText = cameraUrl.name;
                    playerDoms.unshift(videoElement);
                    webRtcServer.unshift(server);
                    await server.connect(cameraUrl['addr']);
                    videoElement.play();
                    childResolve(null);
                  } catch (error) {
                    playerDoms.unshift(undefined);
                    childResolve(null);
                  }
                } else {
                  const videoParentDom: HTMLElement = document.createElement('div');
                  videoParentDom.setAttribute('class', 'video-parent');
                  const videoDom: HTMLVideoElement = document.createElement('video');
                  videoDom.volume = 0;
                  videoDom.setAttribute('class', 'rtspVideo');
                  videoDom.setAttribute('muted', 'muted');
                  videoDom.setAttribute('poster', '/src/assets/images/vent/noSinge.png');
                  videoDom.autoplay = true;
                  videoParentDom.appendChild(videoDom);
                  cameraNameDom = document.createElement('div');
                  cameraNameDom.setAttribute('class', 'video-name');
                  cameraNameDom.innerText = cameraUrl.name;
                  videoParentDom.appendChild(cameraNameDom);
                  videoParentDom.addEventListener('dblclick', () => {
                    if (videoDom.requestFullscreen) {
                      videoDom.requestFullscreen();
                      videoDom.play();
                    }
                  });

                  videoParentDomList.push(videoParentDom);

                  try {
                    const server = new window['WebRtcStreamer'](videoDom, location.protocol + VUE_APP_URL.webRtcUrl);
                    webRtcServer.unshift(server);
                    await server.connect(cameraUrl.addr);
                    videoDom.play();
                    playerDoms.unshift(videoDom);
                    childResolve(null);
                  } catch (error) {
                    console.log('WebRtcStreamer 抛出异常！！！！！！');
                    playerDoms.unshift(null);
                    childResolve(null);
                  }
                }
              } else {
                try {
                  fetch(cameraUrl.addr, {
                    method: 'get',
                    mode: 'no-cors',
                  })
                    .then(() => {
                      videoParentDomList.push(['player', cameraUrl]);
                      childResolve(null);
                    })
                    .catch(() => {
                      videoParentDomList.push(['onPlayer' + index, cameraUrl]);
                      childResolve(null);
                    });
                } catch (error) {
                  // console.log('可以捕获到异常吗？？？？？');
                  childResolve(null);
                }
              }
            });
            promiseList.push(promise);
          });
          Promise.all(promiseList).then(() => {
            resolve(null);
          });
        } else {
          resolve(null);
        }
      };
      playCamrea();
    }).then(() => {
      videoParentDomList.forEach((videoParentDom) => {
        if (typeof videoParentDom[0] === 'string' && livePlayerDiv) {
          const videoDom: HTMLElement = document.createElement('div');
          videoDom.setAttribute('class', 'liveVideo');
          livePlayerDiv?.appendChild(videoDom);
          useDrag(videoDom);

          if (videoParentDom[0].startsWith('onPlayer')) {
            render(
              h(LivePlayer, {
                class: 'player',
                id: videoParentDom[0],
                muted: 'muted',
                autoplay: true,
                live: true,
                videoUrl: videoParentDom[1].addr,
                videoTitle: videoParentDom[1].name,
                alt: '无信号',
                poster: '/src/assets/images/vent/noSinge.png',
              }),
              videoDom
            );
          } else {
            render(
              h(LivePlayer, {
                class: 'player',
                muted: 'muted',
                autoplay: true,
                live: true,
                videoUrl: videoParentDom[1].addr,
                videoTitle: videoParentDom[1].name,
                alt: '无信号',
                poster: '/src/assets/images/vent/noSinge.png',
              }),
              videoDom
            );
          }
        } else {
          useDrag(videoParentDom as HTMLElement);
          livePlayerDiv?.appendChild(videoParentDom as Node);
        }
      });

      const players = livePlayerDiv?.getElementsByClassName('player');
      if (players && players.length) {
        for (let i = 0; i < players.length; i++) {
          try {
            const isCanPlayer = !players[i].getAttribute('id')?.startsWith('onPlayer');
            const dom = players[i].getElementsByTagName('video')[0];
            if (dom && isCanPlayer) {
              playerDoms.unshift(dom);
            } else {
              playerDoms.unshift(null);
            }
          } catch (error) {
            console.log('可以捕获到异常吗？？？？？');
            playerDoms.unshift(null);
          }
        }
      }
      if (webRtcServerList.length > 0) {
        for (let i = 0; i < webRtcServerList.length; i++) {
          webRtcServerList[i].videoElement.parentElement.remove();
          webRtcServerList[i].disconnect();
          webRtcServerList[i] = undefined;
        }
      }
      return { webRtcServerList: webRtcServer, playerDoms };
    });
  }

  return {
    getCamera,
    webRtcServer,
    playerDoms,
    deviceCameraInit,
  };
}