播放器回放版本
This commit is contained in:
吉浩茹
302
src/components/EnvironmentCard.vue
Normal file
302
src/components/EnvironmentCard.vue
Normal file
@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<view
|
||||
class="detail-card"
|
||||
:class="[cardClass, { 'disconnected': connectionStatus === 0 }]"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<view class="detail-header">
|
||||
<view class="detail-icon-container">
|
||||
<view class="detail-icon">{{ icon }}</view>
|
||||
<text class="detail-label">{{ label }}</text>
|
||||
</view>
|
||||
<view class="detail-value-container">
|
||||
<view class="value-unit-wrapper">
|
||||
<text
|
||||
class="detail-value"
|
||||
:class="valueClass"
|
||||
>{{ displayNumber }}</text>
|
||||
<text class="detail-unit">{{ displayUnit }}</text>
|
||||
</view>
|
||||
<!-- <view
|
||||
class="detail-status"
|
||||
:class="getStatusClass()"
|
||||
></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-progress-bar">
|
||||
<view
|
||||
class="detail-progress-fill"
|
||||
:class="progressClass"
|
||||
:style="{ width: progress + '%' }"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EnvironmentCard',
|
||||
props: {
|
||||
// 卡片类型
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: value => ['temperature', 'humidity', 'cleanliness'].includes(value)
|
||||
},
|
||||
// 数值
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 连接状态 (0: 未连接, 1: 连接成功, 2: 异常)
|
||||
connectionStatus: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 进度百分比 (0-100)
|
||||
progress: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否超限
|
||||
isOutOfRange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否数据异常
|
||||
isAbnormal: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 根据类型返回图标
|
||||
icon() {
|
||||
const iconMap = {
|
||||
temperature: '🌡️',
|
||||
humidity: '💧',
|
||||
cleanliness: '✨'
|
||||
}
|
||||
return iconMap[this.type]
|
||||
},
|
||||
// 根据类型返回标签
|
||||
label() {
|
||||
const labelMap = {
|
||||
temperature: '温度',
|
||||
humidity: '湿度',
|
||||
cleanliness: '洁净度'
|
||||
}
|
||||
return labelMap[this.type]
|
||||
},
|
||||
// 显示的数值
|
||||
displayNumber() {
|
||||
if (this.type === 'cleanliness' && this.value <= 0) {
|
||||
return '-';
|
||||
}
|
||||
return this.value;
|
||||
},
|
||||
// 显示的单位
|
||||
displayUnit() {
|
||||
const unitMap = {
|
||||
temperature: '°C',
|
||||
humidity: '%',
|
||||
cleanliness: 'μg/m³'
|
||||
};
|
||||
return unitMap[this.type];
|
||||
},
|
||||
// 根据类型返回卡片类名
|
||||
cardClass() {
|
||||
const classMap = {
|
||||
temperature: 'temperature-detail-card',
|
||||
humidity: 'humidity-detail-card',
|
||||
cleanliness: 'cleanliness-detail-card'
|
||||
}
|
||||
return classMap[this.type]
|
||||
},
|
||||
// 根据类型返回进度条类名
|
||||
progressClass() {
|
||||
const classMap = {
|
||||
temperature: 'temperature-progress',
|
||||
humidity: 'humidity-progress',
|
||||
cleanliness: 'cleanliness-progress'
|
||||
}
|
||||
return classMap[this.type]
|
||||
},
|
||||
// 数值的类
|
||||
valueClass() {
|
||||
if (this.isOutOfRange) {
|
||||
return 'out-of-range';
|
||||
}
|
||||
if (this.isAbnormal || this.connectionStatus === 2) {
|
||||
return 'abnormal';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取状态点类名
|
||||
getStatusClass() {
|
||||
if (this.connectionStatus === 1) {
|
||||
return 'active'
|
||||
} else if (this.connectionStatus === 2) {
|
||||
return 'warning'
|
||||
} else {
|
||||
return 'inactive'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 卡片基础样式 - 严格按照原样式恢复
|
||||
.detail-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
border: 1rpx solid #e1e5e9;
|
||||
transition: box-shadow 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 断线状态样式 */
|
||||
&.disconnected {
|
||||
border-color: #95a5a6 !important;
|
||||
border-left-color: #95a5a6 !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// 头部样式
|
||||
.detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.detail-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 28rpx;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-value-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.value-unit-wrapper {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between; /* 改为 space-between */
|
||||
gap: 4rpx;
|
||||
flex-grow: 1; /* 让其填充剩余空间 */
|
||||
// min-width: 120rpx;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&.out-of-range {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
&.abnormal {
|
||||
color: #f1c40f;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-unit {
|
||||
font-size: 24rpx;
|
||||
color: #7f8c8d;
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
// 状态指示器
|
||||
.detail-status {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
|
||||
&.active {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
background: #bdc3c7;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: #f1c40f;
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条样式
|
||||
.detail-progress-bar {
|
||||
height: 16rpx;
|
||||
background: #ecf0f1;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
transition: width 0.3s ease;
|
||||
|
||||
&.temperature-progress {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
&.humidity-progress {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
&.cleanliness-progress {
|
||||
background: #f39c12;
|
||||
}
|
||||
}
|
||||
|
||||
// 特定卡片样式 - 左侧边框颜色
|
||||
.temperature-detail-card {
|
||||
border-left: 4rpx solid #e74c3c;
|
||||
}
|
||||
|
||||
.humidity-detail-card {
|
||||
border-left: 4rpx solid #3498db;
|
||||
}
|
||||
|
||||
.cleanliness-detail-card {
|
||||
border-left: 4rpx solid #f39c12;
|
||||
}
|
||||
|
||||
// 断线状态下的文字颜色
|
||||
.detail-card.disconnected .detail-label {
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.detail-card.disconnected .detail-value {
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.detail-card.disconnected .detail-progress-fill {
|
||||
background: #95a5a6 !important;
|
||||
}
|
||||
</style>
|
||||
@ -10,64 +10,37 @@
|
||||
<!-- 环境参数详情 -->
|
||||
<view class="parameter-details">
|
||||
<!-- 温度卡片 -->
|
||||
<view class="detail-card temperature-detail-card" :class="{ 'disconnected': wdisConnected === 0 }" @click="navigateToParameterRecord">
|
||||
<view class="detail-header">
|
||||
<view class="detail-icon-container">
|
||||
<view class="detail-icon temperature-icon">🌡️</view>
|
||||
<text class="detail-label">温度</text>
|
||||
</view>
|
||||
<view class="detail-value-container">
|
||||
<text class="detail-value">{{ temperature }}°C</text>
|
||||
<view class="detail-status" :class="wdisConnected === 1 ? 'active' : (wdisConnected === 2 ? 'warning' : 'inactive')"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-progress-bar">
|
||||
<view class="detail-progress-fill temperature-progress" :style="{ width: temperatureProgress + '%' }"></view>
|
||||
</view>
|
||||
<!-- <view class="detail-range">
|
||||
<text class="detail-range-text">{{ 0 }}°C - {{ 100 }}°C</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<EnvironmentCard
|
||||
type="temperature"
|
||||
:value="temperature"
|
||||
:connection-status="wdisConnected"
|
||||
:progress="temperatureProgress"
|
||||
:is-out-of-range="temperature > tempSettings.max || temperature < tempSettings.min"
|
||||
:is-abnormal="isTempAbnormal"
|
||||
@click="navigateToParameterRecord"
|
||||
/>
|
||||
|
||||
<!-- 湿度卡片 -->
|
||||
<view class="detail-card humidity-detail-card" :class="{ 'disconnected': sdisConnected === 0 }" @click="navigateToParameterRecord">
|
||||
<view class="detail-header">
|
||||
<view class="detail-icon-container">
|
||||
<view class="detail-icon humidity-icon">💧</view>
|
||||
<text class="detail-label">湿度</text>
|
||||
</view>
|
||||
<view class="detail-value-container">
|
||||
<text class="detail-value">{{ humidity }}%</text>
|
||||
<view class="detail-status" :class="sdisConnected === 1 ? 'active' : (sdisConnected === 2 ? 'warning' : 'inactive')"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-progress-bar">
|
||||
<view class="detail-progress-fill humidity-progress" :style="{ width: humidityProgress + '%' }"></view>
|
||||
</view>
|
||||
<!-- <view class="detail-range">
|
||||
<text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<EnvironmentCard
|
||||
type="humidity"
|
||||
:value="humidity"
|
||||
:connection-status="sdisConnected"
|
||||
:progress="humidityProgress"
|
||||
:is-out-of-range="humidity > humiditySettings.max || humidity < humiditySettings.min"
|
||||
:is-abnormal="isHumidityAbnormal"
|
||||
@click="navigateToParameterRecord"
|
||||
/>
|
||||
|
||||
<!-- 洁净度卡片 -->
|
||||
<view class="detail-card cleanliness-detail-card" :class="{ 'disconnected': pmisConnected === 0 }" @click="navigateToParameterRecord">
|
||||
<view class="detail-header">
|
||||
<view class="detail-icon-container">
|
||||
<view class="detail-icon cleanliness-icon">✨</view>
|
||||
<text class="detail-label">洁净度</text>
|
||||
</view>
|
||||
<view class="detail-value-container">
|
||||
<text class="detail-value">{{ cleanliness > 0 ? cleanliness + 'μg/m³' : '-μg/m³' }}</text>
|
||||
<view class="detail-status" :class="pmisConnected === 1 ? 'active' : (pmisConnected === 2 ? 'warning' : 'inactive')"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-progress-bar">
|
||||
<view class="detail-progress-fill cleanliness-progress" :style="{ width: cleanlinessProgress + '%' }"></view>
|
||||
</view>
|
||||
<!-- <view class="detail-range">
|
||||
<text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<EnvironmentCard
|
||||
type="cleanliness"
|
||||
:value="cleanliness"
|
||||
:connection-status="pmisConnected"
|
||||
:progress="cleanlinessProgress"
|
||||
:is-out-of-range="false"
|
||||
:is-abnormal="isCleanlinessAbnormal"
|
||||
@click="navigateToParameterRecord"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 空调设置 -->
|
||||
@ -268,8 +241,12 @@
|
||||
import mqttDataManager from '@/utils/mqttDataManager.js'
|
||||
import { manualReconnect, sendMqttData } from '@/utils/sendMqtt.js'
|
||||
import { thDataApi, alertApi, eventApi, wsdApi, statusApi } from '@/utils/api.js'
|
||||
import EnvironmentCard from '@/components/EnvironmentCard.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EnvironmentCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
temperature: 0,
|
||||
@ -278,6 +255,9 @@ export default {
|
||||
temperatureProgress: 0,
|
||||
humidityProgress: 0,
|
||||
cleanlinessProgress: 0,
|
||||
isTempAbnormal: false,
|
||||
isHumidityAbnormal: false,
|
||||
isCleanlinessAbnormal: false,
|
||||
lastUpdate: '暂无数据',
|
||||
temperatureRange: {
|
||||
min: 0,
|
||||
@ -1514,141 +1494,7 @@ button:disabled {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
border: 1rpx solid #e1e5e9;
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.detail-card:hover {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 断线状态样式 */
|
||||
.detail-card.disconnected {
|
||||
border-color: #95a5a6 !important;
|
||||
border-left-color: #95a5a6 !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.detail-card.disconnected .detail-label {
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.detail-card.disconnected .detail-value {
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.detail-card.disconnected .detail-progress-fill {
|
||||
background: #95a5a6 !important;
|
||||
}
|
||||
|
||||
/* 温度详情卡片 */
|
||||
.temperature-detail-card {
|
||||
border-left: 4rpx solid #e74c3c;
|
||||
}
|
||||
|
||||
/* 湿度详情卡片 */
|
||||
.humidity-detail-card {
|
||||
border-left: 4rpx solid #3498db;
|
||||
}
|
||||
|
||||
/* 洁净度详情卡片 */
|
||||
.cleanliness-detail-card {
|
||||
border-left: 4rpx solid #f39c12;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.detail-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 28rpx;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-value-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 28rpx;
|
||||
// color: #34495e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-status {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.detail-status.active {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.detail-status.inactive {
|
||||
background: #bdc3c7;
|
||||
}
|
||||
|
||||
.detail-status.warning {
|
||||
background: #f1c40f;
|
||||
}
|
||||
|
||||
.detail-progress-bar {
|
||||
height: 16rpx;
|
||||
background: #ecf0f1;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.detail-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.temperature-progress {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.humidity-progress {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.cleanliness-progress {
|
||||
background: #f39c12;
|
||||
}
|
||||
|
||||
.detail-range {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.detail-range-text {
|
||||
font-size: 24rpx;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
/* 空调目标参数设置样式 */
|
||||
.air-conditioner-settings {
|
||||
@ -2235,9 +2081,7 @@ button:disabled {
|
||||
margin-top: 90rpx; /* 调整小屏幕下的顶部间距，增加距离 */
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
|
||||
.air-conditioner-settings {
|
||||
padding: 16rpx;
|
||||
|
||||
@ -64,38 +64,8 @@ export default {
|
||||
iframeUrl: '', // H5平台使用
|
||||
webviewUrl: '', // APP平台使用
|
||||
// 设备配置
|
||||
playUrl: "ezopen://open.ys7.com/FT1718031/1.hd.live",
|
||||
playUrl: "ezopen://open.ys7.com/GE9147469/1.hd.live",
|
||||
accessToken: '',
|
||||
cameraStatus: {
|
||||
text: '离线',
|
||||
class: 'offline'
|
||||
},
|
||||
recordingStatus: {
|
||||
text: '未录制',
|
||||
class: 'inactive'
|
||||
},
|
||||
qualityIndex: 1,
|
||||
qualityOptions: ['低', '中', '高', '超高清'],
|
||||
durationIndex: 2,
|
||||
durationOptions: ['5分钟', '10分钟', '30分钟', '1小时', '持续录制'],
|
||||
autoSave: true,
|
||||
historyList: [
|
||||
{
|
||||
time: '2025-09-29 15:45:33',
|
||||
duration: '10:30',
|
||||
size: '125MB'
|
||||
},
|
||||
{
|
||||
time: '2025-09-29 14:20:15',
|
||||
duration: '5:45',
|
||||
size: '68MB'
|
||||
},
|
||||
{
|
||||
time: '2025-09-29 13:10:22',
|
||||
duration: '15:20',
|
||||
size: '189MB'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@ -140,7 +110,7 @@ export default {
|
||||
async checkDevice() {
|
||||
console.log('🔍 开始检查设备状态...')
|
||||
|
||||
const playUrl = "ezopen://open.ys7.com/FT1718031/1.hd.live"
|
||||
const playUrl = "ezopen://open.ys7.com/GE9147469/1.hd.live"
|
||||
|
||||
uni.showLoading({
|
||||
title: '检查设备中...'
|
||||
|
||||
@ -1,371 +0,0 @@
|
||||
<!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>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* background: #1a1a1a; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#player-iframe {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
border: none;
|
||||
display: block;
|
||||
object-fit: contain; /* 保持视频比例，不变形 */
|
||||
}
|
||||
|
||||
/* 简化的控制按钮样式 */
|
||||
.control-buttons {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
z-index: 999;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 25px;
|
||||
padding: 12px 20px;
|
||||
min-width: 100px;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.control-btn:active {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
background: rgba(76, 175, 80, 0.8);
|
||||
border-color: rgba(76, 175, 80, 0.9);
|
||||
}
|
||||
|
||||
.play-btn:active {
|
||||
background: rgba(76, 175, 80, 0.9);
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background: rgba(33, 150, 243, 0.8);
|
||||
border-color: rgba(33, 150, 243, 0.9);
|
||||
}
|
||||
|
||||
.refresh-btn:active {
|
||||
background: rgba(33, 150, 243, 0.9);
|
||||
}
|
||||
|
||||
/* 按钮图标样式 */
|
||||
.btn-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 15px 30px;
|
||||
border-radius: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px auto 0;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 简化的暂停占位符样式 */
|
||||
.pause-placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: #000000;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.pause-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pause-title {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="loading" id="loading">正在加载播放器...</div>
|
||||
<iframe id="player-iframe" allow="autoplay; fullscreen"></iframe>
|
||||
|
||||
<!-- 暂停时的占位符 -->
|
||||
<div class="pause-placeholder" id="pause-placeholder">
|
||||
<div class="pause-content">
|
||||
<div class="pause-title">监控已暂停</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="control-buttons" id="control-buttons" style="display: none;">
|
||||
<div class="control-btn play-btn" id="play-btn">
|
||||
<span class="btn-icon" id="play-icon">▶️</span>
|
||||
<span class="btn-text" id="play-text">播放</span>
|
||||
</div>
|
||||
<div class="control-btn refresh-btn" id="refresh-btn">
|
||||
<span class="btn-icon">🔄</span>
|
||||
<span class="btn-text">刷新</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function log(message) {
|
||||
console.log('[iframe播放器] ' + message);
|
||||
}
|
||||
|
||||
// 从URL参数获取配置
|
||||
function getConfig() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return {
|
||||
accessToken: params.get('accessToken'),
|
||||
playUrl: params.get('playUrl')
|
||||
};
|
||||
}
|
||||
|
||||
// 初始化播放器
|
||||
function init() {
|
||||
log('初始化开始');
|
||||
|
||||
const configData = getConfig();
|
||||
|
||||
if (!configData.accessToken || !configData.playUrl) {
|
||||
log('配置参数不完整');
|
||||
document.getElementById('loading').textContent = '配置参数错误';
|
||||
return;
|
||||
}
|
||||
|
||||
// 保存配置到全局变量
|
||||
config = {
|
||||
accessToken: configData.accessToken,
|
||||
playUrl: configData.playUrl
|
||||
};
|
||||
|
||||
log('AccessToken: ' + config.accessToken.substring(0, 20) + '...');
|
||||
log('PlayUrl: ' + config.playUrl);
|
||||
|
||||
try {
|
||||
// 使用萤石云官方iframe播放器（内存占用小）
|
||||
const iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
|
||||
'url=' + encodeURIComponent(config.playUrl) +
|
||||
'&accessToken=' + encodeURIComponent(config.accessToken) +
|
||||
'&width=100%' +
|
||||
'&height=100%' +
|
||||
'&autoplay=1' +
|
||||
'&audio=1' +
|
||||
'&controls=1';
|
||||
|
||||
log('iframe URL: ' + iframeUrl);
|
||||
|
||||
const iframe = document.getElementById('player-iframe');
|
||||
iframe.src = iframeUrl;
|
||||
|
||||
// 设置初始播放状态
|
||||
isPlaying = true;
|
||||
document.getElementById('play-text').textContent = '暂停';
|
||||
document.getElementById('play-icon').textContent = '⏸️';
|
||||
|
||||
// 隐藏loading，显示控制按钮
|
||||
setTimeout(() => {
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
document.getElementById('control-buttons').style.display = 'flex';
|
||||
log('播放器加载完成，显示控制按钮');
|
||||
}, 2000);
|
||||
|
||||
} catch (error) {
|
||||
log('初始化失败: ' + error.message);
|
||||
document.getElementById('loading').textContent = '初始化失败';
|
||||
}
|
||||
}
|
||||
|
||||
// 全局状态
|
||||
let isPlaying = true;
|
||||
let config = null;
|
||||
|
||||
// 播放/暂停控制
|
||||
function togglePlay() {
|
||||
log('切换播放状态: ' + (isPlaying ? '暂停' : '播放'));
|
||||
|
||||
const iframe = document.getElementById('player-iframe');
|
||||
const playText = document.getElementById('play-text');
|
||||
const playIcon = document.getElementById('play-icon');
|
||||
const pausePlaceholder = document.getElementById('pause-placeholder');
|
||||
|
||||
if (isPlaying) {
|
||||
// 暂停：清空iframe，显示占位符
|
||||
iframe.src = 'about:blank';
|
||||
pausePlaceholder.style.display = 'flex';
|
||||
playText.textContent = '播放';
|
||||
playIcon.textContent = '▶️';
|
||||
isPlaying = false;
|
||||
log('已暂停播放，显示占位符');
|
||||
} else {
|
||||
// 播放：重新设置iframe URL，隐藏占位符
|
||||
if (config) {
|
||||
const iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
|
||||
'url=' + encodeURIComponent(config.playUrl) +
|
||||
'&accessToken=' + encodeURIComponent(config.accessToken) +
|
||||
'&width=100%' +
|
||||
'&height=100%' +
|
||||
'&autoplay=1' +
|
||||
'&audio=1' +
|
||||
'&controls=1';
|
||||
|
||||
iframe.src = iframeUrl;
|
||||
pausePlaceholder.style.display = 'none';
|
||||
playText.textContent = '暂停';
|
||||
playIcon.textContent = '⏸️';
|
||||
isPlaying = true;
|
||||
log('已开始播放，隐藏占位符');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新播放器
|
||||
function refreshPlayer() {
|
||||
log('刷新播放器');
|
||||
|
||||
const iframe = document.getElementById('player-iframe');
|
||||
const playText = document.getElementById('play-text');
|
||||
const playIcon = document.getElementById('play-icon');
|
||||
const pausePlaceholder = document.getElementById('pause-placeholder');
|
||||
|
||||
// 先清空，显示加载状态
|
||||
iframe.src = 'about:blank';
|
||||
pausePlaceholder.style.display = 'none';
|
||||
|
||||
// 延迟重新加载
|
||||
setTimeout(() => {
|
||||
if (config) {
|
||||
const iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
|
||||
'url=' + encodeURIComponent(config.playUrl) +
|
||||
'&accessToken=' + encodeURIComponent(config.accessToken) +
|
||||
'&width=100%' +
|
||||
'&height=100%' +
|
||||
'&autoplay=1' +
|
||||
'&audio=1' +
|
||||
'&controls=1';
|
||||
|
||||
iframe.src = iframeUrl;
|
||||
playText.textContent = '暂停';
|
||||
playIcon.textContent = '⏸️';
|
||||
isPlaying = true;
|
||||
log('刷新完成');
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
window.onload = function() {
|
||||
log('页面加载完成');
|
||||
|
||||
// 绑定按钮事件
|
||||
document.getElementById('play-btn').addEventListener('click', togglePlay);
|
||||
document.getElementById('refresh-btn').addEventListener('click', refreshPlayer);
|
||||
|
||||
init();
|
||||
};
|
||||
|
||||
// 页面卸载时清理资源
|
||||
window.onbeforeunload = function() {
|
||||
log('页面即将卸载，清理播放器资源');
|
||||
try {
|
||||
const iframe = document.getElementById('player-iframe');
|
||||
if (iframe) {
|
||||
iframe.src = 'about:blank'; // 清空iframe源
|
||||
log('播放器资源已清理');
|
||||
}
|
||||
} catch (error) {
|
||||
log('清理播放器资源失败: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 页面隐藏时暂停播放
|
||||
document.addEventListener('visibilitychange', function() {
|
||||
if (document.hidden) {
|
||||
log('页面隐藏，暂停播放');
|
||||
try {
|
||||
const iframe = document.getElementById('player-iframe');
|
||||
if (iframe) {
|
||||
iframe.style.display = 'none';
|
||||
}
|
||||
} catch (error) {
|
||||
log('暂停播放失败: ' + error.message);
|
||||
}
|
||||
} else {
|
||||
log('页面显示，恢复播放');
|
||||
try {
|
||||
const iframe = document.getElementById('player-iframe');
|
||||
if (iframe) {
|
||||
iframe.style.display = 'block';
|
||||
}
|
||||
} catch (error) {
|
||||
log('恢复播放失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -18,11 +18,29 @@
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* 优化按钮样式 */
|
||||
.demo {
|
||||
/* padding: 0 12px; */
|
||||
}
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
/* margin-top: 12px; */
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<div class="demo">
|
||||
<button class="btn reset-btn" onclick="resetPlayer()">刷新播放器</button>
|
||||
<div id="video-container"></div>
|
||||
</div>
|
||||
<script>
|
||||
@ -48,43 +66,28 @@
|
||||
// 获取配置
|
||||
const config = getConfig();
|
||||
|
||||
// 验证参数
|
||||
if (!config.accessToken || !config.playUrl) {
|
||||
console.error('❌ 缺少必要参数！请在URL中提供 accessToken 和 playUrl');
|
||||
alert('缺少必要参数！\n需要: ?accessToken=xxx&playUrl=ezopen://...');
|
||||
} else {
|
||||
console.log('✅ 参数验证通过，开始创建播放器');
|
||||
|
||||
// 使用URL参数创建播放器
|
||||
// 封装创建播放器逻辑，便于复用
|
||||
function createPlayer(cfg) {
|
||||
console.log('🎬 开始创建播放器');
|
||||
player = new EZUIKit.EZUIKitPlayer({
|
||||
id: "video-container", // 视频容器ID
|
||||
url: config.playUrl,
|
||||
accessToken: config.accessToken,
|
||||
template: "voice", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
|
||||
|
||||
// 官方demo token
|
||||
// template: "voice",
|
||||
// url: "ezopen://open.ys7.com/BC7900686/1.live",
|
||||
// accessToken: "ra.84wglyar4c3r6hozd6u92ser0r854lbi-5c1dgl7mi6-1q2swlg-b0hpmwcqg",
|
||||
url: cfg.playUrl,
|
||||
accessToken: cfg.accessToken,
|
||||
template: "mobileRec", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
|
||||
|
||||
width: width,
|
||||
height: (width * 9) / 16,
|
||||
language: "zh", // zh | en
|
||||
env: {
|
||||
// https://open.ys7.com/help/1772?h=domain
|
||||
// domain默认是 https://open.ys7.com, 如果是私有化部署或海外的环境，请配置对应的domain
|
||||
domain: "https://open.ys7.com",
|
||||
},
|
||||
// 日志打印设置
|
||||
loggerOptions: {
|
||||
level: "INFO", // INFO LOG WARN ERROR
|
||||
name: "ezuikit",
|
||||
showTime: true,
|
||||
},
|
||||
// 视频流的信息回调类型
|
||||
streamInfoCBType: 1,
|
||||
// env: {
|
||||
// domain: "https://open.ys7.com",
|
||||
// },
|
||||
// loggerOptions: {
|
||||
// level: "INFO",
|
||||
// name: "ezuikit",
|
||||
// showTime: true,
|
||||
// },
|
||||
// streamInfoCBType: 1,
|
||||
staticPath: "./ezuikit_static", // 使用本地静态资源
|
||||
// 错误处理
|
||||
handleError: (error) => {
|
||||
console.error('❌ 播放器错误:', error);
|
||||
}
|
||||
@ -125,6 +128,15 @@
|
||||
console.log('🎬 播放器初始化完成');
|
||||
}
|
||||
|
||||
// 验证参数并创建初始播放器
|
||||
if (!config.accessToken || !config.playUrl) {
|
||||
console.error('❌ 缺少必要参数！请在URL中提供 accessToken 和 playUrl');
|
||||
alert('缺少必要参数！\n需要: ?accessToken=xxx&playUrl=ezopen://...');
|
||||
} else {
|
||||
console.log('✅ 参数验证通过，开始创建播放器');
|
||||
createPlayer(config);
|
||||
}
|
||||
|
||||
// 控制函数
|
||||
function fullScreen() {
|
||||
if (player) {
|
||||
@ -176,6 +188,28 @@
|
||||
player = null;
|
||||
}
|
||||
|
||||
// 重置播放器：销毁并重新创建
|
||||
function resetPlayer() {
|
||||
console.log('🔄 重置播放器：开始');
|
||||
// 清空容器内容，确保干净的DOM
|
||||
var container = document.getElementById('video-container');
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
}
|
||||
// 销毁旧实例
|
||||
destroy();
|
||||
// 重新获取配置（支持URL参数变更后刷新）
|
||||
var latestConfig = getConfig();
|
||||
if (!latestConfig.accessToken || !latestConfig.playUrl) {
|
||||
console.error('❌ 重置失败：缺少必要参数');
|
||||
alert('重置失败：缺少必要参数！\n需要: ?accessToken=xxx&playUrl=ezopen://...');
|
||||
return;
|
||||
}
|
||||
// 重新创建播放器
|
||||
createPlayer(latestConfig);
|
||||
console.log('✅ 重置完成：播放器已重新创建');
|
||||
}
|
||||
|
||||
// 页面卸载时清理
|
||||
window.onbeforeunload = function() {
|
||||
destroy();
|
||||
|
||||
427
故障排查流程.md
427
故障排查流程.md
@ -1,427 +0,0 @@
|
||||
# 萤石云播放器故障排查流程
|
||||
|
||||
> 快速定位和解决问题
|
||||
|
||||
---
|
||||
|
||||
## 🔍 问题诊断流程图
|
||||
|
||||
```
|
||||
视频无法播放
|
||||
↓
|
||||
是否显示黑屏？
|
||||
├─ 是 → 检查AccessToken
|
||||
│ ├─ 已过期 → 刷新Token
|
||||
│ └─ 有效 → 检查设备状态
|
||||
│
|
||||
└─ 否 → 是否显示加载中？
|
||||
├─ 是 → 检查网络
|
||||
│ ├─ 网络正常 → 检查play_url格式
|
||||
│ └─ 网络异常 → 修复网络
|
||||
│
|
||||
└─ 否 → APP是否崩溃？
|
||||
├─ 是 → 查看崩溃日志
|
||||
│ └─ OutOfMemoryError → 已使用iframe方案？
|
||||
│ ├─ 否 → 切换到iframe方案
|
||||
│ └─ 是 → 检查manifest.json
|
||||
│
|
||||
└─ 否 → 其他问题 → 查看详细日志
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚨 常见错误码速查
|
||||
|
||||
### 1. 黑屏不播放
|
||||
|
||||
**症状：**
|
||||
- 页面加载完成
|
||||
- 显示黑色屏幕
|
||||
- 无加载提示
|
||||
|
||||
**排查步骤：**
|
||||
|
||||
```javascript
|
||||
// ✅ 步骤1: 检查AccessToken
|
||||
console.log('AccessToken:', accessToken)
|
||||
console.log('Token长度:', accessToken.length) // 应该>50
|
||||
|
||||
// ✅ 步骤2: 检查play_url格式
|
||||
console.log('PlayUrl:', play_url)
|
||||
// 正确格式: ezopen://open.ys7.com/K74237657/1.hd.live
|
||||
|
||||
// ✅ 步骤3: 检查iframe URL
|
||||
console.log('iframeUrl:', iframeUrl)
|
||||
// 应该包含: https://open.ys7.com/ezopen/h5/iframe?
|
||||
|
||||
// ✅ 步骤4: 测试Token有效性
|
||||
uni.request({
|
||||
url: 'https://open.ys7.com/api/lapp/device/list',
|
||||
method: 'POST',
|
||||
data: { accessToken: accessToken },
|
||||
success: (res) => {
|
||||
console.log('Token测试结果:', res.data)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**解决方案：**
|
||||
```javascript
|
||||
// 方案1: 刷新Token
|
||||
uni.removeStorageSync('ezviz_access_token')
|
||||
const newToken = await tokenManager.getValidAccessToken()
|
||||
|
||||
// 方案2: 检查设备序列号
|
||||
// 确认设备序列号正确，格式: K74237657
|
||||
|
||||
// 方案3: 切换清晰度
|
||||
play_url: "ezopen://open.ys7.com/K74237657/1.sd.live" // 标清
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. APP 崩溃（OutOfMemoryError）
|
||||
|
||||
**症状：**
|
||||
```
|
||||
FATAL EXCEPTION: main
|
||||
java.lang.OutOfMemoryError: Failed to allocate...
|
||||
```
|
||||
|
||||
**检查清单：**
|
||||
|
||||
```bash
|
||||
# ✅ 1. 确认使用iframe方案
|
||||
grep -r "ezuikit.js" src/
|
||||
# 如果有结果 → 错误！不应该加载本地SDK
|
||||
|
||||
# ✅ 2. 检查manifest.json
|
||||
cat src/manifest.json | grep largeHeap
|
||||
# 应该有: "largeHeap": true
|
||||
|
||||
# ✅ 3. 查看实际内存使用
|
||||
adb shell dumpsys meminfo 包名
|
||||
```
|
||||
|
||||
**解决方案：**
|
||||
|
||||
```json
|
||||
// ① 确保manifest.json配置正确
|
||||
{
|
||||
"app-plus": {
|
||||
"compatible": {
|
||||
"largeHeap": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ② 使用iframe方案
|
||||
// src/static/html/ezviz-iframe.html
|
||||
<iframe src="https://open.ys7.com/ezopen/h5/iframe?..."></iframe>
|
||||
|
||||
// ③ 不要加载本地SDK
|
||||
// ❌ 删除这行：<script src="ezuikit.js"></script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. 组件引用错误
|
||||
|
||||
**症状：**
|
||||
```javascript
|
||||
Cannot read properties of undefined (reading 'initEzuikit')
|
||||
```
|
||||
|
||||
**原因分析：**
|
||||
```javascript
|
||||
// ❌ 错误代码
|
||||
this.$nextTick(() => {
|
||||
this.$refs.playerVideoRef.initEzuikit(config) // ref不存在！
|
||||
})
|
||||
this.ezstate = true // 这时才开始渲染
|
||||
|
||||
// 问题：ezstate=false时，组件不在DOM中，ref是undefined
|
||||
```
|
||||
|
||||
**解决方案：**
|
||||
```javascript
|
||||
// ✅ 正确代码
|
||||
// 1. 先渲染组件
|
||||
this.ezstate = true
|
||||
|
||||
// 2. 等待Vue更新DOM
|
||||
await this.$nextTick()
|
||||
|
||||
// 3. 安全调用（添加检查）
|
||||
if (this.$refs.playerVideoRef) {
|
||||
this.$refs.playerVideoRef.initEzuikit(config)
|
||||
} else {
|
||||
console.error('播放器组件未找到')
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. 视频画面变形
|
||||
|
||||
**症状：**
|
||||
- 视频能播放
|
||||
- 画面被拉伸或压缩
|
||||
- 不是原始比例
|
||||
|
||||
**检查代码：**
|
||||
```scss
|
||||
// ❌ 错误：直接设置固定高度
|
||||
.video-content {
|
||||
width: 100%;
|
||||
height: 100vh; // 会导致变形！
|
||||
}
|
||||
|
||||
// ✅ 正确：使用padding-top保持16:9
|
||||
.video-content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 56.25%; /* 16:9比例 */
|
||||
}
|
||||
|
||||
:deep(.simple-video-player) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**其他比例参考：**
|
||||
```scss
|
||||
/* 16:9 */ padding-top: 56.25%;
|
||||
/* 4:3 */ padding-top: 75%;
|
||||
/* 1:1 */ padding-top: 100%;
|
||||
/* 21:9 */ padding-top: 42.86%;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. 加载很慢
|
||||
|
||||
**症状：**
|
||||
- 长时间显示"正在加载..."
|
||||
- 超过10秒没反应
|
||||
|
||||
**排查步骤：**
|
||||
|
||||
```javascript
|
||||
// ✅ 1. 测试网络速度
|
||||
uni.request({
|
||||
url: 'https://open.ys7.com',
|
||||
success: (res) => {
|
||||
console.log('萤石云连接正常')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('网络异常:', err)
|
||||
}
|
||||
})
|
||||
|
||||
// ✅ 2. 切换清晰度
|
||||
// 高清 → 标清
|
||||
play_url: "ezopen://open.ys7.com/K74237657/1.sd.live"
|
||||
|
||||
// ✅ 3. 检查设备状态
|
||||
import deviceChecker from '@/utils/ezvizDeviceChecker.js'
|
||||
const result = await deviceChecker.comprehensiveCheck(play_url)
|
||||
console.log('设备状态:', result)
|
||||
```
|
||||
|
||||
**优化方案：**
|
||||
```javascript
|
||||
// 方案1: 预加载AccessToken
|
||||
onLoad() {
|
||||
// 提前获取token
|
||||
tokenManager.getValidAccessToken()
|
||||
}
|
||||
|
||||
// 方案2: 添加超时处理
|
||||
setTimeout(() => {
|
||||
if (this.loading) {
|
||||
this.error = true
|
||||
this.errorText = '加载超时，请重试'
|
||||
}
|
||||
}, 15000) // 15秒超时
|
||||
|
||||
// 方案3: 使用标清
|
||||
play_url: "ezopen://open.ys7.com/K74237657/1.sd.live"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠 调试工具
|
||||
|
||||
### 1. Chrome 远程调试
|
||||
|
||||
```bash
|
||||
# ① 启用ADB调试
|
||||
adb devices
|
||||
|
||||
# ② 在Chrome中打开
|
||||
chrome://inspect/#devices
|
||||
|
||||
# ③ 找到WebView进程，点击inspect
|
||||
```
|
||||
|
||||
### 2. ADB 日志查看
|
||||
|
||||
```bash
|
||||
# 查看所有日志
|
||||
adb logcat
|
||||
|
||||
# 只看错误
|
||||
adb logcat *:E
|
||||
|
||||
# 过滤关键字
|
||||
adb logcat | grep -i "chromium\|console\|memory"
|
||||
|
||||
# 查看崩溃日志
|
||||
adb logcat | grep -i "fatal\|crash"
|
||||
```
|
||||
|
||||
### 3. 控制台调试
|
||||
|
||||
```javascript
|
||||
// 在Vue组件中
|
||||
console.log('[调试] 初始化配置:', config)
|
||||
console.log('[调试] ref存在:', !!this.$refs.playerVideoRef)
|
||||
console.log('[调试] ezstate:', this.ezstate)
|
||||
|
||||
// 在HTML中
|
||||
<script>
|
||||
console.log('[iframe] 开始初始化')
|
||||
console.log('[iframe] AccessToken:', accessToken.substring(0, 20))
|
||||
console.log('[iframe] PlayUrl:', playUrl)
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 完整检查清单
|
||||
|
||||
### 部署前检查
|
||||
|
||||
```
|
||||
□ 萤石云账号配置
|
||||
□ AppKey已配置
|
||||
□ AppSecret已配置
|
||||
□ 设备序列号正确
|
||||
□ 验证码正确
|
||||
|
||||
□ 文件完整性
|
||||
□ EzvizVideoPlayerSimple.vue 存在
|
||||
□ ezviz-iframe.html 存在
|
||||
□ ezvizTokenManager.js 存在
|
||||
□ pages.json 配置正确
|
||||
□ manifest.json 配置正确
|
||||
|
||||
□ 代码正确性
|
||||
□ 使用iframe方案（非SDK）
|
||||
□ 组件调用顺序正确
|
||||
□ 16:9比例设置正确
|
||||
□ 横屏配置正确
|
||||
|
||||
□ 功能测试
|
||||
□ AccessToken获取成功
|
||||
□ 视频能正常播放
|
||||
□ 播放/暂停功能正常
|
||||
□ 刷新功能正常
|
||||
□ 切换摄像头正常
|
||||
```
|
||||
|
||||
### 运行时检查
|
||||
|
||||
```
|
||||
□ 网络连接正常
|
||||
□ AccessToken未过期
|
||||
□ 设备在线
|
||||
□ 内存占用<200MB
|
||||
□ 无崩溃
|
||||
□ 画面不变形
|
||||
□ 音频正常
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🆘 紧急修复
|
||||
|
||||
### 快速恢复（5分钟）
|
||||
|
||||
如果系统完全不能用，按以下步骤快速恢复：
|
||||
|
||||
```javascript
|
||||
// ① 清除所有缓存
|
||||
uni.clearStorageSync()
|
||||
|
||||
// ② 使用备用Token（临时）
|
||||
const backupConfig = {
|
||||
accessToken: "at.4dd7o6hgdb9ywl9c283g0hj27e789uru-2a5ejk6tkf-19b1cb1-azyfqm3a",
|
||||
play_url: "ezopen://open.ys7.com/K74237657/1.sd.live" // 标清
|
||||
}
|
||||
|
||||
// ③ 重启APP
|
||||
// 在 APP.vue 的 onLaunch 中清除缓存
|
||||
onLaunch() {
|
||||
console.log('APP启动，清除缓存')
|
||||
uni.clearStorageSync()
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📞 获取帮助
|
||||
|
||||
### 查看日志位置
|
||||
|
||||
```
|
||||
✅ Vue组件日志：开发者工具 Console
|
||||
✅ APP日志：adb logcat
|
||||
✅ web-view日志：Chrome inspect
|
||||
✅ 萤石云日志：萤石云控制台
|
||||
```
|
||||
|
||||
### 常用命令
|
||||
|
||||
```bash
|
||||
# 连接设备
|
||||
adb devices
|
||||
|
||||
# 查看日志
|
||||
adb logcat | grep -i "console"
|
||||
|
||||
# 清除APP数据
|
||||
adb shell pm clear 包名
|
||||
|
||||
# 重启APP
|
||||
adb shell am force-stop 包名
|
||||
adb shell am start 包名/.MainActivity
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔗 相关文档
|
||||
|
||||
- 📖 [完整指南](./萤石云APP对接完整指南.md)
|
||||
- 📝 [快速参考](./README-萤石云对接.md)
|
||||
- 🌐 [萤石云API文档](https://open.ys7.com/doc/)
|
||||
|
||||
---
|
||||
|
||||
**最后更新：** 2025-10-06
|
||||
**版本：** v1.0
|
||||
|
||||
---
|
||||
|
||||
💡 **提示：** 90%的问题都是 AccessToken 过期或配置错误导致的！
|
||||
|
||||
Reference in New Issue
Block a user