在HTML5场景中播放RTSP流时，由于RTSP协议本身不被浏览器原生支持，通常需要通过转码、转协议或者借助插件、WebAssembly方案来实现播放，不同实现方式的日志查看和抓取方法存在区别，下面分场景介绍具体操作流程。
浏览器原生开发者工具查看日志
大部分HTML5播放RTSP的方案都会依赖浏览器的网络请求和JS运行环境，首先可以通过浏览器自带的开发者工具查看基础日志。
Console面板查看JS运行日志
如果播放逻辑中通过console.log、console.error等方法输出了播放相关的状态信息，打开开发者工具的Console面板就可以直接看到这些日志。比如播放初始化、连接建立、数据接收、播放错误等阶段的自定义日志都会在这里展示。
Network面板查看网络请求日志
如果是通过WebSocket转RTSP、或者通过HTTP-FLV、HLS等中间协议播放RTSP转码后的流，可以在Network面板查看对应的网络请求详情，包括请求状态、响应头、传输数据大小、耗时等信息，帮助判断是RTSP源端问题还是转码服务问题。
常见RTSP播放方案的日志抓取方法
基于WebRTC转RTSP的方案
这种方案通常会把RTSP流转换为WebRTC流在HTML5端播放，日志抓取需要同时关注前端和后端服务。
前端部分除了浏览器Console的日志，还可以通过WebRTC自带的统计接口获取播放相关的内部状态，示例代码如下：
// 获取WebRTC播放器的peerConnection实例后，调用getStats方法获取统计信息
function getWebRTCStats(peerConnection) {
peerConnection.getStats().then(stats => {
stats.forEach(report => {
// 筛选与接收相关的统计项
if (report.type === 'inbound-rtp' && report.kind === 'video') {
console.log('视频接收帧率:', report.framesPerSecond);
console.log('视频丢包数:', report.packetsLost);
console.log('接收字节数:', report.bytesReceived);
}
});
}).catch(err => {
console.error('获取WebRTC统计信息失败:', err);
});
}
后端转码服务需要开启对应的日志输出，比如常用的Janus、SRS等服务，都可以通过配置文件开启debug级别的日志，记录RTSP拉流、转封装、WebRTC推流的全流程信息。
基于WebAssembly的RTSP播放方案
这类方案会把RTSP客户端逻辑编译为WebAssembly在浏览器中运行，日志通常需要通过自定义的输出接口传递到JS层。一般播放库会提供日志回调的配置项，示例代码如下：
// 假设播放库提供了setLogCallback方法
import RTSPPlayer from './rtsp-player.js';
const player = new RTSPPlayer();
// 设置日志回调函数，将所有播放库内部的日志输出到Console
player.setLogCallback((level, msg) => {
switch(level) {
case 'debug':
console.debug('[RTSP_PLAYER]', msg);
break;
case 'error':
console.error('[RTSP_PLAYER]', msg);
break;
default:
console.log('[RTSP_PLAYER]', msg);
}
});
// 初始化播放
player.init('rtsp://192.168.0.1:554/stream1', 'video-container');
基于插件（如VLC Web插件）的方案
这类方案依赖浏览器插件运行，日志通常需要查看插件本身输出的日志，不同浏览器的插件日志位置不同，比如Chrome的插件日志一般在用户目录下的Chrome配置文件夹中，也可以通过插件提供的接口将日志输出到页面Console中。
日志关键信息识别
拿到播放日志后，需要重点关注以下几类信息来定位问题：
- 连接类信息：RTSP握手是否成功、OPTIONS/DESCRIBE/SETUP/PLAY等请求是否有正常响应，响应码是否为200。
- 数据类信息：是否有接收到RTP包、是否有丢包、视频编码格式是否被播放端支持、是否有解码错误。
- 错误类信息：是否有超时错误、认证失败错误、资源不存在错误、解码器初始化失败错误。
日志抓取注意事项
如果是生产环境排查问题，建议先开启info级别的日志，避免debug级别日志量过大影响性能。如果是本地调试，可以开启全量debug日志，获取更详细的播放流程信息。另外如果需要复现偶现问题，可以提前配置好日志自动保存功能，避免日志过多被浏览器覆盖。
如果播放使用的是自定义协议或者私有方案，需要联系方案提供方获取对应的日志输出配置说明，按照官方指引开启对应的日志模块，才能获取到完整的播放流程日志。