初始化
This commit is contained in:
parent
4bfe398237
commit
b0034fc8b2
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
5
README.md
Normal file
5
README.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||
16
index.html
Normal file
16
index.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<title>实时监控</title>
|
||||
<script src="/crypto-js.js"></script>
|
||||
<script src="/mqtt.min.js"></script>
|
||||
<script src="/ZLMRTCClient.js"></script>
|
||||
<script src="_framework/hybridwebview.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1247
package-lock.json
generated
Normal file
1247
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
package.json
Normal file
22
package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "live-mobile",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.30"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.12.0",
|
||||
"@vitejs/plugin-vue": "^6.0.5",
|
||||
"@vue/tsconfig": "^0.9.0",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^8.0.1",
|
||||
"vue-tsc": "^3.2.5"
|
||||
}
|
||||
}
|
||||
9472
public/ZLMRTCClient.js
Normal file
9472
public/ZLMRTCClient.js
Normal file
File diff suppressed because it is too large
Load Diff
5988
public/crypto-js.js
Normal file
5988
public/crypto-js.js
Normal file
File diff suppressed because it is too large
Load Diff
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
public/icons.svg
Normal file
24
public/icons.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
12
public/mqtt.min.js
vendored
Normal file
12
public/mqtt.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
405
src/App.vue
Normal file
405
src/App.vue
Normal file
@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<!-- 顶部导航 -->
|
||||
<header class="nav-bar">
|
||||
<span class="nav-title">实时监控</span>
|
||||
<!-- <button class="layout-btn" @click="toggleLayout">
|
||||
{{ layout === 1 ? '⊞ 四画面' : '⊡ 单画面' }}
|
||||
</button> -->
|
||||
</header>
|
||||
|
||||
<!-- 视频区域 -->
|
||||
<main class="video-area" :class="layout === 1 ? 'layout-1' : 'layout-4'">
|
||||
<VideoBox
|
||||
v-for="i in layout"
|
||||
:key="i - 1"
|
||||
:ref="(el) => setBoxRef(el, i - 1)"
|
||||
:source="playingSources[i - 1] ? sourcesMap[playingSources[i - 1]!] : null"
|
||||
:server-ip="config.serverIp"
|
||||
:media-port="config.media_http_api"
|
||||
@close="closeVideo(i - 1)"
|
||||
@ready="onVideoReady($event, i - 1)"
|
||||
/>
|
||||
</main>
|
||||
|
||||
<!-- 底部摄像头列表抽屉 -->
|
||||
<div class="drawer-handle" @click="toggleDrawer">
|
||||
<span>{{ drawerOpen ? '▼ 收起' : '▲ 摄像头列表' }}</span>
|
||||
</div>
|
||||
<transition name="slide-up">
|
||||
<div class="drawer" v-if="drawerOpen">
|
||||
<div class="source-list">
|
||||
<div
|
||||
v-for="source in sourceList"
|
||||
:key="source.id"
|
||||
class="source-item"
|
||||
:class="{ active: isPlaying(source.id) }"
|
||||
@click="toggleSource(source.id)"
|
||||
>
|
||||
<span class="source-dot" :class="{ on: isPlaying(source.id) }"></span>
|
||||
<span class="source-name">{{ source.desc }}</span>
|
||||
<span class="source-badge" v-if="isPlaying(source.id)">播放中</span>
|
||||
</div>
|
||||
<div v-if="sourceList.length === 0" class="empty-tip">暂无摄像头</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
||||
import VideoBox from './components/VideoBox.vue'
|
||||
import { createApis } from './api'
|
||||
import type { GlobalConfig, SourceItem, VideoInfo } from './types'
|
||||
|
||||
declare const mqtt: any
|
||||
|
||||
const deviceId = 'fcfabf1d5dd036033419057075a56304' // 设备 ID，实际使用中可动态获取
|
||||
|
||||
const config = reactive<GlobalConfig>({
|
||||
serverIp: '118.145.200.78',
|
||||
getSources: ':3000/ks/source',
|
||||
subscribe: ':3000/stream/live/subscribe',
|
||||
resultTopic: 'ks/video_detection',
|
||||
streamInfoTopic: 'ks/stream_local',
|
||||
media_http_api: 3001,
|
||||
websocket: 8083,
|
||||
mqttAuth: ['work', 'Bjhmdys@202010'],
|
||||
accessKey: '6952564ceb712e2daeea7039',
|
||||
accessSecret: 'df717a60-85b7-4a63-b638-0aed4605d277',
|
||||
token: '',
|
||||
getToken: ':3000/ks/system/user/token',
|
||||
getTime: ':3000/ks/system/time',
|
||||
})
|
||||
|
||||
const layout = ref<1 | 4>(1)
|
||||
const drawerOpen = ref(false)
|
||||
const sourceList = ref<SourceItem[]>([])
|
||||
const sourcesMap = reactive<Record<string, SourceItem>>({})
|
||||
// index -> sourceId
|
||||
const playingSources = reactive<(string | null)[]>([null, null, null, null])
|
||||
// index -> VideoBox ref
|
||||
const boxRefs: (InstanceType<typeof VideoBox> | null)[] = [null, null, null, null]
|
||||
|
||||
let mqttClient: any = null
|
||||
let apis = createApis(config)
|
||||
|
||||
function setBoxRef(el: any, index: number) {
|
||||
boxRefs[index] = el
|
||||
}
|
||||
|
||||
function toggleDrawer() {
|
||||
drawerOpen.value = !drawerOpen.value
|
||||
}
|
||||
|
||||
function toggleLayout() {
|
||||
if (layout.value === 1) {
|
||||
layout.value = 4
|
||||
} else {
|
||||
layout.value = 1
|
||||
// 关闭多余的视频
|
||||
for (let i = 1; i < 4; i++) {
|
||||
if (playingSources[i]) closeVideo(i)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isPlaying(id: string) {
|
||||
return playingSources.some((s) => s === id)
|
||||
}
|
||||
|
||||
function toggleSource(id: string) {
|
||||
if (isPlaying(id)) {
|
||||
// 关闭
|
||||
const idx = playingSources.findIndex((s) => s === id)
|
||||
if (idx !== -1) closeVideo(idx)
|
||||
sourcesMap[id].checked = false
|
||||
} else {
|
||||
sourcesMap[id].checked = true
|
||||
const maxSlots = layout.value
|
||||
if (maxSlots === 1) {
|
||||
if (playingSources[0]) closeVideo(0)
|
||||
openVideo(id, 0)
|
||||
} else {
|
||||
for (let i = 0; i < 4; i++) {
|
||||
if (!playingSources[i]) {
|
||||
openVideo(id, i)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function openVideo(id: string, index: number) {
|
||||
playingSources[index] = id
|
||||
// 等 DOM 更新后调用 VideoBox 的 subscribeLive
|
||||
setTimeout(() => {
|
||||
const box = boxRefs[index]
|
||||
if (box && sourcesMap[id]) {
|
||||
box.subscribeLive(sourcesMap[id])
|
||||
// 订阅流
|
||||
apis.subscribeLive(deviceId,id).then((res) => {
|
||||
if (res) {
|
||||
box.startPlay(res)
|
||||
} else {
|
||||
box.showOffline()
|
||||
}
|
||||
}).catch(() => {
|
||||
box.showOffline()
|
||||
})
|
||||
}
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function closeVideo(index: number) {
|
||||
const id = playingSources[index]
|
||||
if (id) sourcesMap[id].checked = false
|
||||
playingSources[index] = null
|
||||
boxRefs[index]?.destroy()
|
||||
}
|
||||
|
||||
// VideoBox ready 事件（videoInfo 初始化完成）
|
||||
function onVideoReady(_info: VideoInfo, _index: number) {
|
||||
// 可在此做额外处理
|
||||
}
|
||||
|
||||
function connectMqtt() {
|
||||
mqttClient = mqtt.connect(`ws://${config.serverIp}:${config.websocket}/mqtt`, {
|
||||
username: config.mqttAuth[0],
|
||||
password: config.mqttAuth[1],
|
||||
})
|
||||
mqttClient.subscribe(config.resultTopic, { qos: 0 })
|
||||
mqttClient.subscribe(config.streamInfoTopic, { qos: 0 })
|
||||
|
||||
mqttClient.on('message', (topic: string, payload: Uint8Array) => {
|
||||
const msg = JSON.parse(payload.toString())
|
||||
if (msg.msg_type === 'video_detection') {
|
||||
const id = msg.data.source.id
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const box = boxRefs[i]
|
||||
if (!box) continue
|
||||
const info = box.getVideoInfo()
|
||||
if (playingSources[i] === id && info && msg.data.alg.name === info.alg) {
|
||||
box.drawDetection(msg.data.reserved_data)
|
||||
if (info.canvasTimeout) clearTimeout(info.canvasTimeout)
|
||||
info.canvasTimeout = setTimeout(() => box.clearCanvas(), 1000)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if (topic === 'ks/stream_local') {
|
||||
console.log(msg.data?.stream)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
//const tokenRes = await apis.getToken()
|
||||
// if (tokenRes.error_code === 0) {
|
||||
//config.token = tokenRes.data
|
||||
apis = createApis(config)
|
||||
const sourcesRes = await apis.getSources(deviceId)
|
||||
sourceList.value = sourcesRes.map((item) => {
|
||||
item.sourceId = item.id
|
||||
item.title = item.desc
|
||||
item.type = item.type
|
||||
item.checked = false
|
||||
sourcesMap[item.id] = item
|
||||
return item
|
||||
})
|
||||
//}
|
||||
} catch (e) {
|
||||
console.error('初始化失败', e)
|
||||
}
|
||||
connectMqtt()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
mqttClient?.end()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0a0f1a;
|
||||
color: #e0f0ff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
background: #0a0f1a;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.nav-bar {
|
||||
flex-shrink: 0;
|
||||
height: 44px;
|
||||
background: #0d1b2e;
|
||||
border-bottom: 1px solid #1a3a5c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #00d4ff;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.layout-btn {
|
||||
background: rgba(0, 180, 255, 0.15);
|
||||
border: 1px solid #0af;
|
||||
color: #0af;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 视频区域 */
|
||||
.video-area {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.layout-1 {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.layout-4 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
|
||||
/* 抽屉把手 */
|
||||
.drawer-handle {
|
||||
flex-shrink: 0;
|
||||
height: 36px;
|
||||
background: #0d1b2e;
|
||||
border-top: 1px solid #1a3a5c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: #5af;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 摄像头列表抽屉 */
|
||||
.drawer {
|
||||
flex-shrink: 0;
|
||||
max-height: 40vh;
|
||||
background: #0d1b2e;
|
||||
border-top: 1px solid #1a3a5c;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.source-list {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.source-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.source-item:active {
|
||||
background: rgba(0, 180, 255, 0.1);
|
||||
}
|
||||
|
||||
.source-item.active {
|
||||
background: rgba(0, 180, 255, 0.08);
|
||||
}
|
||||
|
||||
.source-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #444;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.source-dot.on {
|
||||
background: #0f0;
|
||||
box-shadow: 0 0 6px #0f0;
|
||||
}
|
||||
|
||||
.source-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #cde;
|
||||
}
|
||||
|
||||
.source-badge {
|
||||
font-size: 11px;
|
||||
color: #0af;
|
||||
background: rgba(0, 170, 255, 0.15);
|
||||
border: 1px solid #0af;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #556;
|
||||
padding: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 抽屉动画 */
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: max-height 0.25s ease, opacity 0.25s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-up-enter-to,
|
||||
.slide-up-leave-from {
|
||||
max-height: 40vh;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
43
src/api/index.ts
Normal file
43
src/api/index.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import type { GlobalConfig, SourceItem } from '../types'
|
||||
// import { generateSignature, generateRandomString } from '../utils/signature'
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export function createApis(config: GlobalConfig) {
|
||||
// const baseUrl = () => `http://${config.serverIp}`
|
||||
// const authHeader = () => ({ Authorization: `Bearer ${config.token}` })
|
||||
|
||||
// async function request<T>(url: string, headers?: Record<string, string>): Promise<T> {
|
||||
// const res = await fetch(url, { headers: { ...authHeader(), ...headers } })
|
||||
// if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
// return res.json()
|
||||
// }
|
||||
|
||||
// async function getTimestamp(): Promise<{ data: number }> {
|
||||
// return request(`${baseUrl()}${config.getTime}`)
|
||||
// }
|
||||
|
||||
// async function getToken(): Promise<{ error_code: number; data: string }> {
|
||||
// const timestampRes = await getTimestamp()
|
||||
// const timestamp = timestampRes.data
|
||||
// const nonce = generateRandomString(10)
|
||||
// const signature = generateSignature(config.accessKey, config.accessSecret, timestamp, nonce)
|
||||
// const url = `${baseUrl()}${config.getToken}?signature=${signature}&ak=${config.accessKey}×tamp=${timestamp}&nonce=${nonce}`
|
||||
// const res = await fetch(url)
|
||||
// return res.json()
|
||||
// }
|
||||
|
||||
async function getSources(deviceId:string): Promise<SourceItem[]> {
|
||||
const res = await window.HybridWebView.InvokeDotNet('GetSourceListAsync', [deviceId]);
|
||||
console.log(res);
|
||||
return res as SourceItem[];
|
||||
}
|
||||
|
||||
async function subscribeLive(deviceId:string, source_id: string): Promise<string> {
|
||||
return await window.HybridWebView.InvokeDotNet<string>('SubscribeLiveAsync', [deviceId, source_id])
|
||||
}
|
||||
|
||||
async function getMqttServerProxyUrl(): Promise<{ data: string }> {
|
||||
return await window.HybridWebView.InvokeDotNet<{ data: string }>('GetMqttServerProxyUrlAsync')
|
||||
}
|
||||
|
||||
return { getSources, subscribeLive, getMqttServerProxyUrl }
|
||||
}
|
||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
1
src/assets/vite.svg
Normal file
1
src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
567
src/components/VideoBox.vue
Normal file
567
src/components/VideoBox.vue
Normal file
@ -0,0 +1,567 @@
|
||||
<template>
|
||||
<div class="video-box" ref="boxRef">
|
||||
<!-- 状态遮罩 -->
|
||||
<div class="tips" v-if="tipState !== 'none'">
|
||||
<div v-if="tipState === 'loading'" class="icon-dot"></div>
|
||||
<div v-if="tipState === 'offline'" class="deviceoffline">
|
||||
<span class="offline-icon">📵</span>
|
||||
<span>离线</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标题栏 -->
|
||||
<div class="title-bar" v-if="source">
|
||||
<span class="camera-name">{{ source.desc }}</span>
|
||||
<div class="alg-selector" v-if="source.alg && Object.keys(source.alg).length">
|
||||
<span class="alg-label" @click="showAlgMenu = !showAlgMenu">
|
||||
算法: {{ currentAlgName }}
|
||||
<span class="arrow">▾</span>
|
||||
</span>
|
||||
<ul class="alg-menu" v-if="showAlgMenu">
|
||||
<li
|
||||
v-for="(algInfo, algKey) in source.alg"
|
||||
:key="algKey"
|
||||
:class="{ active: currentAlg === algKey }"
|
||||
@click="selectAlg(String(algKey))"
|
||||
>
|
||||
{{ algInfo.reserved_args.display_name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="close-btn" @click="$emit('close')">✕</button>
|
||||
</div>
|
||||
|
||||
<video ref="videoRef" muted autoplay preload="auto" playsinline class="video-el"></video>
|
||||
<canvas ref="canvasRef" class="canvas-el"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onBeforeUnmount } from 'vue'
|
||||
import type { SourceItem, VideoInfo, DetectionResult } from '../types'
|
||||
|
||||
declare const ZLMRTCClient: any
|
||||
|
||||
const props = defineProps<{
|
||||
source: SourceItem | null
|
||||
serverIp: string
|
||||
mediaPort: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
ready: [info: VideoInfo]
|
||||
}>()
|
||||
|
||||
const boxRef = ref<HTMLDivElement>()
|
||||
const videoRef = ref<HTMLVideoElement>()
|
||||
const canvasRef = ref<HTMLCanvasElement>()
|
||||
const tipState = ref<'none' | 'loading' | 'offline'>('none')
|
||||
const showAlgMenu = ref(false)
|
||||
const currentAlg = ref<string | null>(null)
|
||||
|
||||
const videoInfo = ref<VideoInfo | null>(null)
|
||||
|
||||
const currentAlgName = computed(() => {
|
||||
if (!props.source?.alg || !currentAlg.value) return '无'
|
||||
return props.source.alg[currentAlg.value]?.reserved_args.display_name ?? '无'
|
||||
})
|
||||
|
||||
function selectAlg(key: string) {
|
||||
currentAlg.value = key
|
||||
showAlgMenu.value = false
|
||||
if (videoInfo.value) videoInfo.value.alg = key
|
||||
}
|
||||
|
||||
// 初始化 videoInfo
|
||||
function initVideoInfo(id: string, oriW: number, oriH: number) {
|
||||
const container = boxRef.value
|
||||
if (!container) return
|
||||
|
||||
let actualWidth: number, actualHeight: number
|
||||
const cw = container.offsetWidth
|
||||
const ch = container.offsetHeight
|
||||
|
||||
if (oriW / cw > oriH / ch) {
|
||||
actualWidth = cw
|
||||
actualHeight = cw / (oriW / oriH)
|
||||
} else {
|
||||
actualHeight = ch
|
||||
actualWidth = ch * (oriW / oriH)
|
||||
}
|
||||
|
||||
videoInfo.value = {
|
||||
id,
|
||||
loading: true,
|
||||
openWs: true,
|
||||
alg: currentAlg.value,
|
||||
algListShow: false,
|
||||
subscribeTimeout: null,
|
||||
refreshTimeInterval: null,
|
||||
refreshTime: null,
|
||||
replayTimer: null,
|
||||
playerState: 'pending',
|
||||
detectInterval: null,
|
||||
quanping: false,
|
||||
srsrtc: null,
|
||||
stream: '',
|
||||
status: '',
|
||||
stream_code: '',
|
||||
oriWidth: oriW,
|
||||
oriHeight: oriH,
|
||||
actualWidth,
|
||||
actualHeight,
|
||||
startTime: 0,
|
||||
canvas: canvasRef.value ?? null,
|
||||
canvasTimeout: null,
|
||||
}
|
||||
|
||||
setPosition(actualWidth, actualHeight)
|
||||
}
|
||||
|
||||
function setPosition(width: number, height: number) {
|
||||
const container = boxRef.value
|
||||
const video = videoRef.value
|
||||
const canvas = canvasRef.value
|
||||
if (!container || !video || !canvas) return
|
||||
|
||||
video.style.position = 'absolute'
|
||||
video.style.width = width + 'px'
|
||||
video.style.height = height + 'px'
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
|
||||
if (width / container.offsetWidth < height / container.offsetHeight) {
|
||||
const left = (container.offsetWidth - width) / 2
|
||||
video.style.left = Math.floor(left) + 'px'
|
||||
video.style.top = '0px'
|
||||
canvas.style.left = Math.floor(left) + 'px'
|
||||
canvas.style.top = '0px'
|
||||
} else {
|
||||
const top = (container.offsetHeight - height) / 2
|
||||
video.style.top = Math.floor(top) + 'px'
|
||||
video.style.left = '0px'
|
||||
canvas.style.top = Math.floor(top) + 'px'
|
||||
canvas.style.left = '0px'
|
||||
}
|
||||
}
|
||||
|
||||
function playVideo(stream: string) {
|
||||
if (!videoInfo.value || videoInfo.value.srsrtc) return
|
||||
const video = videoRef.value
|
||||
if (!video) return
|
||||
|
||||
const streamUrl = stream
|
||||
.replace('127.0.0.1', props.serverIp)
|
||||
.replace('1985', String(props.mediaPort))
|
||||
|
||||
const srsrtc = new ZLMRTCClient.Endpoint({
|
||||
element: video,
|
||||
debug: false,
|
||||
zlmsdpUrl: streamUrl,
|
||||
simulcast: false,
|
||||
useCamera: true,
|
||||
audioEnable: true,
|
||||
videoEnable: true,
|
||||
recvOnly: true,
|
||||
resolution: { w: 1280, h: 720 },
|
||||
usedatachannel: false,
|
||||
videoId: '',
|
||||
audioId: '',
|
||||
})
|
||||
|
||||
srsrtc.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e: any) => {
|
||||
console.log('offer/answer 交换失败', e)
|
||||
if (e.code === -400 && e.msg === 'stream not found') {
|
||||
handleRefresh()
|
||||
}
|
||||
})
|
||||
|
||||
srsrtc.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, () => {
|
||||
tipState.value = 'none'
|
||||
if (videoInfo.value) {
|
||||
videoInfo.value.playerState = 'success'
|
||||
videoInfo.value.loading = false
|
||||
videoInfo.value.startTime = Date.now()
|
||||
}
|
||||
})
|
||||
|
||||
srsrtc.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, (e: string) => {
|
||||
if (e === 'failed' || e === 'disconnected') {
|
||||
handleRefresh()
|
||||
}
|
||||
})
|
||||
|
||||
videoInfo.value.srsrtc = srsrtc
|
||||
}
|
||||
|
||||
function handleRefresh() {
|
||||
if (!videoInfo.value) return
|
||||
if (videoInfo.value.status === '离线') {
|
||||
destroy()
|
||||
if (props.source) subscribeLive(props.source)
|
||||
} else {
|
||||
if (!videoInfo.value.stream) return
|
||||
const video = videoRef.value
|
||||
if (video) video.srcObject = null
|
||||
if (videoInfo.value.replayTimer) {
|
||||
clearTimeout(videoInfo.value.replayTimer)
|
||||
videoInfo.value.replayTimer = null
|
||||
}
|
||||
videoInfo.value.srsrtc?.close()
|
||||
videoInfo.value.srsrtc = null
|
||||
videoInfo.value.status = ''
|
||||
if (videoInfo.value.stream) playVideo(videoInfo.value.stream)
|
||||
}
|
||||
}
|
||||
|
||||
async function subscribeLive(source: SourceItem) {
|
||||
tipState.value = 'loading'
|
||||
initVideoInfo(
|
||||
source.id,
|
||||
source.stream.image_size.draw[0],
|
||||
source.stream.image_size.draw[1],
|
||||
)
|
||||
|
||||
try {
|
||||
// 通过父组件传入的 api 调用，这里用 emit 通知父组件来订阅
|
||||
emit('ready', videoInfo.value!)
|
||||
} catch {
|
||||
tipState.value = 'offline'
|
||||
}
|
||||
}
|
||||
|
||||
// 供父组件调用：设置流地址并播放
|
||||
function startPlay(stream: string) {
|
||||
if (!videoInfo.value) return
|
||||
videoInfo.value.stream = stream
|
||||
playVideo(stream)
|
||||
}
|
||||
|
||||
// 供父组件调用：显示离线
|
||||
function showOffline() {
|
||||
tipState.value = 'offline'
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
clearCanvas()
|
||||
if (videoInfo.value) {
|
||||
if (videoInfo.value.subscribeTimeout) clearTimeout(videoInfo.value.subscribeTimeout)
|
||||
if (videoInfo.value.replayTimer) clearTimeout(videoInfo.value.replayTimer)
|
||||
if (videoInfo.value.refreshTimeInterval) clearInterval(videoInfo.value.refreshTimeInterval)
|
||||
if (videoInfo.value.canvasTimeout) clearTimeout(videoInfo.value.canvasTimeout)
|
||||
const video = videoRef.value
|
||||
if (video) video.srcObject = null
|
||||
videoInfo.value.srsrtc?.close()
|
||||
videoInfo.value = null
|
||||
}
|
||||
tipState.value = 'none'
|
||||
currentAlg.value = null
|
||||
showAlgMenu.value = false
|
||||
}
|
||||
|
||||
function clearCanvas() {
|
||||
const canvas = canvasRef.value
|
||||
if (canvas) {
|
||||
canvas.getContext('2d')?.clearRect(0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
}
|
||||
|
||||
function drawDetection(data: DetectionResult) {
|
||||
if (!videoInfo.value || !canvasRef.value) return
|
||||
const { actualWidth, actualHeight, oriWidth, oriHeight } = videoInfo.value
|
||||
if (!actualWidth || !actualHeight || !oriWidth || !oriHeight) return
|
||||
|
||||
clearCanvas()
|
||||
const canvas = canvasRef.value
|
||||
const { bbox } = data
|
||||
|
||||
// 多边形
|
||||
Object.values(bbox.polygons).forEach((item) => {
|
||||
const color = [...item.color].reverse()
|
||||
const points = item.polygon.map(([px, py]) => [
|
||||
Math.round((px * actualWidth) / oriWidth),
|
||||
Math.round((py * actualHeight) / oriHeight),
|
||||
])
|
||||
const ctx = canvas.getContext('2d')!
|
||||
ctx.font = '20px Arial bolder'
|
||||
ctx.fillStyle = 'transparent'
|
||||
ctx.strokeStyle = `rgb(${color.join(',')})`
|
||||
ctx.lineWidth = 2
|
||||
drawPolygon(ctx, points as [number, number][])
|
||||
drawPolygonInfo(ctx, Object.values(bbox.polygons))
|
||||
})
|
||||
|
||||
// 矩形
|
||||
bbox.rectangles.forEach((item) => {
|
||||
const color = [...item.color].reverse()
|
||||
const x = Math.round((item.xyxy[0] * actualWidth) / oriWidth)
|
||||
const y = Math.round((item.xyxy[1] * actualHeight) / oriHeight)
|
||||
const x1 = Math.round((item.xyxy[2] * actualWidth) / oriWidth)
|
||||
const y1 = Math.round((item.xyxy[3] * actualHeight) / oriHeight)
|
||||
const ctx = canvas.getContext('2d')!
|
||||
ctx.font = '20px Arial bolder'
|
||||
ctx.fillStyle = `rgb(${color.join(',')})`
|
||||
ctx.fillText(item.label ?? '', x, y - 10)
|
||||
ctx.strokeStyle = `rgb(${color.join(',')})`
|
||||
ctx.lineWidth = 2
|
||||
const lw = (x1 - x) / 4
|
||||
const lh = (y1 - y) / 4
|
||||
const corners = [
|
||||
{ x, y, x1: x + lw, y1: y }, { x, y, x1: x, y1: y + lh },
|
||||
{ x: x1, y, x1: x1 - lw, y1: y }, { x: x1, y, x1: x1, y1: y + lh },
|
||||
{ x, y: y1, x1: x + lw, y1: y1 }, { x, y: y1, x1: x, y1: y1 - lh },
|
||||
{ x: x1, y: y1, x1: x1 - lw, y1: y1 }, { x: x1, y: y1, x1: x1, y1: y1 - lh },
|
||||
]
|
||||
corners.forEach((l) => drawLine(ctx, l))
|
||||
})
|
||||
|
||||
// 线段
|
||||
Object.values(bbox.lines).forEach((item) => {
|
||||
const color = [...item.color].reverse()
|
||||
const x = Math.round((item.line[0][0] * actualWidth) / oriWidth)
|
||||
const y = Math.round((item.line[0][1] * actualHeight) / oriHeight)
|
||||
const x1 = Math.round((item.line[1][0] * actualWidth) / oriWidth)
|
||||
const y1 = Math.round((item.line[1][1] * actualHeight) / oriHeight)
|
||||
const ctx = canvas.getContext('2d')!
|
||||
ctx.font = '20px Arial bolder'
|
||||
ctx.fillStyle = `rgb(${color.join(',')})`
|
||||
if (item.ext.direction) {
|
||||
ctx.fillText(item.name, (x + x1) / 2, (y + y1) / 2 + 20)
|
||||
}
|
||||
ctx.strokeStyle = `rgb(${color.join(',')})`
|
||||
ctx.lineWidth = 2
|
||||
drawLine(ctx, { x, y, x1, y1 })
|
||||
drawCountingInfo(ctx, Object.values(bbox.lines))
|
||||
})
|
||||
}
|
||||
|
||||
function drawPolygon(ctx: CanvasRenderingContext2D, points: [number, number][]) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(points[0][0], points[0][1])
|
||||
for (let i = 1; i < points.length; i++) ctx.lineTo(points[i][0], points[i][1])
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
function drawLine(ctx: CanvasRenderingContext2D, l: { x: number; y: number; x1: number; y1: number }) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(l.x, l.y)
|
||||
ctx.lineTo(l.x1, l.y1)
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
function drawCountingInfo(ctx: CanvasRenderingContext2D, lines: any[]) {
|
||||
lines.forEach((item, i) => {
|
||||
ctx.fillStyle = 'rgb(255,0,0)'
|
||||
if (item.ext.direction.length === 2) {
|
||||
ctx.fillText(`[${item.name}] ${item.ext.action.count}: ${item.ext.result.count}`, 0, 20 * i + 20)
|
||||
} else {
|
||||
ctx.fillText(
|
||||
`[${item.name}] ${item.ext.action.increase}: ${item.ext.result.increase},${item.ext.action.decrease}: ${item.ext.result.decrease},${item.ext.action.delta}: ${item.ext.result.delta}`,
|
||||
0, 20 * i + 20,
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function drawPolygonInfo(ctx: CanvasRenderingContext2D, polygons: any[]) {
|
||||
const info = videoInfo.value
|
||||
if (!info) return
|
||||
polygons.forEach((item, i) => {
|
||||
ctx.fillStyle = `rgb(${[...item.color].reverse().join(',')})`
|
||||
let leftPoint = item.polygon[0]
|
||||
for (let j = 1; j < item.polygon.length; j++) {
|
||||
if (item.polygon[j][0] < leftPoint[0]) leftPoint = item.polygon[j]
|
||||
}
|
||||
ctx.fillText(
|
||||
item.name,
|
||||
(leftPoint[0] * info.actualWidth) / info.oriWidth,
|
||||
(leftPoint[1] * info.actualHeight) / info.oriHeight + 20,
|
||||
)
|
||||
if (item.ext.result) {
|
||||
ctx.fillStyle = 'rgb(255,0,0)'
|
||||
ctx.fillText(`${item.name}: ${item.ext.result}`, 0, 20 * i + 20)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 重新计算并应用视频/canvas 尺寸（容器大小变化后调用）
|
||||
function resize() {
|
||||
const info = videoInfo.value
|
||||
const container = boxRef.value
|
||||
if (!info || !container || !info.oriWidth || !info.oriHeight) return
|
||||
|
||||
const cw = container.offsetWidth
|
||||
const ch = container.offsetHeight
|
||||
const { oriWidth, oriHeight } = info
|
||||
|
||||
if (oriWidth / cw > oriHeight / ch) {
|
||||
info.actualWidth = cw
|
||||
info.actualHeight = cw / (oriWidth / oriHeight)
|
||||
} else {
|
||||
info.actualHeight = ch
|
||||
info.actualWidth = ch * (oriWidth / oriHeight)
|
||||
}
|
||||
|
||||
setPosition(info.actualWidth, info.actualHeight)
|
||||
}
|
||||
|
||||
// 暴露给父组件
|
||||
defineExpose({
|
||||
subscribeLive,
|
||||
startPlay,
|
||||
resize,
|
||||
showOffline,
|
||||
destroy,
|
||||
drawDetection,
|
||||
clearCanvas,
|
||||
getCurrentAlg: () => currentAlg.value,
|
||||
getVideoInfo: () => videoInfo.value,
|
||||
})
|
||||
|
||||
watch(() => props.source, (newSource) => {
|
||||
if (!newSource) {
|
||||
destroy()
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
destroy()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.video-box {
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tips {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.deviceoffline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.offline-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 36px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #00faff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
gap: 8px;
|
||||
z-index: 3;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.camera-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.alg-selector {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.alg-label {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
color: #7df;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.alg-menu {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right: 0;
|
||||
background: rgba(20, 40, 60, 0.92);
|
||||
border: 1px solid #2af;
|
||||
border-radius: 4px;
|
||||
min-width: 120px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
padding: 4px 0;
|
||||
margin: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.alg-menu li {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: #cef;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.alg-menu li.active {
|
||||
color: #0ff;
|
||||
background: rgba(0, 200, 255, 0.15);
|
||||
}
|
||||
|
||||
.alg-menu li:active {
|
||||
background: rgba(0, 200, 255, 0.25);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #f88;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.video-el {
|
||||
position: absolute;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.canvas-el {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.icon-dot {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background-color: #39f;
|
||||
animation: spin-bounce 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin-bounce {
|
||||
0% { transform: scale(0); opacity: 1; }
|
||||
100% { transform: scale(1); opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
4
src/main.ts
Normal file
4
src/main.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
7
src/types/global.d.ts
vendored
Normal file
7
src/types/global.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
declare interface Window {
|
||||
HybridWebView: HybridWebView
|
||||
}
|
||||
declare interface HybridWebView {
|
||||
InvokeDotNet(methodName: string, ...args: any[]): Promise<T>;
|
||||
InvokeDotNet<T = any>(methodName: string, ...args: any[]): Promise<T>;
|
||||
}
|
||||
101
src/types/index.ts
Normal file
101
src/types/index.ts
Normal file
@ -0,0 +1,101 @@
|
||||
export interface GlobalConfig {
|
||||
serverIp: string
|
||||
getSources: string
|
||||
subscribe: string
|
||||
resultTopic: string
|
||||
streamInfoTopic: string
|
||||
media_http_api: number
|
||||
websocket: number
|
||||
mqttAuth: [string, string]
|
||||
accessKey: string
|
||||
accessSecret: string
|
||||
token: string
|
||||
getToken: string
|
||||
getTime: string
|
||||
}
|
||||
|
||||
export interface AlgInfo {
|
||||
reserved_args: {
|
||||
display_name: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface StreamImageSize {
|
||||
draw: [number, number]
|
||||
}
|
||||
|
||||
export interface SourceItem {
|
||||
id: string
|
||||
desc: string
|
||||
sourceId?: string
|
||||
title: string
|
||||
type: string
|
||||
checked: boolean
|
||||
alg: Record<string, AlgInfo>
|
||||
stream: {
|
||||
image_size: StreamImageSize
|
||||
}
|
||||
deviceId?: string
|
||||
}
|
||||
|
||||
export interface VideoInfo {
|
||||
id: string
|
||||
loading: boolean
|
||||
openWs: boolean
|
||||
alg: string | null
|
||||
algListShow: boolean
|
||||
subscribeTimeout: ReturnType<typeof setTimeout> | null
|
||||
refreshTimeInterval: ReturnType<typeof setInterval> | null
|
||||
refreshTime: number | null
|
||||
replayTimer: ReturnType<typeof setTimeout> | null
|
||||
playerState: string
|
||||
detectInterval: ReturnType<typeof setInterval> | null
|
||||
quanping: boolean
|
||||
srsrtc: any
|
||||
stream: string
|
||||
status: string
|
||||
stream_code: string
|
||||
oriWidth: number
|
||||
oriHeight: number
|
||||
actualWidth: number
|
||||
actualHeight: number
|
||||
startTime: number
|
||||
canvas: HTMLCanvasElement | null
|
||||
canvasTimeout: ReturnType<typeof setTimeout> | null
|
||||
}
|
||||
|
||||
export interface BboxPolygon {
|
||||
color: number[]
|
||||
polygon: [number, number][]
|
||||
name: string
|
||||
ext: {
|
||||
result?: string | number
|
||||
}
|
||||
}
|
||||
|
||||
export interface BboxRectangle {
|
||||
color: number[]
|
||||
xyxy: [number, number, number, number]
|
||||
label?: string
|
||||
}
|
||||
|
||||
export interface BboxLine {
|
||||
color: number[]
|
||||
line: [[number, number], [number, number]]
|
||||
name: string
|
||||
ext: {
|
||||
direction: string[]
|
||||
action: { count?: number; increase?: number; decrease?: number; delta?: number }
|
||||
result: { count?: number; increase?: number; decrease?: number; delta?: number }
|
||||
}
|
||||
}
|
||||
|
||||
export interface BboxData {
|
||||
polygons: Record<string, BboxPolygon>
|
||||
rectangles: BboxRectangle[]
|
||||
lines: Record<string, BboxLine>
|
||||
}
|
||||
|
||||
export interface DetectionResult {
|
||||
bbox: BboxData
|
||||
}
|
||||
16
src/utils/signature.ts
Normal file
16
src/utils/signature.ts
Normal file
@ -0,0 +1,16 @@
|
||||
declare const CryptoJS: any
|
||||
|
||||
export function generateSignature(ak: string, sk: string, timestamp: number, nonce: string): string {
|
||||
const message = `${ak}:${timestamp}:${nonce}`
|
||||
const hash = CryptoJS.HmacSHA256(message, sk)
|
||||
return CryptoJS.enc.Hex.stringify(hash)
|
||||
}
|
||||
|
||||
export function generateRandomString(length: number): string {
|
||||
let result = ''
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * characters.length))
|
||||
}
|
||||
return result
|
||||
}
|
||||
16
tsconfig.app.json
Normal file
16
tsconfig.app.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"types": ["vite/client"],
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
26
tsconfig.node.json
Normal file
26
tsconfig.node.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
10
vite.config.ts
Normal file
10
vite.config.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
build: {
|
||||
outDir: 'D:\\Code\\EliteAIBoxMAUI\\EliteAIBoxMAUI\\Resources\\Raw\\wwwroot\\livestream', // 指定构建输出目录
|
||||
},
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user