admin-vben5/apps/web-antd/src/views/sis/acAdmin/index.vue

<template>
  <Page :auto-content-height="true">
    <div class="flex h-full gap-[8px]">
      <DpTree class="h-[87vh] w-[300px]" @checked="onNodeChecked" />
      <div class="bg-background flex-1">
        <div class="video-play-area flex h-full flex-wrap">
          <div
            v-for="i in playerNum"
            :style="playerStyle"
            class="player"
            :class="`layer-${i} ${currentSelectPlayerIndex == i ? selected : ''}`"
            @click="playerSelect(i)"
          >
            <video
              style="width: 100%; height: 100%"
              :ref="setItemRef"
              muted
              autoplay
            ></video>
          </div>
        </div>
      </div>
    </div>
  </Page>
</template>

<script setup lang="ts">
import DpTree from './dp-tree.vue';
import { Page } from '@vben/common-ui';
import { ref } from 'vue';
import mpegts from 'mpegts.js';
import { addStreamProxy } from '#/api/sis/stream';
import { message } from 'ant-design-vue';

/**
 * 屏幕播放器数量
 */
const selected = 'selected';
const playerNum = ref(4);
/**
 * 屏幕播放器样式
 */
const playerStyle = ref({
  width: '50%',
  height: '50%',
});
const currentSelectPlayerIndex = ref(-1);

function playerSelect(index: number) {
  if (index === currentSelectPlayerIndex.value) {
    currentSelectPlayerIndex.value = -1;
    return;
  }
  currentSelectPlayerIndex.value = index;
}

const itemRefs = ref<HTMLVideoElement[]>([]);
const setItemRef = (el: any) => {
  if (el) {
    itemRefs.value.push(el);
  }
};

function onNodeChecked(checked, nodes: any[]) {
  if (checked) {
    console.log(nodes);
    nodes.forEach((node: any) => {
      const { data, level } = node;
      // 只播放视频节点
      if (level == 6) {
        const index =
          currentSelectPlayerIndex.value === -1
            ? 0
            : currentSelectPlayerIndex.value;
        doPlayer(data, index);
      }
    });
  } else {

  }
}

// 播放器数据, 每一个位置代表页面上行的一个矩形
const playerList: any[] = [];

/**
 * 开始播放视频流
 * @param nodeData 播放的节点数据
 * @param index 播放器的索引信息
 */
function doPlayer(nodeData: any, index: number = 0) {
  console.log('index=', index);
  if (mpegts.isSupported()) {
    const params = {
      videoIp: nodeData.deviceIp,
      videoPort: 554,
      factoryNo: nodeData.factoryNo,
      account: nodeData.deviceAccount,
      pwd: nodeData.devicePwd,
      channelId: nodeData.channelNo ? nodeData.channelNo : 101,
    };
    // }
    addStreamProxy(params).then((res) => {
      const url = res.wsFlv;
      // 将url 绑定到 nodeData
      nodeData.url = url;
      closePlayer(index);
      const videoConfig = {
        type: 'flv',
        url: url,
        isLive: true,
        hasAudio: false,
        hasVideo: true,
        enableWorker: true, // 启用分离的线程进行转码
        enableStashBuffer: false, // 关闭IO隐藏缓冲区
        stashInitialSize: 256, // 减少首帧显示等待时长
      };
      const playerConfig = {
        enableErrorRecover: true, // 启用错误恢复
        autoCleanupMaxBackwardDuration: 30,
        autoCleanupMinBackwardDuration: 10,
      };
      const player = mpegts.createPlayer(videoConfig, playerConfig);
      const videoElement = itemRefs.value[index];
      if (videoElement) {
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
        playerList[index] = {
          player,
          data: nodeData,
        };
      } else {
        console.log('视频播放元素获取异常');
      }
    });
  } else {
    message.error('浏览器不支持播放');
  }
}

function changeElPlayer(playerInfo: any, index: number) {
  const playerData = playerInfo.data;
  const oldPlayer = playerInfo.player;
  if (oldPlayer) {
    closePlayVieo(oldPlayer);
  }
  const videoConfig = {
    type: 'flv',
    url: playerData.url,
    isLive: true,
    hasAudio: false,
    hasVideo: true,
    enableWorker: true, // 启用分离的线程进行转码
    enableStashBuffer: false, // 关闭IO隐藏缓冲区
    stashInitialSize: 256, // 减少首帧显示等待时长
  };
  const playerConfig = {
    enableErrorRecover: true, // 启用错误恢复
    autoCleanupMaxBackwardDuration: 30,
    autoCleanupMinBackwardDuration: 10,
  };
  const player = mpegts.createPlayer(videoConfig, playerConfig);
  const videoElement = itemRefs.value[index];
  if (videoElement) {
    player.attachMediaElement(videoElement);
    player.load();
    player.play();
    playerList[index] = {
      player,
      data: playerData,
    };
  } else {
    console.log('视频播放元素获取异常');
  }
}

function closePlayVieo(plInfo: any) {
  if (plInfo) {
    try {
      plInfo.pause(); // 暂停
      plInfo.unload(); // 卸载
      plInfo.destroy(); // 销毁
    } catch (e) {
      console.log('播放器关闭失败，e=', e);
    }
  }
}

function closePlayer(index: number) {
  // 如果播放器存在，尝试关闭
  const pData = playerList[index];
  if (pData) {
    try {
      const player = pData.player;
      player.pause(); // 暂停
      player.unload(); // 卸载
      player.destroy(); // 销毁
      playerList[index] = null;
    } catch (e) {
      console.log('播放器关闭失败，e=', e);
    }
  }
}
</script>
<style>
.player {
  border: 1px solid #e4e4e7;
  cursor: pointer;

  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}

.player.selected {
  border: 2px solid deepskyblue;
}
</style>