feat: 重建 Sense 单路实时监看 (#68)
This commit is contained in:
QiuSW
@@ -0,0 +1,13 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function listLiveviewRoutes(query) {
|
||||
return request({ url: '/api/v1/liveview/routes', method: 'get', params: query })
|
||||
}
|
||||
|
||||
export function createLiveviewSession(routeId) {
|
||||
return request({ url: '/api/v1/liveview/sessions', method: 'post', data: { routeId }})
|
||||
}
|
||||
|
||||
export function getLiveviewSession(id) {
|
||||
return request({ url: `/api/v1/liveview/sessions/${id}`, method: 'get' })
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="sense-video-player" :aria-busy="busy ? 'true' : 'false'">
|
||||
<iframe
|
||||
v-if="playerUrl && playable"
|
||||
:key="playerUrl"
|
||||
class="sense-video-player__frame"
|
||||
:src="playerUrl"
|
||||
title="Sense 单路实时视频"
|
||||
allow="autoplay; fullscreen"
|
||||
sandbox="allow-scripts allow-same-origin allow-forms"
|
||||
referrerpolicy="no-referrer"
|
||||
@load="$emit('loaded')"
|
||||
/>
|
||||
<div v-if="state !== 'ready'" class="sense-video-player__state" :class="{ 'is-overlay': playerUrl && playable }" aria-live="polite">
|
||||
<el-icon v-if="busy" class="is-loading sense-video-player__icon" aria-hidden="true"><Loading /></el-icon>
|
||||
<el-icon v-else class="sense-video-player__icon" aria-hidden="true"><WarningFilled /></el-icon>
|
||||
<strong>{{ title }}</strong>
|
||||
<span>{{ message }}</span>
|
||||
<el-button v-if="recoverable" type="primary" :loading="retrying" @click="$emit('retry')">重新连接</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { playbackStatusDetail, playbackStatusLabel } from '@/views/sense/liveview/playbackStatus'
|
||||
import { Loading, WarningFilled } from '@element-plus/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'SenseVideoPlayer',
|
||||
components: { Loading, WarningFilled },
|
||||
props: {
|
||||
state: { type: String, default: 'loading' },
|
||||
detail: { type: String, default: '' },
|
||||
playerUrl: { type: String, default: '' },
|
||||
retrying: { type: Boolean, default: false }
|
||||
},
|
||||
emits: ['retry', 'loaded'],
|
||||
computed: {
|
||||
busy() {
|
||||
return this.state === 'loading' || this.state === 'waiting'
|
||||
},
|
||||
playable() {
|
||||
return ['loading', 'waiting', 'ready'].includes(this.state)
|
||||
},
|
||||
recoverable() {
|
||||
return !this.busy && this.state !== 'ready'
|
||||
},
|
||||
title() {
|
||||
return playbackStatusLabel(this.state)
|
||||
},
|
||||
message() {
|
||||
return playbackStatusDetail(this.state, this.detail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sense-video-player {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 280px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--el-border-radius-base);
|
||||
background: #101419;
|
||||
}
|
||||
|
||||
.sense-video-player__frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sense-video-player__state {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
color: #dcdfe6;
|
||||
text-align: center;
|
||||
background: #101419;
|
||||
}
|
||||
|
||||
.sense-video-player__state.is-overlay {
|
||||
pointer-events: none;
|
||||
background: rgb(16 20 25 / 78%);
|
||||
}
|
||||
|
||||
.sense-video-player__state strong {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sense-video-player__state span {
|
||||
max-width: 640px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.sense-video-player__state .el-button {
|
||||
pointer-events: auto;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.sense-video-player__icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sense-video-player {
|
||||
min-height: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sense-video-player__icon {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<BasicLayout>
|
||||
<template #wrapper>
|
||||
<el-card class="box-card">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h3>实时监看</h3>
|
||||
<p>按设备选择一路已验证视频；关闭窗口后不会继续占用播放器连接。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="queryForm" :model="queryParams" inline label-position="left" class="search-form" @submit.prevent>
|
||||
<el-form-item label="设备或位置" prop="keyword">
|
||||
<el-input v-model.trim="queryParams.keyword" clearable placeholder="输入设备、位置或码流名称" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="handleQuery">搜索</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-alert
|
||||
v-if="!loading && total === 0"
|
||||
title="没有可监看的视频。请先在“视频接入”完成验证，再到“视频服务”确认路径状态。"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="empty-alert"
|
||||
/>
|
||||
|
||||
<el-table v-loading="loading" :data="routes" border stripe>
|
||||
<el-table-column prop="deviceName" label="设备" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="deviceLocation" label="安装位置" min-width="160" show-overflow-tooltip>
|
||||
<template #default="scope">{{ scope.row.deviceLocation || '未填写' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="码流" min-width="170">
|
||||
<template #default="scope">
|
||||
<div>{{ profileLabel(scope.row) }}</div>
|
||||
<small class="muted-text">{{ resolutionLabel(scope.row) }}</small>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag :type="routeStatus(scope.row.actual).type" size="small">{{ routeStatus(scope.row.actual).label }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="readers" label="当前观看" width="100" />
|
||||
<el-table-column prop="detail" label="说明" min-width="220" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="110" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button v-permisaction="['sense:liveview:view']" type="primary" link @click="handleWatch(scope.row)">实时查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:page="queryParams.pageIndex"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="playerOpen" width="min(1000px, 92vw)" :close-on-click-modal="false" destroy-on-close @closed="closePlayer">
|
||||
<template #header>
|
||||
<div class="dialog-header">
|
||||
<div>
|
||||
<strong>{{ currentRoute.deviceName || '实时视频' }}</strong>
|
||||
<span>{{ profileLabel(currentRoute) }} · {{ currentRoute.deviceLocation || '未填写位置' }}</span>
|
||||
</div>
|
||||
<el-tag :type="playbackStatusType(playerState)">{{ playbackStatusLabel(playerState) }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<SenseVideoPlayer
|
||||
v-if="playerOpen"
|
||||
:state="playerState"
|
||||
:detail="playerDetail"
|
||||
:player-url="session.playerUrl"
|
||||
:retrying="retrying"
|
||||
@retry="openSession"
|
||||
/>
|
||||
|
||||
<el-descriptions :column="3" border class="player-details">
|
||||
<el-descriptions-item label="设备">{{ currentRoute.deviceName || '—' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="码流">{{ profileLabel(currentRoute) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="分辨率">{{ resolutionLabel(currentRoute) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="处理建议" :span="3">{{ playbackStatusDetail(playerState, playerDetail) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="playerOpen = false">关闭</el-button>
|
||||
<el-button type="primary" :loading="retrying" @click="openSession">重新连接</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createLiveviewSession, getLiveviewSession, listLiveviewRoutes } from '@/api/sense/liveview'
|
||||
import SenseVideoPlayer from '@/components/sense/video-player'
|
||||
import { playbackStatusDetail, playbackStatusLabel, playbackStatusType, routeStatus } from './playbackStatus'
|
||||
|
||||
export default {
|
||||
name: 'SenseLiveview',
|
||||
components: { SenseVideoPlayer },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
routes: [],
|
||||
total: 0,
|
||||
queryParams: { keyword: '', pageIndex: 1, pageSize: 10 },
|
||||
playerOpen: false,
|
||||
currentRoute: {},
|
||||
session: {},
|
||||
playerState: 'loading',
|
||||
playerDetail: '',
|
||||
retrying: false,
|
||||
pollTimer: null,
|
||||
timeoutTimer: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.stopTimers()
|
||||
},
|
||||
methods: {
|
||||
playbackStatusDetail,
|
||||
playbackStatusLabel,
|
||||
playbackStatusType,
|
||||
routeStatus,
|
||||
profileLabel(route) {
|
||||
if (!route || !route.id) return '—'
|
||||
const kind = { main: '主码流', sub: '子码流', other: '其他码流' }[route.profileKind] || '码流'
|
||||
return route.profileName ? `${kind}（${route.profileName}）` : kind
|
||||
},
|
||||
resolutionLabel(route) {
|
||||
if (!route || !route.width || !route.height) return '未取得分辨率'
|
||||
return `${route.width} × ${route.height}${route.encoding ? ` · ${route.encoding}` : ''}`
|
||||
},
|
||||
async getList() {
|
||||
this.loading = true
|
||||
try {
|
||||
const response = await listLiveviewRoutes(this.queryParams)
|
||||
this.routes = response.data.list || []
|
||||
this.total = response.data.count || 0
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
handleQuery() {
|
||||
this.queryParams.pageIndex = 1
|
||||
this.getList()
|
||||
},
|
||||
resetQuery() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.handleQuery()
|
||||
},
|
||||
handleWatch(route) {
|
||||
this.currentRoute = { ...route }
|
||||
this.playerOpen = true
|
||||
this.openSession()
|
||||
},
|
||||
async openSession() {
|
||||
if (!this.currentRoute.id || this.retrying) return
|
||||
this.stopTimers()
|
||||
this.retrying = true
|
||||
this.playerState = 'loading'
|
||||
this.playerDetail = ''
|
||||
this.session = {}
|
||||
try {
|
||||
const response = await createLiveviewSession(this.currentRoute.id)
|
||||
this.session = response.data
|
||||
this.playerState = response.data.status
|
||||
this.playerDetail = response.data.detail
|
||||
this.startPolling()
|
||||
} catch (error) {
|
||||
this.playerState = 'offline'
|
||||
this.playerDetail = error.message || ''
|
||||
} finally {
|
||||
this.retrying = false
|
||||
}
|
||||
},
|
||||
startPolling() {
|
||||
this.pollTimer = window.setInterval(this.refreshSession, 2000)
|
||||
this.timeoutTimer = window.setTimeout(() => {
|
||||
if (['loading', 'waiting'].includes(this.playerState)) {
|
||||
this.playerState = 'timeout'
|
||||
this.playerDetail = ''
|
||||
this.stopTimers()
|
||||
}
|
||||
}, 20000)
|
||||
},
|
||||
async refreshSession() {
|
||||
if (!this.session.id || !this.playerOpen) return
|
||||
try {
|
||||
const response = await getLiveviewSession(this.session.id)
|
||||
this.session = response.data
|
||||
this.playerState = response.data.status
|
||||
this.playerDetail = response.data.detail
|
||||
if (this.playerState === 'ready') {
|
||||
window.clearTimeout(this.timeoutTimer)
|
||||
this.timeoutTimer = null
|
||||
} else if (!['loading', 'waiting'].includes(this.playerState)) {
|
||||
this.stopTimers()
|
||||
}
|
||||
} catch (error) {
|
||||
this.playerState = 'expired'
|
||||
this.playerDetail = ''
|
||||
this.stopTimers()
|
||||
}
|
||||
},
|
||||
stopTimers() {
|
||||
window.clearInterval(this.pollTimer)
|
||||
window.clearTimeout(this.timeoutTimer)
|
||||
this.pollTimer = null
|
||||
this.timeoutTimer = null
|
||||
},
|
||||
closePlayer() {
|
||||
this.stopTimers()
|
||||
this.session = {}
|
||||
this.currentRoute = {}
|
||||
this.playerState = 'loading'
|
||||
this.playerDetail = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-header,
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header h3 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.page-header p,
|
||||
.dialog-header span,
|
||||
.muted-text {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.dialog-header > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.search-form,
|
||||
.empty-alert,
|
||||
.player-details {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.search-form :deep(.el-input) {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.muted-text {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.search-form :deep(.el-input) {
|
||||
width: min(280px, 70vw);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
const labels = {
|
||||
loading: '正在连接',
|
||||
waiting: '等待视频',
|
||||
ready: '播放正常',
|
||||
authentication_failed: '摄像头认证失败',
|
||||
stream_not_found: '未找到视频流',
|
||||
service_unavailable: '视频服务不可用',
|
||||
timeout: '连接超时',
|
||||
expired: '播放会话已过期',
|
||||
offline: '视频已断开',
|
||||
stopped: '视频已停止'
|
||||
}
|
||||
|
||||
const details = {
|
||||
loading: '正在建立短期播放会话，请稍候。',
|
||||
waiting: '播放器已连接，正在等待摄像头开始传输画面。',
|
||||
ready: '摄像头视频正在传输。',
|
||||
authentication_failed: '请到“设备管理”更新摄像头账号或密码，再重新验证视频接入。',
|
||||
stream_not_found: '请到“视频服务”执行对账，确认媒体路径已经恢复。',
|
||||
service_unavailable: '请到“视频服务”检查 MediaMTX 进程和端口配置。',
|
||||
timeout: '20 秒内未收到画面，请检查摄像头网络后重新连接。',
|
||||
expired: '短期播放会话已失效，请重新连接。',
|
||||
offline: '无法取得最新播放状态，请检查网络后重新连接。',
|
||||
stopped: '该视频路径已停止，请先到“视频服务”恢复。'
|
||||
}
|
||||
|
||||
export function playbackStatusLabel(value) {
|
||||
return labels[value] || '暂时无法播放'
|
||||
}
|
||||
|
||||
export function playbackStatusDetail(value, detail) {
|
||||
return detail || details[value] || details.offline
|
||||
}
|
||||
|
||||
export function playbackStatusType(value) {
|
||||
if (value === 'ready') return 'success'
|
||||
if (value === 'loading' || value === 'waiting') return 'warning'
|
||||
if (value === 'stopped') return 'info'
|
||||
return 'danger'
|
||||
}
|
||||
|
||||
export function routeStatus(value) {
|
||||
if (value === 'ready') return { label: '可观看', type: 'success' }
|
||||
if (value === 'waiting') return { label: '等待观看', type: 'warning' }
|
||||
return { label: '需要处理', type: 'danger' }
|
||||
}
|
||||
Reference in New Issue
Block a user