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';
import Player, { I18N } from 'xgplayer';
import HlsPlugin from 'xgplayer-hls';
import FlvPlugin from 'xgplayer-flv';
import 'xgplayer/dist/index.min.css';
import ZH from 'xgplayer/es/lang/zh-cn';
I18N.use(ZH);

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

  let webRtcServer = <any[]>[];
  const playerList = <any[]>[];
  const playerDoms = <(HTMLVideoElement | undefined | null)[]>[];
  const videoParentDomList: (HTMLElement | [string, { name: string; addr: string; cameraRate: number; devicekind: string }])[] = [];

  async function getCamera(deviceid, parentPlayerDom?, devKind?) {
    removeCamera();
    if (!parentPlayerDom) {
      parentPlayerDom = document.createElement('div');
      parentPlayerDom.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed; z-index: 999;`);
    }
    let res;
    if (!devKind) {
      res = await cameraList({ deviceid });
    } else {
      res = await cameraList({ sysId: deviceid, devKind });
    }
    const cameras: [] = res.records || [];
    // const cameras: [] = [
    //   {
    //     name: '1111',
    //     devicekind: 'toHKRtsp',
    //   },
    //   {
    //     name: '2222',
    //     devicekind: 'toHKRtsp',
    //   },
    //   // {
    //   //   name: '3333',
    //   //   devicekind: 'toHKRtsp',
    //   // },
    //   // {
    //   //   name: '4444',
    //   //   devicekind: 'toHKRtsp',
    //   // },
    // ];
    const cameraAddrs: any[] = [],
      cameraNames: any[] = [];
    if (cameras.length > 0) {
      for (let i = 0; i < cameras.length; i++) {
        const item = cameras[i];
        if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs') {
          // 从海康平台接口获取视频流
          const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';

          try {
            const data = await cameraAddr({ cameraCode: item['addr'], videoType });
            if (data && data['url']) {
              cameraAddrs.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
            }
            // // 从海康平台接口获取视频流测试
            // cameraAddrs.push({
            //   name: item['name'],
            //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
            // });
          } catch (error) {}
        } else if (item['devicekind'] == 'toHKR') {
          cameraNames.push({ name: item['name'], cameraRate: item['cameraRate'] });
        } else {
          cameraAddrs.push({ name: item['name'], addr: item['addr'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
        }
      }
    }
    if (cameraNames.length > 0) {
      // 请求接口从装备院拿数据
      const cameraNameList = cameraNames.map((item) => item.name);

      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNameList });
      for (let i = 0; i < addrs.length; i++) {
        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] });
      }
    }
    await deviceCameraInit(cameraAddrs, parentPlayerDom);
  }

  function deviceCameraInit(cameraAddrs, player: HTMLElement) {
    const newWebRtcServer = [];
    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);
    }

    return new Promise((resolve) => {
      const playCamrea = () => {
        if (cameraAddrs.length > 0) {
          const promiseList: Promise<any>[] = [];
          debugger;
          cameraAddrs.forEach(async (cameraUrl: { name: string; addr: string; cameraRate: number; devicekind: string }, index) => {
            const promise = new Promise(async (childResolve) => {
              let cameraNameDom: null | HTMLElement = null;
              console.log('摄像头地址--------->', cameraUrl, cameraUrl.addr.startsWith('rtsp://'), livePlayerDiv);
              if (cameraUrl.addr.includes('0.0.0.0')) {
                cameraUrl.addr = cameraUrl.addr.replace('0.0.0.0', window.location.hostname);
              }
              if (cameraUrl.addr && cameraUrl.addr.startsWith('rtsp://')) {
                const server = webRtcServer?.shift();
                let videoDom: HTMLVideoElement | null = null;
                if (server) {
                  try {
                    videoDom = server.videoElement as HTMLVideoElement;
                    videoDom.volume = 0;
                    const cameraNameDom = videoDom.parentElement?.getElementsByClassName('video-name')[0];
                    if (cameraNameDom) cameraNameDom.innerText = cameraUrl.name;
                    playerDoms.unshift(videoDom);
                    newWebRtcServer.unshift(server);
                    // videoParentDomList.unshift()
                    await server.connect(cameraUrl['addr']);
                    videoDom.play();
                    childResolve(null);
                  } catch (error) {
                    playerDoms.unshift(undefined);
                    childResolve(null);
                  }
                } else {
                  videoDom = 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;

                  try {
                    const server = new window['WebRtcStreamer'](
                      videoDom,
                      VUE_APP_URL.webRtcUrl.startsWith('/') ? location.protocol + VUE_APP_URL.webRtcUrl : VUE_APP_URL.webRtcUrl
                    );
                    newWebRtcServer.unshift(server);
                    await server.connect(cameraUrl.addr);
                    videoDom.play();
                    playerDoms.unshift(videoDom);
                    childResolve(null);
                  } catch (error) {
                    console.log('WebRtcStreamer 抛出异常！！！！！！');
                    playerDoms.unshift(null);
                    childResolve(null);
                  }
                }
                if (videoDom) {
                  const videoParentDom: HTMLElement = document.createElement('div');
                  videoParentDom.setAttribute('class', 'video-parent');
                  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);
                }
              } else {
                videoParentDomList.push(['player' + index, cameraUrl]);
                childResolve(null);
              }
            });
            promiseList.push(promise);
          });
          Promise.all(promiseList).then(() => {
            resolve(null);
          });
        } else {
          resolve(null);
        }
      };
      playCamrea();
    }).then(() => {
      videoParentDomList.forEach((videoParent) => {
        if (typeof videoParent[0] === 'string' && livePlayerDiv) {
          const videoParentDom: HTMLElement = document.createElement('div');
          videoParentDom.setAttribute('class', 'liveVideo');
          livePlayerDiv?.appendChild(videoParentDom);
          useDrag(videoParentDom);
          const videoDom: HTMLElement = document.createElement('div');
          videoDom.setAttribute('id', videoParent[0]);
          videoParentDom.appendChild(videoDom);
          if (videoParent[1] && videoParent[1].addr) {
            const fileExtension = videoParent[1].addr.split('.').pop();
            let player;
            if (fileExtension === 'flv' || videoParent[1].devicekind == 'flv') {
              player = new Player({
                lang: 'zh',
                id: videoParent[0],
                url: videoParent[1].addr,
                width: 294,
                height: 188,
                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,
                },
                controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
                defaultPlaybackRate: videoParent[1].cameraRate || 1,
                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.push(player);
            }
            if (fileExtension === 'm3u8' || videoParent[1].devicekind == 'm3u8') {
              let player;
              if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
                // 原生支持 hls 播放
                player = new Player({
                  lang: 'zh',
                  id: videoParent[0],
                  url: videoParent[1].addr,
                  width: 294,
                  height: 188,
                  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: videoParent[1].cameraRate || 1,
                  controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
                  hls: {
                    retryCount: 10, // 重试 3 次，默认值
                    retryDelay: 30000, // 每次重试间隔 1 秒，默认值
                    loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
                    disconnectTime: 30, //直播断流时间，
                    fetchOptions: {
                      // 该参数会透传给 fetch，默认值为 undefined
                      mode: 'cors',
                    },
                    targetLatency: 10, // 直播目标延迟，默认 10 秒
                    maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
                    maxJumpDistance: 10,
                  },
                });
              } else if (HlsPlugin.isSupported()) {
                // 第一步
                player = new Player({
                  lang: 'zh',
                  id: videoParent[0],
                  url: videoParent[1].addr,
                  width: 294,
                  height: 188,
                  isLive: true,
                  autoplay: true,
                  autoplayMuted: true,
                  ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
                  plugins: [HlsPlugin], // 第二步
                  poster: '/src/assets/images/vent/noSinge.png',
                  defaultPlaybackRate: videoParent[1].cameraRate || 1,
                  controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
                  hls: {
                    retryCount: 10, // 重试 3 次，默认值
                    retryDelay: 30000, // 每次重试间隔 1 秒，默认值
                    loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
                    disconnectTime: 30,
                    fetchOptions: {
                      // 该参数会透传给 fetch，默认值为 undefined
                      mode: 'cors',
                    },
                    targetLatency: 10, // 直播目标延迟，默认 10 秒
                    maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
                    maxJumpDistance: 10,
                  },
                });
              }
              playerList.push(player);
            }
            playerList.push(player);
          }
        } else {
          useDrag(videoParent as HTMLElement);
          livePlayerDiv?.appendChild(videoParent 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 (webRtcServer.length > 0) {
        for (let i = 0; i < webRtcServer.length; i++) {
          webRtcServer[i].videoElement.parentElement.remove();
          webRtcServer[i].disconnect();
          webRtcServer[i] = undefined;
        }
      }
      webRtcServer.length = 0;
      webRtcServer = newWebRtcServer;
    });
  }

  function removeCamera() {
    if (webRtcServer.length > 0) {
      webRtcServer.forEach((item) => {
        item.disconnect();
      });
      webRtcServer = [];
    }
    playerDoms.forEach((dom) => {
      dom?.remove();
    });
    playerList.forEach((player) => {
      if (player && player.destroy) player.destroy();
      player = null;
    });
    videoParentDomList.length = 0;
    playerDoms.length = 0;
    playerList.length = 0;
  }

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