flv异常处理办法

用 flv.js 接入直播流的过程会遇到各种问题,有的是后端数据流的问题,有的是前端处理逻辑的问题。因为流是实时获取,flv 也是实时转化输出,因此一旦发生错误,浏览器控制台会循环连续的打印异常。
 
如果你用 react 和 ts,满屏异常,你都无法开发下去了。再有直播流本来就可能发生许多异常,因此错处理非常关键。
 
官方对异常处理的说明不太明显,我简单总结一下:
 
首先,flv.js 的异常分为两个级别,可以看作是 一级异常 和 二级异常。
 
再有,flv.js 有一个特殊之处,它的 事件 和 错误 都是用枚举来表示,如下:
 
flvjs.Events:表示事件
flvjs.ErrorTypes:表示一级异常
flvjs.ErrorDetails:表示二级异常
下面介绍的异常和事件,都是基于上述枚举,你可以理解为是枚举下的一个 key 值。
 
一级异常有三类:
 
NETWORK_ERROR:网络错误,表示连接问题
MEDIA_ERROR:媒体错误,格式或解码问题
OTHER_ERROR:其他错误
二级级异常常用的有三类:
 
NETWORK_STATUS_CODE_INVALID:HTTP 状态码错误,说明 url 地址有误
NETWORK_TIMEOUT:连接超时,网络或后台问题
MEDIA_FORMAT_UNSUPPORTED:媒体格式不支持,一般是流数据不是 flv 的格式
了解这些之后,我们在播放器实例上监听异常:
flv异常处理
// 监听错误事件
flvPlayer.on(flvjs.Events.ERROR, (err, errdet) => {
  // 参数 err 是一级异常,errdet 是二级异常
  if (err == flvjs.ErrorTypes.MEDIA_ERROR) {
    console.log('媒体错误')
    if(errdet == flvjs.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED) {
      console.log('媒体格式不支持')
    }
  }
  if (err == flvjs.ErrorTypes.NETWORK_ERROR) {
    console.log('网络错误')
    if(errdet == flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {
      console.log('http状态码异常')
    }
  }
  if(err == flvjs.ErrorTypes.OTHER_ERROR) {
    console.log('其他异常:', errdet)
  }
}
除此之外,自定义播放/暂停逻辑,还需要知道加载状态。可以通过以下方法监听视频流加载完成:
 
 
player.on(flvjs.Events.METADATA_ARRIVED, () => {
  console.log('视频加载完成')
})

【本文关键词】:flv异常处理