From 3e2fcc570f8192aabdcc4721e521ee1341c73aa7 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期二, 12 十月 2021 13:59:18 +0800
Subject: [PATCH] 优化长春跟踪切换功能
---
src/components/player/wfs/controller/buffer-controller.js | 45 +-
src/pages/changchunTrack/components/VideoItem.vue | 142 +++++++---
src/pages/changchunTrack/index/Video.vue | 517 +++++----------------------------------
src/components/player/wfs/wfs.js | 29 -
4 files changed, 197 insertions(+), 536 deletions(-)
diff --git a/src/components/player/wfs/controller/buffer-controller.js b/src/components/player/wfs/controller/buffer-controller.js
index 3578198..31c5e27 100644
--- a/src/components/player/wfs/controller/buffer-controller.js
+++ b/src/components/player/wfs/controller/buffer-controller.js
@@ -2,17 +2,12 @@
* Buffer Controller
*/
/* eslint-disable */
-import Event from '../events';
-import EventHandler from '../event-handler';
+import Event from "../events";
+import EventHandler from "../event-handler";
class BufferController extends EventHandler {
constructor(wfs) {
- super(
- wfs,
- Event.MEDIA_ATTACHING,
- Event.BUFFER_APPENDING,
- Event.BUFFER_RESET
- );
+ super(wfs, Event.MEDIA_ATTACHING, Event.BUFFER_APPENDING, Event.BUFFER_RESET);
this.mediaSource = null;
this.media = null;
@@ -27,10 +22,10 @@
this.onsbue = this.onSBUpdateEnd.bind(this);
this.browserType = 0;
- if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
+ if (navigator.userAgent.toLowerCase().indexOf("firefox") !== -1) {
this.browserType = 1;
}
- this.mediaType = 'H264Raw';
+ this.mediaType = "H264Raw";
this.websocketName = undefined;
this.channelName = undefined;
@@ -54,9 +49,9 @@
this.onmso = this.onMediaSourceOpen.bind(this);
this.onmse = this.onMediaSourceEnded.bind(this);
this.onmsc = this.onMediaSourceClose.bind(this);
- ms.addEventListener('sourceopen', this.onmso);
- ms.addEventListener('sourceended', this.onmse);
- ms.addEventListener('sourceclose', this.onmsc);
+ ms.addEventListener("sourceopen", this.onmso);
+ ms.addEventListener("sourceended", this.onmse);
+ ms.addEventListener("sourceclose", this.onmsc);
// link video and media Source
media.src = URL.createObjectURL(ms);
}
@@ -78,7 +73,7 @@
}
onMediaSourceEnded() {
- console.log('media source ended');
+ console.log("media source ended");
}
onSBUpdateEnd(event) {
@@ -99,10 +94,10 @@
let mediaSource = this.mediaSource;
if (mediaSource) {
// once received, don't listen anymore to sourceopen event
- mediaSource.removeEventListener('sourceopen', this.onmso);
+ mediaSource.removeEventListener("sourceopen", this.onmso);
}
- if (this.mediaType === 'FMp4') {
+ if (this.mediaType === "FMp4") {
this.checkPendingTracks();
}
@@ -116,13 +111,13 @@
}
checkPendingTracks() {
- this.createSourceBuffers({ tracks: 'video', mimeType: '' });
+ this.createSourceBuffers({ tracks: "video", mimeType: "" });
this.pendingTracks = {};
}
onBufferReset(data) {
- if (this.mediaType === 'H264Raw') {
- this.createSourceBuffers({ tracks: 'video', mimeType: data.mimeType });
+ if (this.mediaType === "H264Raw") {
+ this.createSourceBuffers({ tracks: "video", mimeType: data.mimeType });
}
}
@@ -130,15 +125,15 @@
var sourceBuffer = this.sourceBuffer,
mediaSource = this.mediaSource;
let mimeType;
- if (tracks.mimeType === '') {
- mimeType = 'video/mp4;codecs=avc1.420028'; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
+ if (tracks.mimeType === "") {
+ mimeType = "video/mp4;codecs=avc1.420028"; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
} else {
- mimeType = 'video/mp4;codecs=' + tracks.mimeType;
+ mimeType = "video/mp4;codecs=" + tracks.mimeType;
}
try {
- let sb = (sourceBuffer['video'] = mediaSource.addSourceBuffer(mimeType));
- sb.addEventListener('updateend', this.onsbue);
+ let sb = (sourceBuffer["video"] = mediaSource.addSourceBuffer(mimeType));
+ sb.addEventListener("updateend", this.onsbue);
track.buffer = sb;
} catch (err) {}
this.wfs.trigger(Event.BUFFER_CREATED, { tracks: tracks });
@@ -161,6 +156,8 @@
return;
}
+ wfs.playerStatus = 1;
+
if (segments && segments.length) {
var segment = segments.shift();
try {
diff --git a/src/components/player/wfs/wfs.js b/src/components/player/wfs/wfs.js
index 51a5761..c7a42ea 100644
--- a/src/components/player/wfs/wfs.js
+++ b/src/components/player/wfs/wfs.js
@@ -2,28 +2,26 @@
* WFS interface, Jeff Yang 2016.10
*/
/* eslint-disable */
-'use strict';
+"use strict";
-import Event from './events';
-import FlowController from './controller/flow-controller';
-import BufferController from './controller/buffer-controller';
-import EventEmitter from 'events';
+import Event from "./events";
+import FlowController from "./controller/flow-controller";
+import BufferController from "./controller/buffer-controller";
+import EventEmitter from "events";
// import XhrLoader from './utils/xhr-loader';
-import WebsocketLoader from './loader/websocket-loader';
+import WebsocketLoader from "./loader/websocket-loader";
class Wfs {
static get version() {
// replaced with browserify-versionify transform
- return '__VERSION__' + 'v.0.0.0.1';
+ return "__VERSION__" + "v.0.0.0.1";
}
static isSupported() {
return (
window.MediaSource &&
- typeof window.MediaSource.isTypeSupported === 'function' &&
- window.MediaSource.isTypeSupported(
- 'video/mp4; codecs="avc1.42c01f,mp4a.40.2"'
- )
+ typeof window.MediaSource.isTypeSupported === "function" &&
+ window.MediaSource.isTypeSupported('video/mp4; codecs="avc1.42c01f,mp4a.40.2"')
);
}
@@ -86,6 +84,7 @@
this.websocketLoader = new WebsocketLoader(this);
this.mediaType = undefined;
this.cameraInfo = {};
+ this.playerStatus = -1;
}
destroy() {
@@ -95,13 +94,7 @@
this.websocketLoader.destroy();
}
- attachMedia(
- media,
- channelName = 'chX',
- mediaType = 'H264Raw',
- websocketName = 'ws',
- cameraInfo = {}
- ) {
+ attachMedia(media, channelName = "chX", mediaType = "H264Raw", websocketName = "ws", cameraInfo = {}) {
// 'H264Raw' 'FMp4'
this.mediaType = mediaType;
this.media = media;
diff --git a/src/pages/changchunTrack/components/VideoItem.vue b/src/pages/changchunTrack/components/VideoItem.vue
index c6b9893..34df410 100644
--- a/src/pages/changchunTrack/components/VideoItem.vue
+++ b/src/pages/changchunTrack/components/VideoItem.vue
@@ -6,10 +6,7 @@
@mouseenter.stop.prevent="videoMouseEnter($event)"
@mouseleave="videoMouseLeave($event)"
>
- <div
- class="video-box-top"
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null"
- >
+ <div class="video-box-top" v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null">
<b>{{ videoItem.name }}</b>
<span @click="deleteVideo(videoIndex)">脳</span>
</div>
@@ -35,23 +32,34 @@
:isRunning="videoItem.isRunning"
:isGb="videoItem.cameraType === 1"
:showArea="showArea"
- :hasPoster="hasPoster"
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='camera'"
+ v-if="!quietSwitch && videoItem !== '' && videoItem !== undefined && videoItem !== null"
></camera-player>
-
- <video
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='dataStack'"
- :src="videoItem.rtsp"
- autoplay="autoplay"
- poster="/images/cameraVideo/video-poster.png"
- controls
- >鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
+ <camera-player
+ :cameraName="qsVideoItem0.name"
+ :cameraID="qsVideoItem0.id"
+ :rtspUrl="qsVideoItem0.rtsp"
+ :isRunning="qsVideoItem0.isRunning"
+ :isGb="qsVideoItem0.cameraType === 1"
+ v-show="quietSwitch && workPlayer === 0"
+ ref="qsPlayer0"
+ v-if="qsVideoItem0 !== '' && qsVideoItem0 !== undefined && qsVideoItem0 !== null"
+ ></camera-player>
+ <camera-player
+ :cameraName="qsVideoItem1.name"
+ :cameraID="qsVideoItem1.id"
+ :rtspUrl="qsVideoItem1.rtsp"
+ :isRunning="qsVideoItem1.isRunning"
+ :isGb="qsVideoItem1.cameraType === 1"
+ v-show="quietSwitch && workPlayer === 1"
+ ref="qsPlayer1"
+ v-if="qsVideoItem1 !== '' && qsVideoItem1 !== undefined && qsVideoItem1 !== null"
+ ></camera-player>
</div>
</div>
</template>
<script>
-import { ptzControl } from "@/api/camera"
+import { ptzControl } from "@/api/camera";
import CameraPlayer from "@/components/player";
@@ -67,42 +75,92 @@
videoIndex: null,
starW: {
type: String,
- default: ''
+ default: ""
},
- starH:{
+ starH: {
type: String,
- default: ''
+ default: ""
},
videoItem: {
type: [Object, String],
default: null
},
- showArea: Boolean,
- hasPoster: Boolean,
+ showArea: {
+ type: Boolean,
+ default: false
+ },
+ quietSwitch: {
+ type: Boolean,
+ default: false
+ }
},
data() {
return {
- timer: '',
+ timer: "",
mouseDown: false,
- videoDataItem: null
- }
+ workPlayer: -1,
+ qsVideoItem0: null,
+ qsVideoItem1: null,
+ checkStatusTimer: 0
+ };
},
computed: {
vWidth() {
- if (this.starW!=0) {
- return this.starW
-
+ if (this.starW != 0) {
+ return this.starW;
}
let per = (1 / this.videoGuid) * 100 + "%";
return `calc(${per} - 4px)`;
},
-
+
vHeight() {
- if (this.starH!=0) {
- return this.starH
+ if (this.starH != 0) {
+ return this.starH;
}
let per = (1 / this.videoGuid) * 100 + "%";
return `calc(${per} - 4px)`;
+ }
+ },
+ watch: {
+ videoItem: function(newVal, oldVal) {
+ if (!this.quietSwitch) {
+ return;
+ }
+
+ console.log("new rtsp:", newVal);
+ console.log("this.workPlayer:", this.workPlayer);
+ // 棣栨
+ if (this.workPlayer < 0) {
+ this.workPlayer = 0;
+ this.qsVideoItem0 = newVal;
+ return;
+ }
+
+ let _this = this;
+ clearInterval(_this.checkStatusTimer);
+
+ if (_this.workPlayer == 0) {
+ _this.qsVideoItem1 = newVal;
+ _this.checkStatusTimer = setInterval(() => {
+ // console.log(_this.$refs.qsPlayer1.wfs.playerStatus);
+ if (_this.$refs.qsPlayer1.wfs.playerStatus == 1) {
+ _this.workPlayer = 1;
+ _this.qsVideoItem0 = null;
+ clearInterval(_this.checkStatusTimer);
+ }
+ }, 1000);
+ }
+
+ if (_this.workPlayer == 1) {
+ _this.qsVideoItem0 = newVal;
+ _this.checkStatusTimer = setInterval(() => {
+ if (_this.$refs.qsPlayer0.wfs.playerStatus == 1) {
+ _this.workPlayer = 0;
+ _this.qsVideoItem1 = null;
+ clearInterval(_this.checkStatusTimer);
+ }
+ }, 1000);
+ }
}
},
methods: {
@@ -113,42 +171,40 @@
// 褰撳墠鍙敮鎸佸浗鏍囨憚鍍忔満
// console.log(type, 'ptCtrl')
if (this.videoItem.cameraType != 1) {
- return
+ return;
}
this.mouseDown = true;
let params = {
cameraId: this.videoItem.id,
cameraType: this.videoItem.cameraType,
PTZType: type
- }
- ptzControl(params).then(rsp => {
+ };
+ ptzControl(params).then((rsp) => {
// console.log(rsp)
- })
- let that = this
+ });
+ let that = this;
this.timer = setTimeout(() => {
- that.ptStop()
- }, 5000)
+ that.ptStop();
+ }, 5000);
},
ptStop() {
// 褰撳墠鍙敮鎸佸浗鏍囨憚鍍忔満
if (this.videoItem.cameraType != 1) {
- return
+ return;
}
let params = {
cameraId: this.videoItem.id,
cameraType: this.videoItem.cameraType,
PTZType: "stop"
- }
+ };
if (this.mouseDown) {
- this.mouseDown = false
- ptzControl(params).then(rsp => {
+ this.mouseDown = false;
+ ptzControl(params).then((rsp) => {
// console.log(rsp)
- })
+ });
}
},
deleteVideo(index) {
- let video = this.TreeDataPool.videoArr;
- video[index].isPlaying = false;
this.TreeDataPool.setVideoArr(index, undefined, this);
},
videoMouseEnter(e) {
diff --git a/src/pages/changchunTrack/index/Video.vue b/src/pages/changchunTrack/index/Video.vue
index 11bba5b..1f1b84a 100644
--- a/src/pages/changchunTrack/index/Video.vue
+++ b/src/pages/changchunTrack/index/Video.vue
@@ -3,44 +3,13 @@
<div class="monitoring-right" ref="videoRight">
<div class="main-top">
<div class="monitoring-video" ref="monitorVideo">
- <!-- <div class="monitoring-video-guid">
- <span
- :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
- @click="setGuid(1)"
- ></span>
- <span
- :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
- @click="setGuid(2)"
- ></span>
- <span
- :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
- @click="setGuid(3)"
- ></span>
- <el-tooltip v-if="TreeDataPool.selectedNode.id" :content="`${showArea?'闅愯棌鍖哄煙':'鏌ョ湅鍖哄煙'}`" placement="bottom" popper-class="atooltip">
- <span :class="showArea?'activegongge':''" class="iconfont iconquyu" @click="toggleShowArea"></span>
- </el-tooltip>
- </div> -->
<div class="fixedRatioBox">
- <div
- class="video-main-box-side"
- v-if="visibilityState && allVideoNum == 5"
- >
+ <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 5">
<VideoItem
- :videoGuid="guid"
:starW="`calc(66.66% - 4px)`"
:starH="`calc(66.66% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
- v-show="!showBackup"
- class="activeItem"
- ></VideoItem>
- <VideoItem
- :videoGuid="guid"
- :starW="`calc(66.66% - 4px)`"
- :starH="`calc(66.66% - 4px)`"
- :videoItem="BackupVideo"
- :showArea="showArea"
- v-show="showBackup"
+ quietSwitch
class="activeItem"
></VideoItem>
<VideoItem
@@ -49,21 +18,17 @@
:videoGuid="guid"
:videoIndex="index"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
- <div
- class="video-main-box-side"
- v-if="visibilityState && allVideoNum == 7"
- >
+ <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 7">
<VideoItem
:videoGuid="guid"
:starW="`calc(74.99% - 4px)`"
:starH="`calc(74.99% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
+ quietSwitch
class="activeItem"
></VideoItem>
@@ -73,15 +38,11 @@
:videoGuid="guid"
:videoIndex="index"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
- <div
- class="video-main-box-side"
- v-if="visibilityState && allVideoNum == 12"
- >
+ <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 12">
<div style="width: 100%; height: 25%">
<VideoItem
v-for="(item, index) in TreeDataPool.videoArr.slice(0, 4)"
@@ -91,7 +52,6 @@
:starW="`calc(24.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -104,7 +64,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(50% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -113,19 +72,8 @@
:starW="`calc(50% - 4px)`"
:starH="`calc(50% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
- :hasPoster="false"
+ quietSwitch
></VideoItem>
- <!-- <VideoItem
- :videoGuid="guid"
- :starW="`calc(50% - 4px)`"
- :starH="`calc(50% - 4px)`"
- :videoItem="centerVideo"
- :showArea="showArea"
- class="activeItem"
- v-if="!showSub"
-
- ></VideoItem> -->
<div style="width: 25%; height: 50%; float: left">
<VideoItem
@@ -136,7 +84,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(50% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -149,16 +96,12 @@
:starW="`calc(24.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
</div>
- <div
- class="video-main-box-side"
- v-if="visibilityState && allVideoNum == 16"
- >
+ <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 16">
<div style="width: 100%; height: 20%">
<!-- :class="[
TreeDataPool.activeVideoIndex === index + 1
@@ -174,7 +117,6 @@
:starW="`calc(19.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -187,7 +129,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -196,7 +137,7 @@
:starW="`calc(60% - 4px)`"
:starH="`calc(60% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
+ quietSwitch
class="activeItem"
></VideoItem>
<div style="width: 20%; height: 60%; float: left">
@@ -208,7 +149,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -221,7 +161,6 @@
:starW="`calc(19.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -235,42 +174,34 @@
<script>
import VideoItem from "../components/VideoItem";
-import { getCameraPlayList, showAllCameras } from "@/api/trackCamera";
+import { showAllCameras } from "@/api/trackCamera";
export default {
name: "Video",
components: {
- VideoItem,
+ VideoItem
+ },
+ computed: {
+ nextIndex() {
+ if (this.centerIndex == this.list2TakeTurn.length - 1) {
+ return 0;
+ }
+ return this.centerIndex + 1;
+ }
},
data() {
return {
guid: 3,
- center: "",
- defaultHeight: 432,
- defaultWidth: 600,
- track: false,
- traceCache: {},
- traceTimer: null,
- tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${
- location.host
- }/track`,
- websocket: null,
visibilityState: true,
- showArea: false,
- videoNum2Play: 0,
+ allVideoNum: 5,
centerVideo: null,
- BackupVideo: null,
list2TakeTurn: [],
timer: null,
reqTimer: null,
- centerIndex: 0,
- showBackup: false,
+ centerIndex: 0
};
},
created() {
- this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
- ? Number(sessionStorage.activeIndex)
- : this.TreeDataPool.activeVideoIndex;
this.getActiveIndex();
this.TreeDataPool.readonly = true;
this.TreeDataPool.gbReadonly = true;
@@ -278,19 +209,9 @@
},
mounted() {
document.addEventListener("visibilitychange", this.visibilitychange, false);
- this.$nextTick(() => {
- window.addEventListener("resize", this.resizeMonitorTask);
- //this.getRightWidth();
- this.resizeMonitorTask();
- });
- this.getCenter();
- this.blackAngWhite();
- this.VideoPhotoData.queryTagList();
- // let
- // this.TreeDataPool.getAllChildrenNodes()
showAllCameras()
.then((res) => {
- this.videoNum2Play = res.data.length;
+ this.setAllVideoNum(res.data.length);
res.data.forEach((info, i) => {
let camera = this.TreeDataPool.getCameraInfoById(info.id);
this.TreeDataPool.setVideoArr(i, camera, this);
@@ -311,40 +232,52 @@
},
beforeDestroy() {
window.removeEventListener("resize", this.getRightWidth);
- this.CardList.details = [];
window.clearInterval(this.trackTimer);
- if (this.websocket) {
- this.websocket.close();
- }
},
watch: {
- "TreeDataPool.videoArr": function (newArry) {
- const cameras = this.filterNodes(newArry);
+ "TreeDataPool.videoArr"(value) {
this.getActiveIndex();
- },
- "VideoPhotoData.selectBlacks": function (value) {
- this.blackAngWhite();
- },
- "VideoPhotoData.selectWhites": function (value) {
- this.blackAngWhite();
},
"TreeDataPool.showTreeBox"(value) {
this.getRightWidth();
},
"TreeDataPool.selectedNodes.length"(value) {
+ this.getActiveIndex();
this.list2TakeTurn = [];
- this.videoNum2Play = this.TreeDataPool.selectedNodes.length;
- this.TreeDataPool.selectedNodes.forEach((id, i) => {
- let camera = this.TreeDataPool.getCameraInfoById(id);
- this.TreeDataPool.setVideoArr(i, camera, this);
+ this.setAllVideoNum(this.TreeDataPool.selectedNodes.length);
+ this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, this.TreeDataPool.selectedNode, this);
- if (camera.status >= 1) {
- this.list2TakeTurn.push(camera);
- }
- });
- },
+ // this.TreeDataPool.selectedNodes.forEach((id, i) => {
+ // let camera = this.TreeDataPool.getCameraInfoById(id);
+ // this.TreeDataPool.setVideoArr(i, camera, this);
+
+ // if (camera.status >= 1) {
+ // this.list2TakeTurn.push(camera);
+ // }
+ // });
+
+ this.centerVideo = { ...this.TreeDataPool.selectedNode };
+ }
},
methods: {
+ setAllVideoNum(videoCount) {
+ if (videoCount <= 5) {
+ this.guid = 3;
+ this.allVideoNum = 5;
+ } else if (videoCount <= 7) {
+ this.guid = 4;
+ this.allVideoNum = 7;
+ } else if (videoCount <= 12) {
+ this.guid = 4;
+ this.allVideoNum = 12;
+ } else if (videoCount <= 16) {
+ this.guid = 5;
+ this.allVideoNum = 16;
+ } else {
+ this.guid = 5;
+ this.allVideoNum = 16;
+ }
+ },
isSame(arr1, arr2) {
let _arr1 = [];
arr1.forEach((item) => {
@@ -360,35 +293,21 @@
}
return true;
},
- centerPlay(typ) {
+ centerPlay() {
if (this.list2TakeTurn.length == 1) {
- this.centerVideo = this.list2TakeTurn[0];
+ this.centerVideo = { ...this.list2TakeTurn[0] };
return;
}
let that = this;
- // if () {
-
- // }
- if (typ == 'change') {
- this.showBackup = true;
- }
- that.centerVideo = that.list2TakeTurn[that.centerIndex];
+ that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
that.centerIndex++;
if (that.centerIndex == that.list2TakeTurn.length) {
that.centerIndex = 0;
}
- if (typ == 'change') {
- setTimeout(() => {
- this.showBackup = false;
- that.BackupVideo = that.centerVideo;
- }, 2000);
- }else{
- that.BackupVideo = that.centerVideo;
- }
clearInterval(this.timer);
this.timer = setInterval(() => {
- that.centerVideo = that.list2TakeTurn[that.centerIndex];
+ that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
that.centerIndex++;
if (that.centerIndex == that.list2TakeTurn.length) {
that.centerIndex = 0;
@@ -413,143 +332,10 @@
if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
this.list2TakeTurn = [...newArr1];
this.centerIndex = 0;
- this.centerPlay('change');
+ this.centerPlay("change");
}
});
}, 2500);
- },
- initTrackWebsocket() {
- if (typeof WebSocket === "undefined") {
- alert("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔socket");
- } else {
- // 瀹炰緥鍖杝ocket
- this.websocket = new WebSocket(this.tracePubUrl);
- // 鐩戝惉socket娑堟伅
- this.websocket.onopen = this.websocketonopen;
- this.websocket.onmessage = this.recvieTrackMessage;
- }
- },
- websocketonopen() {
- //杩炴帴寤虹珛涔嬪悗鎵цsend鏂规硶鍙戦�佹暟鎹�
- this.websocket.send("sub");
- },
- tracking() {
- getCameraPlayList().then((data) => {
- if (data && data.length) {
- data.forEach((ins) => {
- let newCamera = this.TreeDataPool.getCameraInfoById(
- ins.NewCameraId
- );
- if (!newCamera) {
- console.log("鏈煡鎵惧埌鎽勫儚鏈猴細", ins.NewCameraId);
- return;
- }
- if (ins.IsNew) {
- this.newPlayerInViewBox(newCamera);
- } else {
- this.replacePlayer(newCamera, ins.OldCameraId);
- }
- });
- }
- });
- },
- recvieTrackMessage(e) {
- let dataJson = JSON.parse(e.data);
- let cache = this.traceCache;
- let camera = dataJson.camera;
- let person = dataJson.person;
- let create = false;
-
- // 濡傛灉鏄凡缁忓湪鎾斁鐨勬憚鍍忔満, 鐩存帴杩斿洖
- if (cache[camera]) {
- cache[camera][person] = 10;
- return;
- }
-
- cache[camera] = {};
- cache[camera][person] = 10;
-
- // 鏌ヨ鎾斁璇ヤ汉鐨勪笂涓�涓憚鍍忔満
- for (var cam in cache) {
- if (cam === camera) {
- continue;
- }
-
- if (cache[cam][person]) {
- // 鎵惧埌涓婁竴涓憚鍍忔満, 鍒ゆ柇鎽勫儚鏈洪噷鏄惁杩樻湁鍏朵粬浜�, 鏈�:鏂板紑鎾斁鍣� 娌℃湁:鍒囨崲
- console.log("last camera:", cam, Object.keys(cache[cam]).length);
- if (Object.keys(cache[cam]).length > 2) {
- delete cache[cam][person];
- this.newPlayerInViewBox(camera);
- return;
- } else {
- this.replacePlayer(camera, cam);
- delete cache[cam];
- return;
- }
- }
- }
-
- // 鏈彂鐜版挱鏀捐褰�
- this.newPlayerInViewBox(camera);
- },
- newPlayerInViewBox(id) {
- // 鏂板鎾斁绐楀彛
- let camera = this.TreeDataPool.getCameraInfoById(id);
- let emptyIndex = -1;
- let exist = false;
- for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
- // eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] === "" ||
- this.TreeDataPool.videoArr[i] === undefined
- ) {
- if (emptyIndex === -1) {
- emptyIndex = i;
- }
- } else {
- if (this.TreeDataPool.videoArr[i].id === camera.id) {
- exist = true;
- }
- }
- }
- if (!exist && emptyIndex !== -1) {
- this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
- }
- },
- replacePlayer(id, oldCameraId) {
- let camera = this.TreeDataPool.getCameraInfoById(id);
- // 鏇挎崲鎾斁鍣�
- for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
- // eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] &&
- this.TreeDataPool.videoArr[i] !== undefined &&
- this.TreeDataPool.videoArr[i] !== ""
- ) {
- if (this.TreeDataPool.videoArr[i].id === oldCameraId) {
- this.TreeDataPool.setVideoArr(i, camera, this);
- return true;
- }
- }
- }
-
- return false;
- },
- closePlayer(id) {
- for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
- // eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] &&
- this.TreeDataPool.videoArr[i] !== undefined &&
- this.TreeDataPool.videoArr[i] !== ""
- ) {
- if (this.TreeDataPool.videoArr[i].id === id) {
- this.TreeDataPool.setVideoArr(i, undefined, this);
- return true;
- }
- }
- }
},
visibilitychange() {
switch (document.visibilityState) {
@@ -561,198 +347,27 @@
break;
}
},
- blackAngWhite() {
- if (this.VideoPhotoData.selectBlacks.length > 0) {
- for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
- this.$set(this.VideoPhotoData.whiteList[i], "disabled", true);
- }
- }
- if (this.VideoPhotoData.selectBlacks.length == 0) {
- for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
- this.$set(this.VideoPhotoData.whiteList[i], "disabled", false);
- }
- }
- if (this.VideoPhotoData.selectWhites.length > 0) {
- for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
- this.$set(this.VideoPhotoData.blackList[i], "disabled", true);
- }
- }
- if (this.VideoPhotoData.selectWhites.length == 0) {
- for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
- this.$set(this.VideoPhotoData.blackList[i], "disabled", false);
- }
- }
- },
- closeWindow(index) {
- this.CardList.addBaseList.splice(index, 1);
- },
- getVideoHeight() {
- let h = this.$refs.monitorVideo.offsetHeight;
- // this.$refs.monitorTask.style.height = h + "px";
- },
- resizeMonitorTask() {
- this.getRightWidth();
- this.getVideoHeight();
- },
- getRightWidth() {
- let w = this.$refs.videoRight.offsetWidth;
- // this.$refs.monitorTask.style.width =w - this.$refs.monitorVideo.offsetWidth - 40 + "px";
- },
- filterNodes(selectArry) {
- let nodes = [];
- selectArry.forEach((i) => {
- if (i && nodes.indexOf(i.id) < 0) {
- nodes.push(i.id);
- }
- });
- return nodes;
- },
videoItemClick(index) {
this.TreeDataPool.activeVideoIndex = index;
this.TreeDataPool.activeForceChoose = true;
- },
- toAdd(item) {
- this.CardList.addBaseList.push(item);
- },
- getCenter() {
- this.center = {
- x: document.documentElement.clientWidth / 2 - 250,
- y: document.documentElement.clientHeight / 2 - 200,
- };
- },
- resizeWidth(w) {
- this.defaultWidth = w;
- },
- resizeHeight(h) {
- this.defaultHeight = h;
- },
- saveAddBase(item, index) {
- if (
- this.VideoPhotoData.selectBlacks.length === 0 &&
- this.VideoPhotoData.selectWhites.length === 0
- ) {
- this.$notify({
- title: "娉ㄦ剰",
- message: "璇烽�夋嫨瑕佹坊鍔犵殑搴曞簱",
- type: "warning",
- });
- return;
- }
- let res = this.VideoPhotoData.addBase(item);
- res.then((data) => {
- console.log("then", data);
- if (data.success) {
- this.$notify({
- title: "鎴愬姛",
- message: data.data,
- type: "success",
- });
- } else {
- this.$notify({
- title: "澶辫触",
- message: data.data,
- type: "error",
- });
- }
- this.CardList.addBaseList.splice(index, 1);
- this.VideoPhotoData.selectBlacks = [];
- this.VideoPhotoData.selectWhites = [];
- });
},
getActiveIndex() {
this.TreeDataPool.videoArr.length = this.allVideoNum;
let nullVideoIndex = "";
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
// eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] === "" ||
- this.TreeDataPool.videoArr[i] === undefined
- ) {
+ if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
nullVideoIndex = i;
- } else {
- nullVideoIndex = "";
+ break;
}
}
- if (
- this.TreeDataPool.activeVideoIndex !== "" &&
- this.TreeDataPool.activeVideoIndex <
- this.TreeDataPool.videoArr.length - 1
- ) {
- return this.TreeDataPool.activeVideoIndex;
+ if (nullVideoIndex === "") {
+ this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1;
} else {
- if (nullVideoIndex === "") {
- this.TreeDataPool.activeVideoIndex =
- this.TreeDataPool.videoArr.length - 1;
- } else {
- this.TreeDataPool.activeVideoIndex = nullVideoIndex;
- }
+ this.TreeDataPool.activeVideoIndex = nullVideoIndex;
}
- },
- setGuid(value) {
- clearTimeout(this.trackTimer);
- if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
- // eslint-disable-next-line
- for (
- let i = this.TreeDataPool.activeVideoIndex - 1;
- i < this.TreeDataPool.videoArr.length;
- i++
- ) {
- // eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] &&
- this.TreeDataPool.videoArr[i]["isPlaying"]
- ) {
- this.TreeDataPool.videoArr[i]["isPlaying"] = false;
- }
- }
- }
- this.guid = value;
- sessionStorage.guid = this.guid;
- sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
- this.getActiveIndex();
- },
- toggleShowArea() {
- this.showArea = !this.showArea;
- },
- },
- destroyed() {
- window.removeEventListener("resize", this.getRightWidth);
- // this.CardList.details = [];
- this.CardList.addBaseList = [];
- this.VideoPhotoData.selectBlacks = [];
- this.VideoPhotoData.selectWhites = [];
- },
- computed: {
- allVideoNum() {
- if (this.videoNum2Play <= 5) {
- this.guid = 3;
- return 5;
- }
-
- if (this.videoNum2Play <= 7) {
- this.guid = 4;
- return 7;
- }
-
- if (this.videoNum2Play <= 12) {
- this.guid = 4;
- return 12;
- }
-
- if (this.videoNum2Play <= 16) {
- this.guid = 5;
- return 16;
- }
- this.guid = 5;
- return 16;
- },
- nextIndex() {
- if (this.centerIndex == this.list2TakeTurn.length - 1) {
- return 0;
- }
- return this.centerIndex + 1;
- },
- },
+ }
+ }
};
</script>
--
Gitblit v1.8.0