使用 chrome://media-internals 更好的进行音视频 Debug

随着短视频和在线教育办公的兴起,我们非常倚重浏览器的音视频项目开发。

Chrome 提供了一款非常好的内部状态栏,帮助我们去了解当前音视频的编码,buffer 状态等信息。

我们可以随机打开两个在线视频播放网站比如:

https://www.bilibili.com/bangumi/play/ep313573

https://v.youku.com/v_show/id_XMzQ2OTk2Mjky.html

然后我们可以在浏览器新建 tab 输入 chrome://media-internals/

我们可以看到四个 tab

  • Players 当前播放视频的日志信息
  • Audio 当前音频的播放日志信息
  • Video Capture 当前摄像头的状况
  • Audio Focus 当前音频播放的 Session

其中我们主要关心前两个 Tab。

Players 我们是一个看到一个历史纪录,我们可以根据视频的 CDN 源找到当前正在播放的视频。然后点击,最底部我们可以在最底部看到两栏,Player PropertiesLog

如图,我们比较关心的是 kAudioTrackskVideoTracks 分别是音视频编码信息。

其次我们可以关心下 video_buffering_stateaudio_buffering_state 来确定当前视频的 Buffer 状态;

我们再关注下 Log 这一栏。它包含了常规的多媒体日志信息和网络日志信息。

我们可以看到左边是时间戳,右边具体解码信息。我们可以对比来确认当前视频片段的解码状态。

如果你在和CDN 服务的同学沟通编解码和视频状态的,可以通过这个小工具的信息来协助反馈。

扩展阅读

https://www.chromium.org/audio-video/media-internals