-
@@ -129,9 +162,13 @@ import farFocus from '@/assets/images/video/farFocus.png'
import amplify from '@/assets/images/video/amplify.png'
import shrink from '@/assets/images/video/shrink.png'
-import { getRemoteWatchDetail } from '@/api/risk/dailyTask'
+import { getRemoteWatchDetail, getRemoteWatchTime } from '@/api/risk/dailyTask'
import _ from 'lodash/fp'
+import flvjs from 'flv.js'
+import { videoConfig } from '@/views/risk/dailyTask/config/video'
+import moment from 'moment'
+
const tmp = {
bidName: '',
sgStatus: '',
@@ -156,6 +193,18 @@ export default {
props: ['componentVisible', 'currentId'],
data() {
return {
+ // 视频播放实例
+ videoPlayer: null,
+ startVideoStatus: false,
+ mediaRecorder: null,
+ recordedChunks: [],
+ videoUrl: null,
+ //
+ list: [],
+ listQuery: {
+ classId: '',
+ workDay: moment().format('YYYY-MM-DD')
+ },
detail: _.cloneDeep(tmp),
workerList: [],
operateIcon: {
@@ -188,9 +237,14 @@ export default {
visible(val) {
if (val) {
this.getList()
+ this.initVideo()
+ this.handleFilter()
}
}
},
+ mounted() {
+ // this.initVideo()
+ },
methods: {
getList() {
getRemoteWatchDetail({ classId: this.currentId }).then(res => {
@@ -200,8 +254,194 @@ export default {
})
},
handleCloseModal() {
- this.detail = _.cloneDeep(tmp)
this.workerList = []
+ this.list = []
+ this.detail = _.cloneDeep(tmp)
+ this.closeVideo()
+ },
+ handleFilter() {
+ this.listQuery.classId = this.currentId
+ getRemoteWatchTime(this.listQuery).then(res => {
+ this.list = res.data
+ })
+ },
+ // 初始化视频监控
+ initVideo() {
+ this.$nextTick(() => {
+ const videoElement = this.$refs.videoPlayer
+ const url = `${videoConfig.url}/stream.flv?puid=${videoConfig.puid}&idx=${videoConfig.idx}&stream=${videoConfig.stream}&token=${videoConfig.token}`
+ try {
+ this.videoPlayer = flvjs.createPlayer({
+ type: 'flv',
+ url: url,
+ isLive: true,
+ hasAudio: false
+ }, {
+ enableWorker: false,
+ autoCleanupSourceBuffer: true, // 清理缓冲区
+ enableStashBuffer: false,
+ stashInitialSize: 128, // 减少首桢显示等待时长
+ statisticsInfoReportInterval: 600
+ })
+
+ this.videoPlayer.attachMediaElement(videoElement)
+ this.videoPlayer.load()
+
+ setTimeout(() => {
+ this.videoPlayer.play()
+ }, 200)
+ } catch (err) {
+ console.log(err)
+ }
+ })
+ },
+ // 销毁视频监控
+ closeVideo() {
+ if (this.videoPlayer) {
+ this.videoPlayer.pause()
+ this.videoPlayer.unload()
+ this.videoPlayer.detachMediaElement()
+ this.videoPlayer.destroy()
+ }
+ },
+ // 抓拍
+ getPic() {
+ const video = this.$refs.videoPlayer
+ const canvas = document.createElement('canvas')
+ canvas.width = video.videoWidth
+ canvas.height = video.videoHeight
+ const context = canvas.getContext('2d')
+ context.drawImage(video, 0, 0, canvas.width, canvas.height)
+ const dataURL = canvas.toDataURL('image/png')
+ const link = document.createElement('a')
+ link.download = 'screenshot.png'
+ link.href = dataURL
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+ },
+ // 录像
+ handlePhoto() {
+ this.startVideoStatus = !this.startVideoStatus
+ if (this.startVideoStatus) { // 开始录像
+ this.$message({
+ showClose: true,
+ message: '录制中···',
+ type: 'success',
+ duration: 2000
+ })
+ this.startRecording()
+ } else { // 结束录像
+ this.$message({
+ showClose: true,
+ message: '结束录制并下载文件中···',
+ type: 'success',
+ duration: 2000
+ })
+ this.stopRecording()
+ }
+ },
+ startRecording() {
+ const videoPlayer = this.$refs.videoPlayer
+ const stream = videoPlayer.captureStream()
+ this.mediaRecorder = new MediaRecorder(stream)
+
+ this.mediaRecorder.ondataavailable = event => {
+ if (event.data.size > 0) {
+ this.recordedChunks.push(event.data)
+ }
+ }
+
+ this.mediaRecorder.onstop = () => {
+ const blob = new Blob(this.recordedChunks, { type: 'video/mp4' })
+ this.recordedChunks = []
+ this.videoUrl = URL.createObjectURL(blob)
+ this.downloadVideo() // 自动触发下载
+ }
+
+ this.mediaRecorder.start()
+ },
+ stopRecording() {
+ if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+ this.mediaRecorder.stop()
+ }
+ },
+ downloadVideo() {
+ const link = document.createElement('a')
+ link.href = this.videoUrl
+ link.download = 'recorded_video.mp4'
+ link.style.display = 'none'
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+ },
+ // 监控操作
+ handleControl(type) {
+ switch (type) {
+ case 'up':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'down':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'left':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'right':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'stopTurn':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'near':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'far':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'stopFocus':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'shrink':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'amplify':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'stopZoom':
+ videoConfig.handle(type, (res) => {
+ console.log(res)
+ })
+ break
+ case 'capture':
+ this.getPic()
+ break
+ case 'video':
+ this.handlePhoto()
+ break
+ default:
+ break
+ }
}
}
}
@@ -243,6 +483,7 @@ export default {
box-sizing: border-box;
.operate-left, .operate-right {
width: 15%;
+ text-align: center;
box-sizing: border-box;
}
.operate-center {
@@ -270,13 +511,25 @@ export default {
}
}
.watch-operate__keyboard {
- height: 40px;
+ flex: 1;
box-sizing: border-box;
+ padding-right: 10px;
}
}
.watch-play {
flex: 1;
height: 100%;
+ .video-player-wrap {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #000000;
+ .video-player {
+ width: 100%;
+ }
+ }
}
}
.main {
diff --git a/ah-jjzhgd-web/src/views/risk/dailyTask/config/video.js b/ah-jjzhgd-web/src/views/risk/dailyTask/config/video.js
new file mode 100644
index 0000000..332bc3e
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/risk/dailyTask/config/video.js
@@ -0,0 +1,124 @@
+import { handleVideoPost } from '@/api/video'
+
+// 清新视频监控配置
+export const videoConfig = {
+ url: 'http://220.248.250.31:29605/icvs2',
+ baseUrl: 'http://220.248.250.31:29605/icvs2',
+ // baseUrl: '/videoPlayer',
+ puid: '201115201616581263',
+ idx: 0,
+ stream: 0,
+ token: '123456',
+ handle: function(type, scb) {
+ let url = ''
+ let data = {}
+ switch (type) {
+ case 'up':
+ url = `${this.baseUrl}/PTZ/C_PTZ_Turn?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx,
+ motion: type
+ }
+ break
+ case 'down':
+ url = `${this.baseUrl}/PTZ/C_PTZ_Turn?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx,
+ motion: type
+ }
+ break
+ case 'left':
+ url = `${this.baseUrl}/PTZ/C_PTZ_Turn?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx,
+ motion: type
+ }
+ break
+ case 'right':
+ url = `${this.baseUrl}/PTZ/C_PTZ_Turn?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx,
+ motion: type
+ }
+ break
+ case 'stopTurn':
+ url = `${this.baseUrl}/PTZ/C_PTZ_Turn?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx,
+ motion: 'stop'
+ }
+ break
+ case 'near':
+ url = `${this.baseUrl}/PTZ/C_PTZ_MakeFocusNear?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx
+ }
+ break
+ case 'far':
+ url = `${this.baseUrl}/PTZ/C_PTZ_MakeFocusFar?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx
+ }
+ break
+ case 'stopFocus':
+ url = `${this.baseUrl}/PTZ/C_PTZ_StopFocusMove?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx
+ }
+ break
+ case 'shrink':
+ url = `${this.baseUrl}/PTZ/C_PTZ_ZoomOutPicture?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx
+ }
+ break
+ case 'amplify':
+ url = `${this.baseUrl}/PTZ/C_PTZ_ZoomInPicture?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx
+ }
+ break
+ case 'stopZoom':
+ url = `${this.baseUrl}/PTZ/C_PTZ_StopPictureZoom?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx
+ }
+ break
+ case 'startStorage':
+ url = `${this.baseUrl}/CSS/C_CSS_StartManualStorage?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx
+ }
+ break
+ case 'endStorage':
+ url = `${this.baseUrl}/CSS/C_CSS_StopManualStorage?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx
+ }
+ break
+ case 'loadStorage':
+ url = `${this.baseUrl}/CSS/C_CSS_QueryStorageFiles?token=${this.token}`
+ data = {
+ puid: this.puid,
+ idx: this.idx
+ }
+ break
+ default:
+ break
+ }
+ return handleVideoPost(url, data, scb)
+ }
+}
diff --git a/ah-jjzhgd-web/src/views/risk/dailyTask/index.vue b/ah-jjzhgd-web/src/views/risk/dailyTask/index.vue
index 5a8be58..239023d 100644
--- a/ah-jjzhgd-web/src/views/risk/dailyTask/index.vue
+++ b/ah-jjzhgd-web/src/views/risk/dailyTask/index.vue
@@ -37,10 +37,6 @@
导出
-
-
- 监控
-