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';
import videojs from 'video.js';
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?, isCustom = false) {
    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 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' ||
          item['devicekind'] === 'HLL' ||
          item['devicekind'] === 'YZG_URL'
        ) {
          // 从海康平台接口获取视频流
          const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
          try {
            const data = await cameraAddr({ devicekind: item['devicekind'], 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] });
      }
    }
    if (isCustom) {
      return cameraAddrs;
    } else {
      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');
      dom.setAttribute('class', 'live-player-box');
      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);

          if (videoParent[1] && videoParent[1].addr) {
            let player;
            const fileExtension = videoParent[1].addr.split('.').pop();
            // const player = getPlayer(fileExtension, videoParent[0], videoParent[1].devicekind, videoParent[1].addr, videoParent[1].cameraRate);
            if (fileExtension === 'flv' || videoParent[1].devicekind == 'flv') {
              const videoDom: HTMLElement = document.createElement('div');
              videoDom.setAttribute('id', videoParent[0]);
              videoDom.style = 'width: 100%; height: 100%;';
              videoParentDom.appendChild(videoDom);
              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,
                },
              });
            } else {
              const videoDom: HTMLElement = document.createElement('video');
              videoDom.setAttribute('id', videoParent[0]);
              videoDom.style = 'width: 100%; height: 100%;';
              videoParentDom.appendChild(videoDom);
              player = videojs(
                videoParent[0],
                {
                  controls: false,
                  autoplay: true,
                  preload: 'auto',
                  muted: true,
                  // src: cameraUrl,
                  sources: [
                    {
                      src: videoParent[1].addr,
                      type: 'application/x-mpegURL',
                    },
                  ],
                },
                () => {
                  videojs.log('播放器准备好了!');
                  // this.play();
                }
              );
              player.play();
            }
            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 getPlayer(fileExtension, playerDomId, camerakind, cameraUrl, cameraRate, option = { width: '100%', height: '100%' }) {
    let player;
    if (fileExtension === 'flv' || camerakind == 'flv') {
      player = new Player({
        lang: 'zh',
        id: playerDomId,
        url: cameraUrl,
        width: option.width,
        height: option.height,
        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: 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' || camerakind == 'm3u8') {
      if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
        // 原生支持 hls 播放
        player = new Player({
          lang: 'zh',
          id: playerDomId,
          url: cameraUrl,
          width: option.width,
          height: option.height,
          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,
          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: playerDomId,
          url: cameraUrl,
          width: option.width,
          height: option.height,
          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: 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,
          },
        });
      }
    }
    return player;
  }

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

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