视屏墙更新

src/views/vent/monitorManager/camera/index.vue

@@ -40,270 +40,306 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, ref, reactive, computed } 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';
+import { onMounted, onUnmounted, ref, reactive, computed } 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: '',
-  });
+//当前选中树节点
+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(4);
-  const current = ref(1);
-  const total = ref(0);
-  const playerList = ref([]);
-  const webRtcServerList = <any[]>[];
-  let addrList = ref<{ name: string; addr: string; cameraRate: number; devicekind: 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;
-    }
+I18N.use(ZH);
+let router = useRouter(); //路由
+const pageSize = ref(4);
+const current = ref(1);
+const total = ref(0);
+const playerList = ref([]);
+const webRtcServerList = <any[]>[];
+let addrList = ref<{ name: string; addr: string; cameraRate: number; devicekind: 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 types, devicetype;
-        if (node.itemValue.indexOf('&') != -1) {
-          types = node.itemValue.substring(node.itemValue.indexOf('&') + 1);
-          devicetype = node.itemValue.substring(0, node.itemValue.indexOf('&'));
-        } else {
-          types = '';
-          devicetype = '';
-        }
-        let res = await getDevice({ ids: types, devicetype: devicetype });
-        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();
-        getVideo();
+//点击目录
+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 types, devicetype;
+      if (node.itemValue.indexOf('&') != -1) {
+        types = node.itemValue.substring(node.itemValue.indexOf('&') + 1);
+        devicetype = node.itemValue.substring(0, node.itemValue.indexOf('&'));
       } else {
-        await getVideoAddrsSon(node.deviceID);
-        getVideo();
+        types = '';
+        devicetype = '';
       }
-    } else {
-      searchParam.devKind = '';
+      let res = await getDevice({ ids: types, devicetype: devicetype });
+      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();
       getVideo();
+    } else {
+      await getVideoAddrsSon(node.deviceID);
+      getVideo();
     }
+  } else {
+    searchParam.devKind = '';
+    searchParam.strType = '';
+    await getVideoAddrs();
+    getVideo();
   }
+}
 
-  //点击详情跳转
-  function onDetail(node) {
-    let str = listArr[0].children.filter((v) => v.id == node.pid)[0].itemValue;
-    let type = str.indexOf('&') != -1 ? str.substring(0, str.indexOf('&')) : '';
-    console.log(type, 'type--------');
-    switch (type) {
-      case 'pulping': //注浆
-        router.push('/grout-home');
-        break;
-      case 'window': //自动风窗
-        router.push('/monitorChannel/monitor-window?id=' + node.deviceID);
-        break;
-      case 'gate': //自动风门
-        router.push('/monitorChannel/monitor-gate?id=' + node.deviceID + '&deviceType=' + node.deviceType);
-        break;
-      case 'fanlocal': //局部风机
-        router.push('/monitorChannel/monitor-fanlocal?id=' + node.deviceID + '&deviceType=fanlocal');
-        break;
-      case 'fanmain': //主风机
-        router.push('/monitorChannel/monitor-fanmain?id=' + node.deviceID);
-        break;
-      case 'forcFan': //压风机
-        router.push('/forcFan/home');
-        break;
-      case 'pump': //瓦斯抽采泵
-        router.push('/monitorChannel/gasPump-home');
-        break;
-      case 'nitrogen': //制氮
-        router.push('/nitrogen-home');
-        break;
-    }
+//点击详情跳转
+function onDetail(node) {
+  let str = listArr[0].children.filter((v) => v.id == node.pid)[0].itemValue;
+  let type = str.indexOf('&') != -1 ? str.substring(0, str.indexOf('&')) : '';
+  console.log(type, 'type--------');
+  switch (type) {
+    case 'pulping': //注浆
+      router.push('/grout-home');
+      break;
+    case 'window': //自动风窗
+      router.push('/monitorChannel/monitor-window?id=' + node.deviceID);
+      break;
+    case 'gate': //自动风门
+      router.push('/monitorChannel/monitor-gate?id=' + node.deviceID + '&deviceType=' + node.deviceType);
+      break;
+    case 'fanlocal': //局部风机
+      router.push('/monitorChannel/monitor-fanlocal?id=' + node.deviceID + '&deviceType=fanlocal');
+      break;
+    case 'fanmain': //主风机
+      router.push('/monitorChannel/monitor-fanmain?id=' + node.deviceID);
+      break;
+    case 'forcFan': //压风机
+      router.push('/forcFan/home');
+      break;
+    case 'pump': //瓦斯抽采泵
+      router.push('/monitorChannel/gasPump-home');
+      break;
+    case 'nitrogen': //制氮
+      router.push('/nitrogen-home');
+      break;
   }
+}
 
-  async function getVideoAddrs() {
-    clearCamera();
-    playerList.value = [];
-    let paramKind = searchParam.devKind.substring(0, searchParam.devKind.indexOf('&'));
-    let res = await list({ devKind: paramKind, strType: searchParam.strType, pageSize: pageSize.value, pageNo: current.value });
-    total.value = res['total'] || 0;
-    if (res.records.length != 0) {
-      const cameraList = <{ name: string; addr: string; cameraRate: number; devicekind: string }[]>[];
-      const cameras = res.records;
-      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:'YZG_URL', cameraCode: item['addr'], videoType });
-            if (data && data['url']) {
-              cameraList.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
-            }
-            // 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);
+async function getVideoAddrs() {
+  clearCamera();
+  playerList.value = [];
+  let paramKind = searchParam.devKind.substring(0, searchParam.devKind.indexOf('&'));
+  let res = await list({ devKind: paramKind, strType: searchParam.strType, pageSize: pageSize.value, pageNo: current.value });
+  total.value = res['total'] || 0;
+  if (res.records.length != 0) {
+    const cameraList = <{ name: string; addr: string; cameraRate: number; devicekind: string }[]>[];
+    const cameras = res.records;
+    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' : '';
+        const devicekindType = item['devicekind'] === 'YZG_URL' ? 'YZG_URL' : ''
+        try {
+          const data = await cameraAddr({ devicekind: devicekindType, cameraCode: item['addr'], videoType });
+          if (data && data['url']) {
+            cameraList.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
           }
-          cameraList.push({ name: item['name'], addr: item['addr'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
+          // 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'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
       }
-      addrList.value = cameraList;
-      console.log(addrList.value, ' addrList.value-------------');
     }
+    addrList.value = cameraList;
+    console.log(addrList.value, ' addrList.value-------------');
   }
+}
 
-  async function getVideoAddrsSon(Id) {
-    clearCamera();
-    playerList.value = [];
-    let res = await getVentanalyCamera({ deviceid: Id });
-    if (res.records.length != 0) {
-      const cameraList = <{ name: string; addr: string; cameraRate: number; devicekind: string }[]>[];
-      const cameras = res.records;
-      for (let i = 0; i < cameras.length; i++) {
-        const item = cameras[i];
+async function getVideoAddrsSon(Id) {
+  clearCamera();
+  playerList.value = [];
+  let res = await getVentanalyCamera({ deviceid: Id });
+  if (res.records.length != 0) {
+    const cameraList = <{ name: string; addr: string; cameraRate: number; devicekind: string }[]>[];
+    const cameras = res.records;
+    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:'YZG_URL', cameraCode: item['addr'], videoType });
-            if (data && data['url']) {
-              cameraList.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
-            }
-            // 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);
+      if (item['devicekind'] === 'toHKRtsp' || item['devicekind'] === 'toHKHLs' || item['devicekind'] === 'HLL' || item['devicekind'] === 'YZG_URL') {
+        // 从海康平台接口获取视频流
+        const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
+        const devicekindType = item['devicekind'] === 'YZG_URL' ? 'YZG_URL' : ''
+        try {
+          const data = await cameraAddr({ devicekind: devicekindType, cameraCode: item['addr'], videoType });
+          if (data && data['url']) {
+            cameraList.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
           }
-          cameraList.push({ name: item['name'], addr: item['addr'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
+          // 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'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
       }
-      addrList.value = cameraList;
     }
+    addrList.value = cameraList;
   }
+}
 
-  async function onChange(page) {
-    current.value = page;
-    await getVideoAddrs();
-    getVideo();
-  }
+async function onChange(page) {
+  current.value = page;
+  await getVideoAddrs();
+  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, item.cameraRate, item.devicekind);
-      }
+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, item.cameraRate, item.devicekind);
     }
   }
+}
 
-  function setNoRtspVideo(id, videoAddr, cameraRate, devicekind) {
-    const fileExtension = videoAddr.split('.').pop();
-    if (fileExtension === 'flv' || devicekind == 'flv') {
-      const player = new Player({
+function setNoRtspVideo(id, videoAddr, cameraRate, devicekind) {
+  const fileExtension = videoAddr.split('.').pop();
+  if (fileExtension === 'flv' || devicekind == 'flv') {
+    const player = new Player({
+      lang: 'zh',
+      id: id,
+      url: videoAddr,
+      width: 589,
+      height: 330,
+      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,
+      },
+      defaultPlaybackRate: cameraRate || 1,
+      controls: 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' || devicekind == 'm3u8') {
+    let player;
+    if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
+      // 原生支持 hls 播放
+      player = new Player({
         lang: 'zh',
         id: id,
         url: videoAddr,
         width: 589,
         height: 330,
-        poster: '/src/assets/images/vent/noSinge.png',
-        plugins: [FlvPlugin],
-        fluid: true,
-        autoplay: true,
         isLive: true,
-        playsinline: true,
-        screenShot: true,
-        whitelist: [''],
+        autoplay: true,
+        autoplayMuted: true,
+        cors: true,
         ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
-        closeVideoClick: true,
-        customConfig: {
-          isClickPlayBack: false,
-        },
+        poster: '/src/assets/images/vent/noSinge.png',
         defaultPlaybackRate: cameraRate || 1,
         controls: false,
-        flv: {
+        hls: {
           retryCount: 3, // 重试 3 次，默认值
           retryDelay: 1000, // 每次重试间隔 1 秒，默认值
           loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
@@ -317,228 +353,194 @@
           maxJumpDistance: 10,
         },
       });
-      playerList.value.push(player);
-    }
-    if (fileExtension === 'm3u8' || devicekind == 'm3u8') {
-      let player;
-      if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
-        // 原生支持 hls 播放
-        player = new Player({
-          lang: 'zh',
-          id: id,
-          url: videoAddr,
-          width: 589,
-          height: 330,
-          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,
-          controls: false,
-          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: 589,
-          height: 330,
-          isLive: true,
-          autoplay: true,
-          autoplayMuted: true,
-          plugins: [HlsPlugin], // 第二步
-          poster: '/src/assets/images/vent/noSinge.png',
-          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
-          defaultPlaybackRate: cameraRate || 1,
-          controls: false,
-          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: 589,
+        height: 330,
+        isLive: true,
+        autoplay: true,
+        autoplayMuted: true,
+        plugins: [HlsPlugin], // 第二步
+        poster: '/src/assets/images/vent/noSinge.png',
+        ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+        defaultPlaybackRate: cameraRate || 1,
+        controls: false,
+        hls: {
+          retryCount: 3, // 重试 3 次，默认值
+          retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+          loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+          fetchOptions: {
+            // 该参数会透传给 fetch，默认值为 undefined
+            mode: 'cors',
           },
-        });
-      }
-      playerList.value.push(player);
+          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 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++) {
-      if (webRtcServerList[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();
+function clearCamera() {
+  const num = webRtcServerList.length;
+  for (let i = 0; i < num; i++) {
+    if (webRtcServerList[i]) {
+      webRtcServerList[i].disconnect();
+      webRtcServerList[i] = null;
     }
-    playerList.value = [];
   }
+  for (let i = 0; i < playerList.value.length; i++) {
+    const player = playerList.value[i];
+    if (player.destroy) player.destroy();
+  }
+  playerList.value = [];
+}
 
-  onMounted(async () => {
-    await getCameraDevKindList();
-    await getVideoAddrs();
-    getVideo();
-  });
+onMounted(async () => {
+  await getCameraDevKindList();
+  await getVideoAddrs();
+  getVideo();
+});
 
-  onUnmounted(() => {
-    clearCamera();
-  });
+onUnmounted(() => {
+  clearCamera();
+});
 </script>
 <style lang="less">
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  @{theme-deepblue} {
-    .camera-container {
-      --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
-    }
+@{theme-deepblue} {
+  .camera-container {
+    --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
   }
+}
 
-  .camera-container {
-    --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
-    position: relative;
-    width: calc(100% - 30px);
-    height: calc(100% - 84px);
-    display: flex;
-    margin: 15px;
-    justify-content: space-between;
-    align-items: center;
+.camera-container {
+  --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
+  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;
+  .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;
-      }
+    // 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 {
-        width: 100%;
-        height: calc(100% - 60px);
-        display: flex;
-        justify-content: space-around;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        overflow-y: auto;
-      }
+  .right-area {
+    width: 85%;
+    height: 100%;
+    padding: 0px 0px 0px 15px;
+    box-sizing: border-box;
 
-      .camera-box1 {
-        width: 100%;
-        height: calc(100% - 60px);
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        overflow-y: auto;
-      }
+    .camera-box {
+      width: 100%;
+      height: calc(100% - 60px);
+      display: flex;
+      justify-content: space-around;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      overflow-y: auto;
+    }
 
-      .player-box {
-        width: 626px;
-        height: 370px;
-        padding: 17px 18px;
-        background: var(--image-camera_bg);
-        background-size: 100% 100%;
-        position: relative;
-        margin: 10px;
+    .camera-box1 {
+      width: 100%;
+      height: calc(100% - 60px);
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      overflow-y: auto;
+    }
 
-        .player-name {
-          font-size: 14px;
-          position: absolute;
-          top: 35px;
-          right: 15px;
-          color: #fff;
-          background-color: hsla(0, 0%, 50%, 0.5);
-          border-radius: 2px;
-          padding: 1px 5px;
-          max-width: 120px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          z-index: 999;
-        }
+    .player-box {
+      width: 626px;
+      height: 370px;
+      padding: 17px 18px;
+      background: var(--image-camera_bg);
+      background-size: 100% 100%;
+      position: relative;
+      margin: 10px;
 
-        .click-box {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-        }
+      .player-name {
+        font-size: 14px;
+        position: absolute;
+        top: 35px;
+        right: 15px;
+        color: #fff;
+        background-color: hsla(0, 0%, 50%, 0.5);
+        border-radius: 2px;
+        padding: 1px 5px;
+        max-width: 120px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        z-index: 999;
       }
 
-      .pagination {
+      .click-box {
+        position: absolute;
         width: 100%;
-        height: 60px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        height: 100%;
+        top: 0;
+        left: 0;
       }
     }
-  }
 
-  :deep(video) {
-    width: 100% !important;
-    height: 100% !important;
-    object-fit: cover !important;
+    .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>