8.2 KiB
8.2 KiB
萤石云播放器故障排查流程
快速定位和解决问题
🔍 问题诊断流程图
视频无法播放
↓
是否显示黑屏？
├─ 是 → 检查AccessToken
│ ├─ 已过期 → 刷新Token
│ └─ 有效 → 检查设备状态
│
└─ 否 → 是否显示加载中？
├─ 是 → 检查网络
│ ├─ 网络正常 → 检查play_url格式
│ └─ 网络异常 → 修复网络
│
└─ 否 → APP是否崩溃？
├─ 是 → 查看崩溃日志
│ └─ OutOfMemoryError → 已使用iframe方案？
│ ├─ 否 → 切换到iframe方案
│ └─ 是 → 检查manifest.json
│
└─ 否 → 其他问题 → 查看详细日志
🚨 常见错误码速查
1. 黑屏不播放
症状：
- 页面加载完成
- 显示黑色屏幕
- 无加载提示
排查步骤：
// ✅ 步骤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)
}
})
解决方案：
// 方案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...
检查清单：
# ✅ 1. 确认使用iframe方案
grep -r "ezuikit.js" src/
# 如果有结果 → 错误！不应该加载本地SDK
# ✅ 2. 检查manifest.json
cat src/manifest.json | grep largeHeap
# 应该有: "largeHeap": true
# ✅ 3. 查看实际内存使用
adb shell dumpsys meminfo 包名
解决方案：
// ① 确保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. 组件引用错误
症状：
Cannot read properties of undefined (reading 'initEzuikit')
原因分析：
// ❌ 错误代码
this.$nextTick(() => {
this.$refs.playerVideoRef.initEzuikit(config) // ref不存在！
})
this.ezstate = true // 这时才开始渲染
// 问题：ezstate=false时，组件不在DOM中，ref是undefined
解决方案：
// ✅ 正确代码
// 1. 先渲染组件
this.ezstate = true
// 2. 等待Vue更新DOM
await this.$nextTick()
// 3. 安全调用（添加检查）
if (this.$refs.playerVideoRef) {
this.$refs.playerVideoRef.initEzuikit(config)
} else {
console.error('播放器组件未找到')
}
4. 视频画面变形
症状：
- 视频能播放
- 画面被拉伸或压缩
- 不是原始比例
检查代码：
// ❌ 错误：直接设置固定高度
.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%;
}
}
其他比例参考：
/* 16:9 */ padding-top: 56.25%;
/* 4:3 */ padding-top: 75%;
/* 1:1 */ padding-top: 100%;
/* 21:9 */ padding-top: 42.86%;
5. 加载很慢
症状：
- 长时间显示"正在加载..."
- 超过10秒没反应
排查步骤：
// ✅ 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)
优化方案：
// 方案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 远程调试
# ① 启用ADB调试
adb devices
# ② 在Chrome中打开
chrome://inspect/#devices
# ③ 找到WebView进程，点击inspect
2. ADB 日志查看
# 查看所有日志
adb logcat
# 只看错误
adb logcat *:E
# 过滤关键字
adb logcat | grep -i "chromium\|console\|memory"
# 查看崩溃日志
adb logcat | grep -i "fatal\|crash"
3. 控制台调试
// 在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分钟）
如果系统完全不能用，按以下步骤快速恢复：
// ① 清除所有缓存
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
✅ 萤石云日志：萤石云控制台
常用命令
# 连接设备
adb devices
# 查看日志
adb logcat | grep -i "console"
# 清除APP数据
adb shell pm clear 包名
# 重启APP
adb shell am force-stop 包名
adb shell am start 包名/.MainActivity
🔗 相关文档
最后更新： 2025-10-06
版本： v1.0
💡 提示： 90%的问题都是 AccessToken 过期或配置错误导致的！