diff --git a/rtsp-vue/src/views/video/device/component/cusPlayer.vue b/rtsp-vue/src/views/video/device/component/cusPlayer.vue index c387b93..86645ea 100644 --- a/rtsp-vue/src/views/video/device/component/cusPlayer.vue +++ b/rtsp-vue/src/views/video/device/component/cusPlayer.vue @@ -76,13 +76,15 @@ export default { }, flvOptionalConfig: { enableWorker: false, // 禁用 Worker,便于调试 - enableStashBuffer: false, //关闭缓存 - stashInitialSize: 128, // 减小初始缓存,加快启动 - lazyLoad: false, + enableStashBuffer: true, // ⚠️ 必须启用缓存,否则无法播放 + stashInitialSize: 128, // 初始缓存大小 (KB) + isLive: true, // 明确标记为直播流 + lazyLoad: false, // 禁用懒加载 lazyLoadMaxDuration: 3 * 60, - autoCleanupSourceBuffer: true, + autoCleanupSourceBuffer: true, // 自动清理缓冲区 autoCleanupMaxBackwardDuration: 3 * 60, autoCleanupMinBackwardDuration: 2 * 60, + fixAudioTimestampGap: true, // 修复音频时间戳间隙 // 关键:启用详细日志 enableLogging: true, logLevel: 'debug' @@ -98,7 +100,13 @@ export default { // 监听 flv.js 的统计信息 this.player.flv.on('statistics_info', (stats) => { - console.log('📈 flv.js 统计:', stats); + console.log('📈 flv.js 统计:', { + speed: stats.speed, + videoBufferSize: stats.videoBufferSize, + audioBufferSize: stats.audioBufferSize, + decodedFrames: stats.decodedFrames, + droppedFrames: stats.droppedFrames + }); }); // 监听 flv.js 的错误 @@ -107,7 +115,27 @@ export default { console.error(' 类型:', errorType); console.error(' 详情:', errorDetail); console.error(' 信息:', errorInfo); + + // 常见错误处理提示 + if (errorType === 'NetworkError') { + console.error(' => 网络错误,检查后端服务是否正常'); + } else if (errorType === 'MediaError') { + console.error(' => 媒体解码错误,可能是视频格式不支持'); + console.error(' => 请确认后端 FFmpeg 使用 H.264 (baseline) + AAC 编码'); + } }); + + // 监听元数据解析 + this.player.flv.on('metadata_arrived', (metadata) => { + console.log('📦 FLV 元数据:', metadata); + }); + + // 监听视频数据解析 + this.player.flv.on('scriptdata_arrived', (data) => { + console.log('📜 FLV 脚本数据:', data); + }); + } else { + console.warn('⚠️ flv.js 实例不存在,无法监听事件'); } // 监听播放器错误