mky-vent-base/src/utils/ventutil.ts

import { render, h, nextTick } from 'vue';
import LivePlayer from '@liveqing/liveplayer-v3';

export function toEchartsData(list, option) {
  option.legend['data'] = [];
  option.yAxis.length = list.length;
  option.yAxis.series = list.length;
  list.forEach((item: any, index) => {
    option.legend['data'].push(`${item['legend']}(${item['unit']})`);
    const yAxiObj = {
      type: 'value',
      position: item['yaxispos'],
      axisLabel: { formatter: `{value} ${item['unit']}` },
    };
    const serieObj = {
      name: `${item['legend']}(${item['unit']})`,
      type: item['linetype'],
      yAxisIndex: item['sort'],
    };
    if (!option.yAxis[index]) {
      option.yAxis[index] = yAxiObj;
    } else {
      Object.assign(option.yAxis[index], yAxiObj);
    }
    if (!option.series[index]) {
      option.series[index] = serieObj;
    } else {
      Object.assign(option.series[index], serieObj);
    }
  });
  return option;
}

export function formatNum(data) {
  return new Intl.NumberFormat('ja-JP', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(data);
}

export function cameraInit(dom, rtspUrl) {
  let webRtcServer = undefined;
  const ip = VUE_APP_URL.webRtcUrl;
  // const ip = '//192.168.183.216:8000';
  webRtcServer = new window['WebRtcStreamer'](dom, location.protocol + ip);

  if (webRtcServer) webRtcServer.connect(rtspUrl);
  return { webRtcServer };
}

// 模型监测加载视频
export 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') {
        const videoDom: HTMLElement = document.createElement('div');
        livePlayerDiv?.appendChild(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 {
        player.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 };
  });
}