From db7c442b41497d4528ea58a852246ca793a9d099 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Fri, 05 Feb 2021 16:10:42 +0800
Subject: [PATCH] 添加实时视频查看
---
src/page/index/logo.vue | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 201 insertions(+), 1 deletions(-)
diff --git a/src/page/index/logo.vue b/src/page/index/logo.vue
index 285ec7a..c5d044c 100644
--- a/src/page/index/logo.vue
+++ b/src/page/index/logo.vue
@@ -73,7 +73,12 @@
</el-form-item>
</el-col>
-
+ <el-col span="12">
+ <el-form-item label="实时视频">
+ <el-button type="primary" @click.stop="queryOldVideo(form)"
+ >查看视频</el-button>
+ </el-form-item>
+ </el-col>
</el-row>
<el-row>
@@ -111,6 +116,25 @@
</el-row>
</el-form>
</el-dialog>
+
+ <el-dialog
+ class="ss-video-dialog"
+ :modal="false"
+ width="100%"
+ title="历史视频"
+ :visible.sync="innerVisibleVideo"
+ :close-on-press-escape="false"
+ append-to-body
+ @opened="openOldVideoBox"
+ @close="closeOldVideoBox"
+ >
+ <video
+ src=""
+ id="old_video"
+ style="width: 100%; height: 100%; object-fit:fill"
+ controls
+ ></video>
+ </el-dialog>
</div>
@@ -121,11 +145,13 @@
<script>
import { mapGetters } from "vuex";
import axios from 'axios'
+ import Hls from "hls.js";
export default {
name: "logo",
data() {
return {
dialogTableVisible:false,
+ innerVisibleVideo: false,
deviceId:null,
form: {},
};
@@ -243,7 +269,155 @@
method: 'post',
}).then(function () {
});
+ },
+ queryOldVideo(data) {
+ var newAxios = axios.create({
+ baseURL: "https://s16s652780.51mypc.cn",
+ withCredentials: false,
+ headers: {
+ "Content-type": "application/x-www-form-urlencoded"
+ }
+ });
+
+ var time = this.beginTimeOrEndTime(data.alarmTime);
+
+ newAxios
+ .post(
+ "/api_control",
+ {},
+ {
+ params: {
+ param: JSON.stringify({ PktType: "GetAccessToken" })
+ }
+ }
+ )
+ .then(res => {
+ newAxios
+ .get(
+ `/GetPlayUrl?deviceCode=${data.channelNumber}&chl=${data.serialNumber}`
+ )
+ .then(result => {
+ this.innerVisibleVideo = true;
+
+ this.videoSource = result.data.data.m3u8;
+ });
+
+ // newAxios
+ // .post(
+ // "/api_control",
+ // {},
+ // {
+ // params: {
+ // param: JSON.stringify({
+ // PktType: "RemotePlayback",
+ // accessToken: res.data.data.accessToken,
+ // deviceCode: "001231409472",
+ // startTime: "20210130150000",
+ // endTime: "20210130160000",
+ // chl: data.serialNumber
+ // })
+ // }
+ // }
+ // )
+ // .then(result => {
+
+ // this.innerVisibleVideo = true;
+
+ // this.videoSource = result.data.data.m3u8;
+
+ // });
+ });
+ },
+
+ beginTimeOrEndTime(time) {
+ var beginTime = new Date(time);
+
+ var endTime = new Date(new Date(time).valueOf() - 1000 * 60 * 60 * 3);
+
+ var beginY = beginTime.getFullYear();
+
+ var beginM =
+ beginTime.getMonth() + 1 < 10
+ ? "0" + (beginTime.getMonth() + 1)
+ : beginTime.getMonth() + 1;
+
+ var beginD =
+ beginTime.getDate() < 10
+ ? "0" + beginTime.getDate()
+ : beginTime.getDate();
+
+ var beginH =
+ beginTime.getHours() < 10
+ ? "0" + beginTime.getHours()
+ : beginTime.getHours();
+
+ var beginm =
+ beginTime.getMinutes() < 10
+ ? "0" + beginTime.getMinutes()
+ : beginTime.getMinutes();
+
+ var begins =
+ beginTime.getSeconds() < 10
+ ? "0" + beginTime.getSeconds()
+ : beginTime.getSeconds();
+
+ var endY = endTime.getFullYear();
+
+ var endM =
+ endTime.getMonth() + 1 < 10
+ ? "0" + (endTime.getMonth() + 1)
+ : endTime.getMonth() + 1;
+
+ var endD =
+ endTime.getDate() < 10 ? "0" + endTime.getDate() : endTime.getDate();
+
+ var endH =
+ endTime.getHours() < 10 ? "0" + endTime.getHours() : endTime.getHours();
+
+ var endm =
+ endTime.getMinutes() < 10
+ ? "0" + endTime.getMinutes()
+ : endTime.getMinutes();
+
+ var ends =
+ endTime.getSeconds() < 10
+ ? "0" + endTime.getSeconds()
+ : endTime.getSeconds();
+ return {
+ begin: beginY + beginM + beginD + beginH + beginm + begins,
+ end: endY + endM + endD + endH + endm + ends
+ };
+ },
+ openOldVideoBox() {
+ if (Hls.isSupported()) {
+ var dom = document.getElementById("old_video");
+
+ // if (dom.volume) dom.volume = 1.0;
+
+ this.hls = new Hls();
+
+ var m3u8Url = decodeURIComponent(this.videoSource);
+
+ this.hls.loadSource(m3u8Url);
+
+ this.hls.attachMedia(dom);
+
+ this.hls.on(Hls.Events.MANIFEST_PARSED, function() {
+ dom.play();
+ });
}
+ },
+ closeOldVideoBox() {
+ var dom = document.getElementById("old_video");
+
+ if (dom.getAttribute("src") != "") {
+ dom.pause();
+
+ dom.setAttribute("src", "");
+
+ this.hls.destroy();
+ }
+ },
}
};
</script>
@@ -321,5 +495,31 @@
border-radius: 10px 10px 10px 10px;
}
+ .ss-video-dialog {
+ position: absolute !important;
+ top: 50px !important;
+ left: auto !important;
+ right: 0px !important;
+ bottom: 0 !important;
+ margin: auto !important;
+ width: 476px !important;
+ }
+
+ .ss-video-dialog .el-dialog {
+ position: absolute !important;
+ top: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ bottom: 0 !important;
+ margin: auto !important;
+ margin-top: 15vh !important;
+ height: 520px;
+ }
+
+ .ss-video-dialog .el-dialog .el-dialog__body {
+ height: calc(100% - 54px);
+ box-sizing: border-box;
+ }
+
</style>
--
Gitblit v1.9.3