by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加视频回放界面

Browse Source
This commit is contained in:
15683799673
2025-09-08 01:43:41 +08:00
parent ba6e865219
commit e1917e9540
5 changed files with 449 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
apps/web-antd/src/views/sis/video/channel-tree.vue → apps/web-antd/src/views/sis/video/playback/channel-tree.vue
View File

0
apps/web-antd/src/views/sis/video/data.ts → apps/web-antd/src/views/sis/video/playback/data.ts
View File

112
apps/web-antd/src/views/sis/video/index.vue → apps/web-antd/src/views/sis/video/playback/index.vue
View File

@@ -14,7 +14,7 @@
<!-- 设备分组区域 -->
<div class="bg-background flex-1">
<div class="video-play-area flex h-[calc(100%-30px)] flex-wrap">
<div class="video-play-area flex h-[calc(100%-80px)] flex-wrap">
<div
v-for="i in playerNum"
:style="playerStyle"
@@ -36,26 +36,41 @@
</Loading>
</div>
</div>
<div class="player-area flex h-[30px] gap-[5px]">
<div
v-for="key in 4"
@click="onPlayerNumChanged(key)"
:class="playerSelectItemIndex == key ? selected : ''"
class="btn-item h-[20px] w-[20px]"
>
<Svg1FrameIcon v-if="key == 1" style="width: 100%; height: 100%" />
<Svg4FrameIcon
v-else-if="key == 2"
style="width: 100%; height: 100%"
/>
<Svg9FrameIcon
v-else-if="key == 3"
style="width: 100%; height: 100%"
/>
<Svg16FrameIcon
v-else-if="key == 4"
style="width: 100%; height: 100%"
/>
<div class="player-area h-[80px]">
<div class="process-wrap w-full">
<Process :init-date="processDate"></Process>
</div>
<!-- 视频回放操作栏 -->
<div class="play-option flex h-[40px] w-full gap-10">
<div class="left flex-1"></div>
<div class="mid flex flex-1 items-center content-center gap-5">
<div class="playing-time h-full w-[120px] flex items-center">
<DatePicker v-model:value="playDate" :allow-clear="false" />
</div>
<div class="playing" @click="onPlayerBtnClick">
<span v-if="playering">
<a-button type="primary" shape="circle" size="middle">
<template #icon>
<CaretRightOutlined />
</template>
</a-button>
</span>
<span v-else>
<a-button
style="background: darkgray"
type="primary"
shape="circle"
size="middle"
>
<template #icon>
<PauseCircleOutlined />
</template>
</a-button>
</span>
</div>
</div>
<div class="right flex-1"></div>
</div>
</div>
</div>
@@ -67,17 +82,15 @@
import { onMounted, onUnmounted, ref, toRaw } from 'vue';
import { Loading, Page } from '@vben/common-ui';
import ChannelTree from './channel-tree.vue';
import Process from './process.vue';
import mpegts from 'mpegts.js';
import { message } from 'ant-design-vue';
import { DatePicker, message } from 'ant-design-vue';
import { addStreamProxy } from '#/api/sis/stream';
import {
Svg16FrameIcon,
Svg1FrameIcon,
Svg4FrameIcon,
Svg9FrameIcon,
} from '@vben/icons';
import { checkHEVCSupport } from '#/utils/video';
import type { AddStreamProxyResult } from '#/api/sis/stream/model';
import { CaretRightOutlined, PauseCircleOutlined } from '@ant-design/icons-vue';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
const selected = 'selected';
@@ -107,12 +120,18 @@ const currentSelectPlayerIndex = ref(0);
const playerList: any[] = [];
// 播放器loading
const playerLoading = ref<boolean[]>([]);
// 当前选择播放器的key
const currentSelectKey = ref('');
// 当前所有的播放设备key
const selectKeys = ref<string[]>([]);
const playering = ref<boolean>(true);
const playDate = ref<Dayjs>();
function onPlayerBtnClick() {
playering.value = !playering.value;
}
function playerSelect(index: number) {
currentSelectPlayerIndex.value = index;
const player = playerList[index];
@@ -435,11 +454,20 @@ function loading(index: number, cmd: Number = 0) {
playerLoading.value = loadinArr;
}
const processDate = ref('');
let isSupportH265 = false;
onMounted(() => {
// 检测浏览器是否支持h265
isSupportH265 = checkHEVCSupport();
setInterval(catchUp, 120000);
// setInterval(catchUp, 120000);
// 初始化当前日期
const now = dayjs();
playDate.value = now;
processDate.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
setInterval(() => {
processDate.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
}, 1000);
});
onUnmounted(() => {
@@ -447,20 +475,6 @@ onUnmounted(() => {
closePlayer(i);
}
});
function catchUp() {
playerList.forEach((playerData) => {
if (playerData) {
const { player, el } = playerData;
const end = player.buffered.end(player.buffered.length - 1);
const diff = end - el.currentTime;
if (diff > 2) {
// 如果延迟超过2秒
el.currentTime = end - 0.5; // 跳转到接近直播点
}
}
});
}
</script>
<style scoped>
@@ -484,12 +498,10 @@ function catchUp() {
}
.player-area {
display: flex;
align-items: center;
cursor: pointer;
.btn-item.selected {
color: #00a8ff;
.play-option {
background-color: #606060;
}
}
</style>

386
apps/web-antd/src/views/sis/video/playback/process.vue Normal file
View File

@@ -0,0 +1,386 @@
<template>
<div class="playbackbar" ref="playbackbarRef">
<canvas ref="playbackbarCanvasRef"></canvas>
</div>
</template>
<script setup lang="js">
import { ref, reactive, watch, onMounted, onBeforeUnmount, computed } from 'vue';
import dayjs from 'dayjs';
// 1. 定义 Props（Vue3 中使用 defineProps 声明）
const props = defineProps({
// 初始化时间 => 2021-08-20 00:00:00
initDate: {
type: String,
required: true // 建议添加必填校验，确保组件正常运行
},
/**
* 记录的区域列表
* @attribute startTime 开始时间 YYYY-MM-DD HH:mm:ss
* @attribute endTime 结束时间 YYYY-MM-DD HH:mm:ss
*/
timeData: {
type: Array,
default: () => []
}
});
// 2. 定义响应式数据（Vue3 中使用 ref/reactive 替代 data）
const playbackbarRef = ref(null); // 容器 DOM 引用
const playbackbarCanvasRef = ref(null); // canvas DOM 引用
// 基础响应式数据（使用 reactive 组合相关状态）
const state = reactive({
nowDate: props.initDate, // 当前时间
mouseNowDate: props.initDate, // 鼠标移入画布时的时间记录
ctx: null, // 画布 2D 上下文
_width: 0, // 画布宽
_height: 0, // 画布高
isMouseDown: false, // 是否在画布上按下鼠标
mousedownX: 0, // 鼠标按下的X坐标
mousedownY: 0, // 鼠标按下的Y坐标
size: 160, // 坐标尺寸（每小时对应的像素宽度）
axisTick: 1 // 默认刻度1（1小时/刻度）
});
// 3. 计算属性（Vue3 中 computed 直接使用）
const pxToSecond = computed(() => {
// 1个移动像素代表的秒数 = (刻度小时数 * 60分钟 * 60秒) / 刻度像素宽度
return (state.axisTick * 60 * 60) / state.size;
});
// 4. 核心方法（提取为独立函数，在 setup 中调用）
/**
* 初始化画布（设置尺寸、上下文，绘制基础内容）
*/
const initCanvas = () => {
const box = playbackbarRef.value;
const canvas = playbackbarCanvasRef.value;
// 设置画布尺寸（与容器一致）
state._width = box.offsetWidth;
state._height = box.offsetHeight;
canvas.width = state._width;
canvas.height = state._height;
// 获取 2D 上下文
state.ctx = canvas.getContext('2d');
// 绘制基础内容
onBaseFill(state.ctx, state._width, state._height);
onDrawNowDate(state.ctx, state._width);
onMouseHandle(canvas, state.ctx, state._width, state._height);
};
/**
* 绘制画布基础内容（轴线、刻度、记录区域等）
* @param {CanvasRenderingContext2D} ctx - 画布上下文
* @param {number} _width - 画布宽度
* @param {number} _height - 画布高度
*/
const onBaseFill = (ctx, _width, _height) => {
// 1. 时间线上轴线（深色粗线）
ctx.beginPath();
ctx.strokeStyle = '#303030';
ctx.lineWidth = 3;
ctx.moveTo(0, 40.5);
ctx.lineTo(_width, 40.5);
ctx.stroke();
// 2. 绘制刻度线、记录区域
onDrawTick(ctx, _width, _height);
onDrawRecordArea(ctx, _width, _height);
// 3. 时间轴辅助线（浅绿色细线）
ctx.beginPath();
ctx.strokeStyle = '#B1BE76';
ctx.lineWidth = 1;
ctx.moveTo(0, 42.5);
ctx.lineTo(_width, 42.5);
ctx.stroke();
// 4. 黄色辅助线
ctx.beginPath();
ctx.strokeStyle = '#FFFF00';
ctx.lineWidth = 1;
ctx.moveTo(0, 50.5);
ctx.lineTo(_width, 50.5);
ctx.stroke();
// 5. 中间时间线（黄色粗线，画布中点）
ctx.beginPath();
ctx.strokeStyle = '#ffcc00';
ctx.lineWidth = 2;
ctx.moveTo(_width / 2 - 1 + 0.5, 0);
ctx.lineTo(_width / 2 - 1 + 0.5, _height);
ctx.stroke();
};
/**
* 绘制轴线刻度线及时间文本
* @param {CanvasRenderingContext2D} ctx - 画布上下文
* @param {number} _width - 画布宽度
* @param {number} _height - 画布高度
*/
const onDrawTick = (ctx, _width, _height) => {
const nowTime = new Date(state.nowDate).getTime();
// 离当前时间最近的整点时间（如 14:00:00）
dayjs(nowTime).format('YYYY-MM-DD HH');
const leftIntTime = new Date(dayjs(state.nowDate).format('YYYY-MM-DD HH') + ':00:00').getTime()
const nowHour = dayjs(state.nowDate).format('HH');
// 当前时间距离左侧整点的秒数
const leftIntSecond = (nowTime - leftIntTime) / 1000;
// 中间点距离左侧整点的像素距离
const leftIntLength = leftIntSecond / pxToSecond.value;
// 整点在画布上的基准位置（以画布中点为参考）
const center = _width / 2 - 1 - leftIntLength;
// 左侧刻度个数（基准点向左能绘制的刻度数）
const leftTickNumber = Math.floor(center / state.size);
// 右侧刻度个数（基准点向右能绘制的刻度数）
const rightTickNumber = Math.floor((_width - center) / state.size);
// 绘制左侧刻度
for (let i = 0; i <= leftTickNumber; i++) {
const _X = center - i * state.size;
let hour = Number(nowHour) - i;
hour = hour < 0 ? hour + 24 : hour; // 处理跨天小时（如 0时-1时=23时）
const timeText = hour < 10 ? `0${hour}:00` : `${hour}:00`;
// 绘制刻度线
ctx.beginPath();
ctx.strokeStyle = '#4B4B4B';
ctx.lineWidth = 2;
ctx.moveTo(_X + 0.5, 40);
ctx.lineTo(_X + 0.5, _height);
ctx.stroke();
// 绘制时间文本
ctx.font = '10px Arial';
ctx.fillStyle = '#969696';
ctx.fillText(timeText, _X + 0.5 - 12, 34);
}
// 绘制右侧刻度
for (let i = 1; i <= rightTickNumber; i++) {
const _X = center + i * state.size;
let hour = Number(nowHour) + i;
hour = hour >= 24 ? hour - 24 : hour; // 处理跨天小时（如 23时+2时=1时）
const timeText = hour < 10 ? `0${hour}:00` : `${hour}:00`;
// 绘制刻度线
ctx.beginPath();
ctx.strokeStyle = '#4B4B4B';
ctx.lineWidth = 2;
ctx.moveTo(_X + 0.5, 40);
ctx.lineTo(_X + 0.5, _height);
ctx.stroke();
// 绘制时间文本
ctx.font = '10px Arial';
ctx.fillStyle = '#969696';
ctx.fillText(timeText, _X + 0.5 - 12, 34);
}
};
/**
* 绘制当前时间文本（画布上方中间）
* @param {CanvasRenderingContext2D} ctx - 画布上下文
* @param {number} _width - 画布宽度
*/
const onDrawNowDate = (ctx, _width) => {
ctx.font = '14px Arial';
ctx.fillStyle = '#ffffff';
ctx.fillText(state.nowDate, _width / 2 - 75, 24);
};
/**
* 绘制视频记录区域（蓝色矩形）
* @param {CanvasRenderingContext2D} ctx - 画布上下文
* @param {number} _width - 画布宽度
* @param {number} _height - 画布高度
*/
const onDrawRecordArea = (ctx, _width, _height) => {
const nowTime = new Date(state.nowDate).getTime();
// 画布左侧顶点对应的时间（秒）
const leftVertexTime = nowTime / 1000 - (_width / 2) * pxToSecond.value;
// 画布右侧顶点对应的时间（秒）
const rightVertexTime = nowTime / 1000 + (_width / 2) * pxToSecond.value;
// 筛选可视范围内的记录（与画布有交集的记录）
const visibleTimeList = props.timeData.filter((record) => {
const startTimeSecond = new Date(record.startTime).getTime() / 1000;
const endTimeSecond = new Date(record.endTime).getTime() / 1000;
// 两种交集情况：1. 记录覆盖画布左侧 2. 记录起点在画布内
return (
(startTimeSecond < leftVertexTime && endTimeSecond > leftVertexTime) ||
(startTimeSecond >= leftVertexTime && startTimeSecond < rightVertexTime)
);
});
// 绘制每个可视记录的蓝色矩形
visibleTimeList.forEach((record) => {
const startTimeSecond = new Date(record.startTime).getTime() / 1000;
const endTimeSecond = new Date(record.endTime).getTime() / 1000;
// 情况1：记录起点在画布左侧（矩形从画布左端开始）
if (startTimeSecond < leftVertexTime) {
const rectWidth = endTimeSecond < rightVertexTime
? (endTimeSecond - leftVertexTime) / pxToSecond.value
: _width; // 若记录覆盖画布右侧，宽度设为画布宽
ctx.beginPath();
ctx.fillStyle = '#637DEC';
ctx.fillRect(0, 43, rectWidth, 8);
}
// 情况2：记录起点在画布内
if (startTimeSecond >= leftVertexTime) {
const rectX = (startTimeSecond - leftVertexTime) / pxToSecond.value; // 矩形X坐标
const rectWidth = (endTimeSecond - startTimeSecond) / pxToSecond.value; // 矩形宽度
ctx.beginPath();
ctx.fillStyle = '#637DEC';
ctx.fillRect(rectX, 43, rectWidth, 8);
}
});
};
/**
* 绑定画布鼠标事件（移入、移出、移动、按下）
* @param {HTMLCanvasElement} canvas - canvas DOM 元素
* @param {CanvasRenderingContext2D} ctx - 画布上下文
* @param {number} _width - 画布宽度
* @param {number} _height - 画布高度
*/
const onMouseHandle = (canvas, ctx, _width, _height) => {
// 鼠标移入：记录当前时间（避免移动时受实时时间影响）
canvas.onmouseover = (e) => {
if (!state.isMouseDown) {
state.mouseNowDate = state.nowDate;
}
};
// 鼠标移出：清空画布并重新绘制基础内容
canvas.onmouseout = (e) => {
ctx.clearRect(0, 0, _width, _height);
onBaseFill(ctx, _width, _height);
onDrawNowDate(ctx, _width);
};
// 鼠标移动（未按下时）：显示当前鼠标对应的时间
canvas.onmousemove = (e) => {
if (!state.isMouseDown) {
ctx.clearRect(0, 0, _width, _height);
onBaseFill(ctx, _width, _height);
const offsetX = e.offsetX; // 鼠标在画布内的X坐标
const moveLength = offsetX - _width / 2; // 鼠标与画布中点的距离
// 计算鼠标位置对应的时间
const targetTime = new Date(state.mouseNowDate).getTime() + pxToSecond.value * moveLength * 1000;
const targetTimeText = dayjs(targetTime).format('YYYY-MM-DD HH:mm:ss');
// 绘制鼠标对应的时间文本（鼠标上方）
ctx.font = '12px Arial';
ctx.fillStyle = '#ffffff';
ctx.fillText(targetTimeText, offsetX - 62, 12);
// 绘制当前时间文本（画布中间）
onDrawNowDate(ctx, _width);
}
};
// 鼠标按下：记录按下时的坐标和状态
canvas.onmousedown = (e) => {
state.mousedownX = e.clientX;
state.mousedownY = e.clientY;
state.isMouseDown = true;
};
};
/**
* 绑定全局事件（鼠标抬起、全局移动）
*/
const onDocumentEvent = () => {
// 全局鼠标抬起：重置按下状态
document.onmouseup = (e) => {
if (state.isMouseDown) {
state.mouseNowDate = state.nowDate; // 同步最终时间
state.isMouseDown = false;
}
};
// 全局鼠标移动（按下时）：拖动画布改变当前时间
document.onmousemove = (e) => {
if (state.isMouseDown && state.ctx) {
state.ctx.clearRect(0, 0, state._width, state._height);
onBaseFill(state.ctx, state._width, state._height);
const clientX = e.clientX;
const moveLength = state.mousedownX - clientX; // 鼠标拖动的距离
// 计算拖动后的时间
const targetTime = new Date(state.mouseNowDate).getTime() + pxToSecond.value * moveLength * 1000;
state.nowDate = dayjs(targetTime).format('YYYY-MM-DD HH:mm:ss');
// 重新绘制当前时间文本
onDrawNowDate(state.ctx, state._width);
}
};
};
// 5. 生命周期钩子（Vue3 中直接使用 onMounted/onBeforeUnmount 等）
// 组件挂载后：初始化画布、绑定事件、监听窗口resize
onMounted(() => {
initCanvas();
onDocumentEvent();
// 窗口resize防抖处理
let isDebouncing = false;
window.onresize = () => {
if (!isDebouncing) {
isDebouncing = true;
setTimeout(() => {
initCanvas();
isDebouncing = false;
}, 300);
}
};
});
// 组件卸载前：清除事件监听
onBeforeUnmount(() => {
window.onresize = null;
document.onmousemove = null;
document.onmouseup = null;
if (playbackbarCanvasRef.value) {
playbackbarCanvasRef.value.onmouseover = null;
playbackbarCanvasRef.value.onmouseout = null;
playbackbarCanvasRef.value.onmousemove = null;
playbackbarCanvasRef.value.onmousedown = null;
}
});
// 6. 监听 Props 变化：initDate 变化时重新初始化
watch(
() => props.initDate,
(newVal) => {
state.nowDate = newVal;
state.mouseNowDate = newVal;
initCanvas();
},
{ immediate: false } // 初始化时已在 onMounted 处理，无需立即执行
);
</script>
<style lang="scss" scoped>
.playbackbar {
width: 100%;
height: 40px;
background-color: #343434;
canvas {
cursor: pointer;
background: #000;
}
}
</style>

1
apps/web-antd/tsconfig.json
View File

@@ -3,6 +3,7 @@
"extends": "@vben/tsconfig/web-app.json",
"compilerOptions": {
"baseUrl": ".",
"allowJs": true,
"paths": {
"#/*": [
"./src/*"