upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

录像回放

Browse Source
dongguan-华为云
LAPTOP-S9HJSOEB\昊天 2 years ago
parent 4271e03da0
commit 30bd86f163
2 changed files with 402 additions and 258 deletions
Show Stats Download Patch File Download Diff File

5
src/api/http/http-api.js
Unescape Escape View File

@ -30,6 +30,11 @@ export default {
url: "/cameraRecord/record",
name: "球机回放信息"
},
cameraRecordConvetor: {
method: "POST",
url: "/cameraRecord/convetor",
name: "视频转换"
},
addStreet: {
method: "POST",
url: "/street",

649
src/views/videoPlayback/index.vue
Unescape Escape View File

@ -1,68 +1,105 @@
<template>
<a-row type="flex" :gutter="30">
<a-col :flex="1">
时间：<a-date-picker v-model="date" format="YYYY-MM-DD" placeholder="请选择时间" @change="cameraRecord"/>
<section style="height: 80vh;overflow: hidden;
<a-row
type="flex"
:gutter="30"
>
<a-col :flex="1">
时间：<a-date-picker
v-model="date"
format="YYYY-MM-DD"
placeholder="请选择时间"
@change="cameraRecord"
/>
<section style="height: 80vh;overflow: hidden;
overflow-y: scroll;">
<a-tree
:tree-data="treeData"
:check-strictly="true"
@select="handleCheck">
</a-tree>
</section>
</a-col>
<a-col :flex="13">
<div>
<div class="time-display">
<!-- 视频 -->
<video ref="videoPlayer" muted style=" display: flex;" width="100%" >
<source :src="currentVideoUrl" type="video/mp4" />
</video>
</div>
<!-- 滑动轴 -->
<div class="zoom-buttons" width="100%" >
<!-- <a-button-group>
<a-tree
:tree-data="treeData"
:check-strictly="true"
@select="handleCheck"
>
</a-tree>
</section>
</a-col>
<a-col :flex="13">
<div>
<div class="time-display">
<!-- 视频 -->
<video
ref="videoPlayer"
muted
style=" display: flex;"
width="60%"
>
<source
:src="'http://192.168.1.110:8007'+currentVideoUrl"
type="video/mp4"
/>
</video>
</div>
<!-- 滑动轴 'http://192.168.1.110:8007'+currentVideoUrl -->
<div
class="zoom-buttons"
width="100%"
>
<!-- <a-button-group>
<a-button icon="arrows-alt" :disabled="zoom" @click="handleZoomIn"></a-button>
<a-button icon="shrink" :disabled="shrink" @click="handleZoomOut"></a-button>
</a-button-group> -->
</div>
<a-slider
ref="slider"
:marks="marks"
class="progress-bar"
:max="totalDuration"
:tip-formatter="formatter"
:value="currentTime"
:disabled="Object.keys(urls).length === 0"
@change="onSliderChange"
/>
<div class="time-display">
<a-button-group>
<a-button icon="step-backward" :disabled="Object.keys(urls).length === 0" @click="moveForward(-5)" />
<a-button v-if="isPlaying" :disabled="Object.keys(urls).length === 0" icon="pause" @click="pauseVideo" />
<a-button v-else icon="play-circle" :disabled="Object.keys(urls).length === 0" @click="playVideo" />
<a-button icon="step-forward" :disabled="Object.keys(urls).length === 0" @click="moveForward(5)" />
</a-button-group>
</div>
</div>
</a-col>
</a-row>
</div>
<a-slider
ref="slider"
:marks="marks"
class="progress-bar"
:max="totalDuration"
:tip-formatter="formatter"
:value="currentTime"
:disabled="Object.keys(urls).length === 0"
@change="onSliderChange"
/>
<div class="time-display">
<a-button-group>
<a-button
icon="step-backward"
:disabled="Object.keys(urls).length === 0"
@click="moveForward(-5)"
/>
<a-button
v-if="isPlaying"
:disabled="Object.keys(urls).length === 0"
icon="pause"
@click="pauseVideo"
/>
<a-button
v-else
icon="play-circle"
:disabled="Object.keys(urls).length === 0"
@click="playVideo"
/>
<a-button
icon="step-forward"
:disabled="Object.keys(urls).length === 0"
@click="moveForward(5)"
/>
</a-button-group>
</div>
</div>
</a-col>
</a-row>
</template>
<script>
import { Slider, Button, ButtonGroup } from 'ant-design-vue';
import { Slider, Button, ButtonGroup } from "ant-design-vue";
import moment from 'moment'
import moment from "moment";
import { message } from 'ant-design-vue';
import { message } from "ant-design-vue";
export default {
components: {
ASlider: Slider,
@ -71,243 +108,322 @@ export default {
},
data() {
return {
totalDuration: 24*60*60, // 假设视频总时长为60s
totalDuration: 24 * 60 * 60, // 假设视频总时长为60s
//数据轴上的数值
currentTime: 0,
//数据轴上的开始时间
startTimeLong: 0,
//数据轴上的结束时间
endTimeLong: 24*60*60,
endTimeLong: 24 * 60 * 60,
//当天记录的结束的时间绝对值
maxTimeLong:24*60*60,
maxTimeLong: 24 * 60 * 60,
//当天记录的开始的时间绝对值
minTimeLong: 0*60*60,
date: this.getYesterday() ,
currentVideoUrl: '', // 当前视频的 URL
value1: '2023-10-11',
urls:{
},
minTimeLong: 0 * 60 * 60,
date: this.getYesterday(),
currentVideoUrl: "", // 当前视频的 URL
value1: "2023-10-11",
urls: {},
mapByTime: {},
URLStartTime: 0,
isPlaying: false, // 视频是否正在播放
marks:{},
zoom:false,
shrink:true,
marks: {},
zoom: false,
shrink: true,
treeData: [],
cameraId:'',
cameraId: "",
playObject: {},
getSuccessUrl: [],
};
},
mounted() {
const video = this.$refs.videoPlayer;
video.addEventListener('timeupdate', this.onVideoTimeUpdate);
video.addEventListener('ended', this.playNextVideo);
video.addEventListener("timeupdate", this.onVideoTimeUpdate);
video.addEventListener("ended", this.playNextVideo);
console.log(this.getTimeMap());
this.totalDuration = this.endTimeLong -this.startTimeLong;
this.totalDuration = this.endTimeLong - this.startTimeLong;
this.marks = this.getTimeMap();
console.log(this.date);
this.getTree()
this.cameraRecord()
this.getTree();
this.cameraRecord();
},
beforeDestroy() {
const video = this.$refs.videoPlayer;
video.removeEventListener('timeupdate', this.onVideoTimeUpdate);
video.removeEventListener('ended', this.playNextVideo);
video.removeEventListener("timeupdate", this.onVideoTimeUpdate);
video.removeEventListener("ended", this.playNextVideo);
},
methods: {
getYesterday(){
videoControl(seconds) {
//获取playObject参数
this.binarySearchMax(seconds);
//后台获取资源
if (!this.getSuccessUrl.includes(this.currentVideoUrl)) {
//加载视频
this.$api.httpApi
.cameraRecordConvetor({
data: {
url: this.currentVideoUrl,
},
})
.then((res) => {
this.getSuccessUrl.push(this.currentVideoUrl);
});
}
//读取MP4文件
const video = this.$refs.videoPlayer;
this.isPlaying = true;
video.load(); // 重新加载视频资源
//计算时间
video.currentTime =
this.currentTime - this.playObject.startTimeLong;
//播放或停止
if (this.isPlaying) {
video.play();
} else {
video.pause();
}
},
//获取前一天
getYesterday() {
const now = moment();
return now.subtract(1, 'days')
return now.subtract(1, "days");
},
//放大缩小轴所用
scaleTime(rate) {
const middle = this.startTimeLong +this.currentTime;
const middle = this.startTimeLong + this.currentTime;
// 计算开始时间到中间时间的毫秒数
const startToMiddleMs = middle - this.startTimeLong;
// 计算结束时间到中间时间的毫秒数
const endToMiddleMs = this.endTimeLong - middle;
// 缩小或放大开始时间
const scaledStart = middle -Math.floor( startToMiddleMs * rate);
console.log("开始缩小时间"+ scaledStart);
const scaledStart = middle - Math.floor(startToMiddleMs * rate);
console.log("开始缩小时间" + scaledStart);
// 缩小或放大结束时间
const scaledEnd =middle +Math.floor( endToMiddleMs * rate);
console.log("结束缩小时间"+ scaledEnd);
const scaledEnd = middle + Math.floor(endToMiddleMs * rate);
console.log("结束缩小时间" + scaledEnd);
// 检查是否超出当天时间的范围并赋值
this.startTimeLong = this.minTimeLong>scaledStart?this.minTimeLong : scaledStart;
this.endTimeLong = this.maxTimeLong<scaledEnd?this.maxTimeLong : scaledEnd;
this.startTimeLong =
this.minTimeLong > scaledStart ? this.minTimeLong : scaledStart;
this.endTimeLong =
this.maxTimeLong < scaledEnd ? this.maxTimeLong : scaledEnd;
//时间修改
if(this.minTimeLong<scaledStart || this.maxTimeLong>scaledEnd){
this.shrink=false;
}else{
this.shrink=true;
if (
this.minTimeLong < scaledStart ||
this.maxTimeLong > scaledEnd
) {
this.shrink = false;
} else {
this.shrink = true;
}
console.log("zhou"+middle);
this.updateslider(middle)
console.log("zhou" + middle);
this.updateslider(middle);
},
//获取当前时间
formatTime(seconds) {
seconds = seconds%(60*60*24);
seconds = seconds % (60 * 60 * 24);
const hour = Math.floor(seconds / 3600);
const minute = Math.floor((seconds % 3600) / 60);
const second = seconds % 60;
return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
return `${hour.toString().padStart(2, "0")}:${minute
.toString()
.padStart(2, "0")}:${second.toString().padStart(2, "0")}`;
},
// 点击放大按钮触发的方法
handleZoomIn() {
this.scaleTime(0.5)
this.scaleTime(0.5);
},
// 点击缩小按钮触发的方法
handleZoomOut() {
this.scaleTime(2)
this.scaleTime(2);
},
//根据开始时间修改时间轴（轴位置不变，请在外部修改）
updateslider(middle){
updateslider(middle) {
this.totalDuration = this.endTimeLong - this.startTimeLong;
console.log("轴上数值为："+(middle-this.startTimeLong));
this.currentTime = (middle-this.startTimeLong);
console.log("轴上数值为：" + (middle - this.startTimeLong));
this.currentTime = middle - this.startTimeLong;
this.marks = this.getTimeMap();
},
getTree(){
this.$api.httpApi.getAllStreet({
}).then(res => {
console.log("update data")
for(let i = 0;i<res.data.length;i++){
// 创建空对象
const obj = {};
// 添加属性和值
obj["title"] = res.data[i].name;
obj["key"] = res.data[i].id;
obj["type"] = 0
obj["children"] =[];
if( res.data[i].camera1Id !=""){
const obj1 = {};
obj1["title"] = res.data[i].camera1Name
obj1["key"] = res.data[i].camera1Id
obj1["type"] = 1
obj["children"].push(obj1)
//巷道列表
getTree() {
this.$api.httpApi
.getAllStreet({})
.then((res) => {
console.log("update data");
for (let i = 0; i < res.data.length; i++) {
// 创建空对象
const obj = {};
// 添加属性和值
obj["title"] = res.data[i].name;
obj["key"] = res.data[i].id;
obj["type"] = 0;
obj["children"] = [];
if (res.data[i].camera1Id != "") {
const obj1 = {};
obj1["title"] = res.data[i].camera1Name;
obj1["key"] = res.data[i].camera1Id;
obj1["type"] = 1;
obj["children"].push(obj1);
}
if (res.data[i].camera2Id != "") {
const obj1 = {};
obj1["title"] = res.data[i].camera2Name;
obj1["key"] = res.data[i].camera2Id;
obj1["type"] = 1;
obj["children"].push(obj1);
}
this.treeData.push(obj);
}
if( res.data[i].camera2Id !=""){
const obj1 = {};
obj1["title"] = res.data[i].camera2Name
obj1["key"] = res.data[i].camera2Id
obj1["type"] = 1
obj["children"].push(obj1)
}
this.treeData.push(obj)
}
console.log(this.treeData);
}).catch(err => {
});
console.log(this.treeData);
})
.catch((err) => {});
},
//根据时间间隔调整横轴时间片段
getTimeMap() {
const diff = this.endTimeLong - this.startTimeLong; // 计算时间差，单位为秒
const diff = this.endTimeLong - this.startTimeLong; // 计算时间差，单位为秒
console.log(diff + " qqq");
const map = {};
if (diff >= 60 * 60 * 3) {
this.TimeMapErgodic(60*60,map);
} else if (diff >= 60 * 60) {
// 如果大于等于1小时小于3小时每15分钟一个标识
this.TimeMapErgodic(15*60,map);
} else if (diff >= 60*20) {
this.TimeMapErgodic(60 * 60, map);
} else if (diff >= 60 * 60) {
// 如果大于等于1小时小于3小时每15分钟一个标识
this.TimeMapErgodic(15 * 60, map);
} else if (diff >= 60 * 20) {
this.zoom = false;
// 如果大于等于20分钟小于1小时每5分钟一个标识
this.TimeMapErgodic(5*60,map);
} else if (diff >= 5* 60) {
// 如果大于等于20分钟小于1小时每5分钟一个标识
this.TimeMapErgodic(5 * 60, map);
} else if (diff >= 5 * 60) {
this.zoom = false;
// 如果大于等于5分钟小于20分钟每分钟一个标识
this.TimeMapErgodic(60,map);
} else if (diff >= 30) {
// 如果大于等于5分钟小于20分钟每分钟一个标识
this.TimeMapErgodic(60, map);
} else if (diff >= 30) {
this.zoom = false;
// 如果小于5分钟大于1m每30s一个标识
// 如果小于5分钟大于1m每30s一个标识
console.log("如果小于5分钟大于1m每30s一个标识");
console.log(startTime +" "+endTime)
this.TimeMapErgodic(30,map);
} else if (diff >= 10) {
console.log(startTime + " " + endTime);
this.TimeMapErgodic(30, map);
} else if (diff >= 10) {
this.zoom = true;
// 如果小于1m大于10s 5s标识
this.TimeMapErgodic(5,map);
} else {
// 如果小于1m大于10s 5s标识
this.TimeMapErgodic(5, map);
} else {
this.zoom = true;
// 如果小于10s 1s标识
this.TimeMapErgodic(1,map);
}
// 如果小于10s 1s标识
this.TimeMapErgodic(1, map);
}
return map;
},
//遍历获取time映射
TimeMapErgodic(interval,map){
const startTime =Math.ceil(this.startTimeLong/(interval)) *interval;
const endTime =Math.floor(this.endTimeLong/(interval))*interval;
for (let i = startTime ; i<= endTime; i+=interval) {
const minuteDiff = (i - this.startTimeLong) ;
map[minuteDiff] = `${String(Math.floor(i/(60*60))).padStart(2, '0')}:${String(Math.floor((i%(60*60))/(60))).padStart(2, '0')}:${String((i%(60))).padStart(2, '0')}`;
}
TimeMapErgodic(interval, map) {
const startTime =
Math.ceil(this.startTimeLong / interval) * interval;
const endTime = Math.floor(this.endTimeLong / interval) * interval;
for (let i = startTime; i <= endTime; i += interval) {
const minuteDiff = i - this.startTimeLong;
map[minuteDiff] = `${String(Math.floor(i / (60 * 60))).padStart(
2,
"0"
)}:${String(Math.floor((i % (60 * 60)) / 60)).padStart(
2,
"0"
)}:${String(i % 60).padStart(2, "0")}`;
}
return map;
},
//将秒数转为 时分秒
formatter(value) {
const i = this.startTimeLong + value
formatter(value) {
const i = this.startTimeLong + value;
// 格式化输出新的时间
const hours = String(Math.floor(i/(60*60))).padStart(2, '0');
const minutes = String(Math.floor((i%(60*60))/(60))).padStart(2, '0');
const seconds = String(Math.floor((i%(60)))).padStart(2, '0');
const hours = String(Math.floor(i / (60 * 60))).padStart(2, "0");
const minutes = String(Math.floor((i % (60 * 60)) / 60)).padStart(
2,
"0"
);
const seconds = String(Math.floor(i % 60)).padStart(2, "0");
return `${hours}:${minutes}:${seconds}`;
},
//二分法
binarySearchMax(arr, target) {
let left = 0;
let right = arr.length - 1;
let max = -Infinity;
console.log(arr);
while (left <= right) {
const mid = Math.floor((left + right) / 2);
//当改变横轴时，获取视频开始时间和url
binarySearchMax(target) {
var maxSmaller = null;
let nums = Object.keys(this.mapByTime);
//console.log(nums);
let num = 0;
for (let numString of nums) {
num = parseInt(this.mapByTime[numString].endTimeLong);
if (target < num) {
this.playObject = this.mapByTime[numString];
if (
!(
target >
parseInt(this.mapByTime[numString].startTimeLong)
)
) {
this.currentTime = parseInt(
this.mapByTime[numString].startTimeLong
);
} else {
this.currentTime = target;
}
this.currentVideoUrl = this.playObject.url;
if (arr[mid] <= target) {
max = Math.max(max, arr[mid]);
left = mid + 1;
} else {
right = mid - 1;
console.log(this.currentVideoUrl);
break;
}
}
return max;
return maxSmaller;
},
//横轴改变
onSliderChange(value) {
console.log(value);
this.URLStartTime = this.binarySearchMax(Object.keys(this.urls),value+this.minTimeLong);
this.currentVideoUrl = this.urls[this.URLStartTime]
this.currentTime = value;
const video = this.$refs.videoPlayer;
video.currentTime = value +this.startTimeLong-this.URLStartTime ;
this.videoControl(value);
},
//视频时间改变
onVideoTimeUpdate() {
const video = this.$refs.videoPlayer;
console.log("视频时间"+(this.URLStartTime + video.currentTime));
this.currentTime =this.URLStartTime + video.currentTime-this.startTimeLong;
console.log(
"视频时间" + (this.playObject.startTimeLong + video.currentTime)
);
this.currentTime =
this.playObject.startTimeLong +
video.currentTime -
this.startTimeLong;
},
//向后
//左右调整
moveForward(duration) {
console.log("111");
const newTime = this.currentTime + duration;
if (newTime >= 0 ||newTime <= this.totalDuration) {
this.currentTime = newTime;
const video = this.$refs.videoPlayer;
video.currentTime = newTime;
}
this.videoControl(this.currentTime + duration)
},
playVideo() {
console.log(this.currentVideoUrl);
if (this.currentVideoUrl == null || this.currentVideoUrl == "") {
this.binarySearchMax(0);
}
//加载视频
console.log(this.getSuccessUrl.includes(this.currentVideoUrl));
if (!this.getSuccessUrl.includes(this.currentVideoUrl)) {
//加载视频
this.$api.httpApi
.cameraRecordConvetor({
data: {
url: this.currentVideoUrl,
},
})
.then((res) => {
this.getSuccessUrl.push(this.currentVideoUrl);
});
}
const video = this.$refs.videoPlayer;
this.isPlaying = true;
console.log( this.currentTime +this.startTimeLong - this.URLStartTime);
video.currentTime = this.currentTime +this.startTimeLong - this.URLStartTime
video.load(); // 重新加载视频资源
video.currentTime =
this.currentTime - this.playObject.startTimeLong;
video.play();
},
pauseVideo() {
@ -316,10 +432,8 @@ export default {
video.pause();
},
playNextVideo() {
let nextKey =this.URLStartTime;
let nextKey = this.URLStartTime;
const keys = Object.keys(this.urls);
// 找到当前键的索引
const currentIndex = keys.indexOf(this.URLStartTime.toString());
console.log(keys);
@ -328,83 +442,108 @@ export default {
const video = this.$refs.videoPlayer;
this.URLStartTime = nextKey;
this.currentVideoUrl = this.urls[nextKey] ;
this.currentTime =this.URLStartTime;
video.currentTime =0;
this.currentVideoUrl = this.urls[nextKey];
video.load(); // 重新加载视频资源
this.currentTime = this.URLStartTime;
video.currentTime = 0;
video.play();
}
},
handleCheck(selectedKeys, e){
if(e.selectedNodes[0].data.props.type == 1){
handleCheck(selectedKeys, e) {
if (e.selectedNodes[0].data.props.type == 1) {
this.cameraId = e.selectedNodes[0].data.key;
console.log(e.selectedNodes[0].data);
this.cameraRecord()
this.cameraRecord();
}
console.log(e.selectedNodes[0].data.props);
},
cameraRecord(){
this.$api.httpApi.cameraRecord({
data: {
date: this.date._d.getFullYear() + '-' + (this.date._d.getMonth() + 1) + '-' + this.date._d.getDate(),
cameraId: this.cameraId,
}
}).then(res => {
console.log("update data")
if( (res.data.startTimeLong !== null && res.data.startTimeLong !== undefined && res.data.startTimeLong !== "")
||( res.data.endTimeLong !== null && res.data.endTimeLong!== undefined &&res.data.endTimeLong !== '')){
}
if(res.data.urls !== null && res.data.urls !== undefined && Object.keys(res.data.urls).length >0){
this.startTimeLong = res.data.startTimeLong
this.endTimeLong = res.data.endTimeLong
this.minTimeLong = res.data.startTimeLong
this.maxTimeLong = res.data.endTimeLong
this.currentTime = 0
this.totalDuration = res.data.endTimeLong - res.data.startTimeLong
this.currentVideoUrl = res.data.urls[0].url
const video = this.$refs.videoPlayer;
video.currentTime = 0 ;
const map = {};
for(let i = 0;i<res.data.urls.length;i++){
map[res.data.urls[i].startTimeLong] = res.data.urls[i].url
cameraRecord() {
this.$api.httpApi
.cameraRecord({
data: {
date:
this.date._d.getFullYear() +
"-" +
(this.date._d.getMonth() + 1) +
"-" +
this.date._d.getDate(),
cameraId: this.cameraId,
},
})
.then((res) => {
console.log("update data");
if (
(res.data.startTimeLong !== null &&
res.data.startTimeLong !== undefined &&
res.data.startTimeLong !== "") ||
(res.data.endTimeLong !== null &&
res.data.endTimeLong !== undefined &&
res.data.endTimeLong !== "")
) {
}
this.urls = map
this.marks = this.getTimeMap();
console.log(map);
}else{
if(this.cameraId !== null && this.cameraId !== undefined && this.cameraId !== ""){
message.info('此摄像头该日期未录像');
if (
res.data.urls !== null &&
res.data.urls !== undefined &&
Object.keys(res.data.urls).length > 0
) {
this.startTimeLong = res.data.startTimeLong;
this.endTimeLong = res.data.endTimeLong;
this.minTimeLong = res.data.startTimeLong;
this.maxTimeLong = res.data.endTimeLong;
this.currentTime = 0;
this.totalDuration =
res.data.endTimeLong - res.data.startTimeLong;
const map = {};
const mapByTime = {};
for (let i = 0; i < res.data.urls.length; i++) {
map[res.data.urls[i].startTimeLong] =
res.data.urls[i].url;
}
for (let i = 0; i < res.data.urls.length; i++) {
mapByTime[res.data.urls[i].startTimeLong] =
res.data.urls[i];
}
this.urls = map;
this.mapByTime = mapByTime;
this.marks = this.getTimeMap();
console.log(map);
} else {
if (
this.cameraId !== null &&
this.cameraId !== undefined &&
this.cameraId !== ""
) {
message.info("此摄像头该日期未录像");
}
}
}
}).catch(err => {
console.log(err);
});
}
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
<style>
.progress-bar .ant-slider-rail {
.progress-bar .ant-slider-rail {
background-color: lightgray;
}
}
.progress-bar .ant-slider-track {
.progress-bar .ant-slider-track {
background-color: dodgerblue;
}
}
.time-display {
.time-display {
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.zoom-buttons {
text-align: right;
margin-bottom: 16px;
}
.zoom-buttons {
text-align: right;
margin-bottom: 16px;
}
</style>

Write Preview
Loading…
Cancel
Save