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", url: "/cameraRecord/record",
name: "球机回放信息" name: "球机回放信息"
}, },
cameraRecordConvetor: {
method: "POST",
url: "/cameraRecord/convetor",
name: "视频转换"
},
addStreet: { addStreet: {
method: "POST", method: "POST",
url: "/street", url: "/street",

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

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

Write Preview
Loading…
Cancel
Save