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\昊天 1 year ago
parent b147e14230
commit 91377f4528
8 changed files with 138 additions and 55 deletions
Show Stats Download Patch File Download Diff File

BIN
dist.zip
View File

Binary file not shown.

56
package-lock.json generated
Unescape Escape View File

@ -1150,6 +1150,24 @@
"resolved": "https://r.cnpmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
"integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
},
"@ffmpeg/core": {
"version": "0.12.6",
"resolved": "https://registry.npmmirror.com/@ffmpeg/core/-/core-0.12.6.tgz",
"integrity": "sha512-PrjWBTfGn2WVn9T7wGnzfFwChbqWeZc7tM9vvJZVRadYFUDakfzy7W0LpYC0cvvK0xT82qlBsk38lQhJ/Hps5A=="
},
"@ffmpeg/ffmpeg": {
"version": "0.12.10",
"resolved": "https://registry.npmmirror.com/@ffmpeg/ffmpeg/-/ffmpeg-0.12.10.tgz",
"integrity": "sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==",
"requires": {
"@ffmpeg/types": "^0.12.2"
}
},
"@ffmpeg/types": {
"version": "0.12.2",
"resolved": "https://registry.npmmirror.com/@ffmpeg/types/-/types-0.12.2.tgz",
"integrity": "sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA=="
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -3386,7 +3404,7 @@
},
"axios": {
"version": "0.19.2",
"resolved": "https://r2.cnpmjs.org/axios/-/axios-0.19.2.tgz",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
@ -6774,6 +6792,22 @@
"integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
"dev": true
},
"fluent-ffmpeg": {
"version": "2.1.3",
"resolved": "https://registry.npmmirror.com/fluent-ffmpeg/-/fluent-ffmpeg-2.1.3.tgz",
"integrity": "sha512-Be3narBNt2s6bsaqP6Jzq91heDgOEaDCJAXcE3qcma/EJBSy5FB4cvO31XBInuAuKBx8Kptf8dkhjK0IOru39Q==",
"requires": {
"async": "^0.2.9",
"which": "^1.1.1"
},
"dependencies": {
"async": {
"version": "0.2.10",
"resolved": "https://registry.npmmirror.com/async/-/async-0.2.10.tgz",
"integrity": "sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ=="
}
}
},
"flush-write-stream": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@ -8177,8 +8211,7 @@
"isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
"dev": true
"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
},
"ismobilejs": {
"version": "1.1.1",
@ -13819,7 +13852,7 @@
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://r.cnpmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
@ -13831,7 +13864,7 @@
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://r2.cnpmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
@ -13841,7 +13874,7 @@
},
"chalk": {
"version": "4.1.2",
"resolved": "https://r2.cnpmjs.org/chalk/-/chalk-4.1.2.tgz",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
@ -13852,7 +13885,7 @@
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://r2.cnpmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
@ -13862,21 +13895,21 @@
},
"color-name": {
"version": "1.1.4",
"resolved": "https://r2.cnpmjs.org/color-name/-/color-name-1.1.4.tgz",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://r2.cnpmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://r.cnpmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
@ -13888,7 +13921,7 @@
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://r2.cnpmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
@ -14643,7 +14676,6 @@
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
"dev": true,
"requires": {
"isexe": "^2.0.0"
}

3
package.json
Unescape Escape View File

@ -10,12 +10,15 @@
},
"dependencies": {
"@ant-design/icons-vue": "^7.0.1",
"@ffmpeg/core": "^0.12.6",
"@ffmpeg/ffmpeg": "^0.12.10",
"ant-design-vue": "^1.6.3",
"antd-theme-generator": "^1.2.8",
"axios": "^0.19.2",
"bootstrap": "^5.1.3",
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
"fluent-ffmpeg": "^2.1.3",
"path-to-regexp": "^6.2.0",
"style-loader": "^2.0.0",
"v-viewer": "^1.5.1",

2
public/config.json
Unescape Escape View File

@ -2,7 +2,7 @@
"urls":{
"1号堆垛机第1个摄像头" : "rtsp://176.65.94.105/axis-media/media.amp",
"1号堆垛机第2个摄像头" : "rtsp://132.239.12.145/axis-media/media.amp",
"2号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.40:554/Streaming/tracks/",
"2号堆垛机第1个摄像头" : "rtsp://admin:a1234567@127.0.0.1:554/Streaming/tracks/",
"2号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.40:555/Streaming/tracks/",
"3号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.41:554/Streaming/tracks/",
"3号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.41:555/Streaming/tracks/",

4
src/layouts/PageHeader.vue
Unescape Escape View File

@ -10,7 +10,7 @@
<slot name="title">{{ title }}</slot>
</a-layout-header>
</div>
<div class="header-right">
<!-- <div class="header-right">
<div class="header-top-right-circle" @click="visible = !visible"></div>
<a-badge :count="count" @click="openPlc">
<a-icon type="bell" style="font-size:20px;cursor:pointer"/>
@ -30,7 +30,7 @@
<a href="javascript:;" @click="logout">退出登录</a>
</div>
</a-popover>
</div>
</div> -->
</div>
</template>

36
src/router/index.js
Unescape Escape View File

@ -104,24 +104,24 @@ const routes = [
},
{
path: 'videoPlayback',
name: 'videoPlayback',
meta: {
icon: 'tag',
name: '记录回放',
},
component: () => import('@/views/videoPlayback/index'),
},
{
path: 'hikvideo',
name: 'hikvideo',
meta: {
icon: 'tag',
name: '录像回放',
},
component: () => import('@/views/hikvideo/index'),
},
// {
// path: 'videoPlayback',
// name: 'videoPlayback',
// meta: {
// icon: 'tag',
// name: '记录回放',
// },
// component: () => import('@/views/videoPlayback/index'),
// },
// {
// path: 'hikvideo',
// name: 'hikvideo',
// meta: {
// icon: 'tag',
// name: '录像回放',
// },
// component: () => import('@/views/hikvideo/index'),
// },
{
path: 'historyMonitoring',
name: 'historyMonitoring',

90
src/views/hikvideo/index.vue
Unescape Escape View File

@ -42,10 +42,15 @@
</template>
<script>
//import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
export default {
name: "hikvideo",
data() {
return {
ffmpeg: createFFmpeg({ log: true }),
inputVideo: null,
outputVideoUrl: '',
webRtcServer: null,
pickerOptions: {
disabledDate(time) {
@ -62,7 +67,7 @@ export default {
this.loadCameras();
this.webRtcServer = new WebRtcStreamer(
"video",
"http://192.168.1.200:8000"
"http://127.0.0.1:9009"
);
},
//销毁视频流
@ -71,24 +76,65 @@ export default {
this.webRtcServer = null;
},
methods: {
// async loadFFmpeg() {
// if (!this.ffmpeg.isLoaded()) {
// await this.ffmpeg.load();
// }
// },
// onFileChange(event) {
// const file = event.target.files[0];
// if (file) {
// this.inputVideo = file;
// }
// },
// async processVideo() {
// await this.loadFFmpeg();
// const { name } = this.inputVideo;
// // 将文件传入 FFmpeg
// this.ffmpeg.FS('writeFile', name, await fetchFile(this.inputVideo));
// // 处理视频，例如转码为 MP4
// await this.ffmpeg.run('-i', name, 'output.mp4');
// // 获取处理后的文件
// const data = this.ffmpeg.FS('readFile', 'output.mp4');
// // 创建输出视频 URL
// const outputUrl = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
// this.outputVideoUrl = outputUrl;
// },
convertDateFormat(input) {
// 使用正则表达式提取日期和时间部分
const regex = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
const match = input.match(regex);
if (match) {
const year = match[1];
const month = match[2];
const day = match[3];
const hours = match[4];
const minutes = match[5];
const seconds = match[6];
// 格式化为 YYYYMMDDtHHmmssz
return `${year}${month}${day}t${hours}${minutes}${seconds}z`;
} else {
throw new Error("Invalid date format");
}
// 将时间字符串转换为 Date 对象
const date = new Date(input);
// 格式化新的时间字符串
const formattedDate = date.toISOString().replace('T', ' ').substring(0, 19);
console.log(formattedDate); // 输出: 2024-10-29 07:38:41
const pad = (num) => String(num).padStart(2, '0');
const year = date.getUTCFullYear();
const month = pad(date.getUTCMonth() + 1); // 月份从0开始
const day = pad(date.getUTCDate());
const hours = pad(date.getUTCHours());
const minutes = pad(date.getUTCMinutes());
const seconds = pad(date.getUTCSeconds());
// 格式化为 YYYYMMDDtHHmmssz
return `${year}${month}${day}t${hours}${minutes}${seconds}z`;
},
handleChange(value) {
console.log(value);
@ -96,17 +142,19 @@ export default {
this.play()
},
play() {
var urlUtf8 = this.url.replaceAll("%3A", ":").replaceAll("%2F", "/") //过滤URL 包含中文
.replaceAll("%3F", "?").replaceAll("%3D", "=").replaceAll("%26", "&");
if (this.date != null && this.url != null) {
var url =
this.url +
"starttime=" +
urlUtf8 +
"?starttime=" +
this.convertDateFormat(this.date[0]) +
"&endtime=" +
this.convertDateFormat(this.date[1]);
console.log(url);
this.webRtcServer.connect(
"rtsp://admin:a1234567@192.168.1.65:554/Streaming/Channels/101"
url
);
}
},

2
src/views/realTimeMonitoring/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="realTime bg-white">
<a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange" padding:10px style="width: 80vw">
<a-tab-pane :key="item.streetId.toString()" :tab="item.streetId.toString()" v-for="item in realTimeListData"></a-tab-pane>
<a-tab-pane :key="item.streetId.toString()" :tab="item.streetName.toString()" v-for="item in realTimeListData"></a-tab-pane>
</a-tabs>
<!-- {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
<a-row :gutter="20">

Write Preview
Loading…
Cancel
Save