428 lines
8.2 KiB
Markdown
428 lines
8.2 KiB
Markdown
# 萤石云播放器故障排查流程
|
||
|
||
> 快速定位和解决问题
|
||
|
||
---
|
||
|
||
## 🔍 问题诊断流程图
|
||
|
||
```
|
||
视频无法播放
|
||
↓
|
||
是否显示黑屏?
|
||
├─ 是 → 检查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 过期或配置错误导致的!
|
||
|