增加门禁可视化页面
This commit is contained in:
223
apps/web-antd/src/views/sis/acAdmin/index.vue
Normal file
223
apps/web-antd/src/views/sis/acAdmin/index.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<div class="flex h-full gap-[8px]">
|
||||
<DpTree class="h-[87vh] w-[300px]" @check="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(nodes: any[]) {
|
||||
console.log(nodes);
|
||||
}
|
||||
|
||||
// 播放器数据, 每一个位置代表页面上行的一个矩形
|
||||
const playerList: any[] = [];
|
||||
|
||||
|
||||
/**
|
||||
* 开始播放视频流
|
||||
* @param nodeData 播放的节点数据
|
||||
* @param index 播放器的索引信息
|
||||
*/
|
||||
function doPlayer(nodeData: any, index: number = 0) {
|
||||
console.log('index=', index);
|
||||
if (mpegts.isSupported()) {
|
||||
let params = {};
|
||||
// if (nodeData.nvrIp) {
|
||||
// params = {
|
||||
// videoIp: nodeData.nvrIp,
|
||||
// videoPort: nodeData.nvrPort,
|
||||
// factoryNo: nodeData.nvrFactoryNo,
|
||||
// account: nodeData.nvrAccount,
|
||||
// pwd: nodeData.nvrPwd,
|
||||
// channelId: nodeData.nvrChannelNo,
|
||||
// };
|
||||
// } else {
|
||||
params = {
|
||||
videoIp: nodeData.deviceIp,
|
||||
videoPort: nodeData.devicePort,
|
||||
factoryNo: nodeData.factoryNo,
|
||||
account: nodeData.deviceAccount,
|
||||
pwd: nodeData.devicePwd,
|
||||
channelId: nodeData.channelNo,
|
||||
};
|
||||
// }
|
||||
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>
|
||||
Reference in New Issue
Block a user