视频相关

src/api/previewPlayback/index.js

@@ -9,3 +9,7 @@ export const getPreview = (query) => {
 export const controlling = (data) => {
 	return request('/controlling', data, 'get')
 }
+
+export const getPlayback = (data) => {
+	return request('/getPlayback', data, 'get')
+}

src/components/video/Live.vue

@@ -180,9 +180,25 @@
 		)
 	}
 
+	const findCameraByCameraId = (cameraId) => {
+		for (const root of cameraListData.value) {
+			const list = root.children || []
+			for (const d of list) {
+				if (d.cameraId == cameraId) {
+					return d
+				}
+			}
+		}
+		return undefined
+	}
+
 	const doControl = (command, action = 0, speed = 50, presetIndex = 10) => {
 		if (videoMap[currentWindowIndex]) {
 			const data = videoMap[currentWindowIndex]
+			const c = findCameraByCameraId(cameraId)
+			if (c.cameraType !== '1') {
+				return message.warning('该操作必须是球形摄像机')
+			}
 			const cmd = {
 				action,
 				command,
@@ -282,7 +298,6 @@
 		getOrgData()
 		init()
 		createPlayer()
-		getPreview({ cameraIndexCode: '0' })
 	})
 </script>
 

src/components/video/Replay.vue

@@ -1,5 +1,5 @@
 <script setup>
-	import { getPreview } from '@/api/previewPlayback'
+	import { getPlayback, getPreview } from '@/api/previewPlayback'
 	import { useRoute } from 'vue-router'
 	import commonSelect from '@/components/CommonSelector/index.vue'
 	import api from '@/api/orgInfo/info'
@@ -20,6 +20,7 @@
 	let videoMap = {}
 	let currentWindowIndex = 0
 	const mode = 0 // 0 普通模式  1 高级模式
+	const date = ref([])
 
 	const init = () => {
 		window.addEventListener('resize', () => {
@@ -171,11 +172,100 @@
 		})
 	}
 
+	const cameraSelect = (cameraId, event) => {
+		const camera = event.node
+		if (camera.root) return
+		console.log('选择摄像头', camera)
+		if (!date.value || date.value.length <= 0) {
+			return message.warning('请先选择日期')
+		}
+		const { cameraIndexCode } = camera
+		getPlaybackVideo({ cameraIndexCode }).then((resp) => {
+			const { url } = resp
+			if (url) {
+				const { startTime, endTime } = date.value
+				player.value.JS_Play(url, { playURL: url, mode }, 0, startTime, endTime).then(
+					() => {
+						console.log('playbackStart success')
+					},
+					(e) => {
+						console.error(e)
+					}
+				)
+			} else {
+				message.error('无法获取视频地址')
+			}
+		})
+	}
+
+	const getPlaybackVideo = ({ cameraIndexCode }) => {
+		const [beginTime, endTime] = date.value
+		return getPlayback({
+			beginTime,
+			endTime,
+			cameraIndexCode,
+			recordLocation: 1,
+			protocol: 'WSS'
+		})
+	}
+
+	const slow = () => {
+		player.value.JS_Slow().then(
+			(rate) => {
+				// this.playback.rate = rate
+			},
+			(e) => {
+				console.error(e)
+			}
+		)
+	}
+
+	const fast = () => {
+		player.value.JS_Fast().then(
+			(rate) => {
+				// this.playback.rate = rate
+			},
+			(e) => {
+				console.error(e)
+			}
+		)
+	}
+
+	const pause = () => {
+		player.value.JS_Pause().then(
+			() => {
+				console.log('playbackPause success')
+			},
+			(e) => {
+				console.error(e)
+			}
+		)
+	}
+
+	const resume = () => {
+		player.value.JS_Resume().then(
+			() => {
+				console.log('playbackResume success')
+			},
+			(e) => {
+				console.error(e)
+			}
+		)
+	}
+
+	const stop = () => {
+		player.value.JS_Stop().then(
+			() => {},
+			(e) => {
+				console.error(e)
+			}
+		)
+	}
+
 	onMounted(() => {
 		getOrgData()
 		init()
 		createPlayer()
-		getPreview({ cameraIndexCode: '0' })
 	})
 </script>
 
@@ -196,7 +286,7 @@
 		<div class="control w-[20%] h-full">
 			<a-tabs v-model:activeKey="activeKey">
 				<a-tab-pane key="1" tab="摄像头列表">
-					回放日期 <a-range-picker value-format="YYYY-MM-DD HH:mm:ss" show-time />
+					回放日期 <a-range-picker v-model:value="date" value-format="YYYY-MM-DDTHH:mm:ssZ" show-time />
 					<div class="mt-5">
 						<a-tree :tree-data="cameraListData" @select="cameraSelect" class="w-full">
 							<template #title="{ title, key }">
@@ -208,14 +298,13 @@
 				</a-tab-pane>
 				<a-tab-pane key="2" tab="操作" force-render>
 					<div class="row">
-						<a-button type="primary" class="mr-5 btn">&lt;&lt; 慢放</a-button>
-						<a-button type="primary" class="btn">快放 &gt;&gt;</a-button>
+						<a-button type="primary" class="mr-5 btn" @click="slow">&lt;&lt; 慢放</a-button>
+						<a-button type="primary" class="btn" @click="fast">快放 &gt;&gt;</a-button>
 					</div>
 					<div class="row">
-						<a-button type="primary" class="mr-1 w-[60px]">暂停</a-button>
-						<a-button type="primary" class="mr-1 w-[60px]">恢复</a-button>
-						<a-button type="primary" class="mr-1 w-[60px]">停止</a-button>
-						<a-button type="primary" class="w-[120px]">全部停止</a-button>
+						<a-button type="primary" class="mr-1 w-[60px]" @click="pause">暂停</a-button>
+						<a-button type="primary" class="mr-1 w-[60px]" @click="resume">恢复</a-button>
+						<a-button type="primary" class="mr-1 w-[60px]" @click="stop">停止</a-button>
 					</div>
 				</a-tab-pane>
 			</a-tabs>