实时音视频Web接入——异常处理

不同于一般的Web应用开发，实时音视频对网络质量的要求更高，过往对Web应用开发的经验在实时音视频场景下是不够的。下面我总结一些实际业务场景可能会遇到的问题，以及相应的处理方法。

在接入API文档中，可以将错误类型大致分为2类，回调和通知。

回调错误符合常规的Web开发习惯，理解上也没有难度，这里我主要介绍通知类型的错误。

α. 怎么办

1. 处理流程

2. 代码示例

代码语言：javascript复制

// 下面代码的 client 是 client实例
// https://www.qcloudtrtc.com/trtc-web-sdk/docs/api/Client.html

// 异常监听
client.on('error', error => {
  // 业务侧数据上报
  let errorCode = error.getCode()
  let errorCodeHex = `0x${errorCode.toString(16)}`
  console.error('[trtc] client error observed: '   error)
  switch (errorCode) {
    case 0x4001:
      retryOrReload('websocket 初始化失败', errorCodeHex)
      break
    case 0x4002:
      retryOrReload('websocket 信令通道异常', errorCodeHex)
      break
    case 0x4003:
    case 0x4005:
      retryOrReload('音视频数据传输通道错误', errorCodeHex)
      break
    case 0x4004:
      retryOrReload('进房失败', errorCodeHex)
      break
    case 0x4041:
      retryOrReload('媒体传输服务超时', errorCodeHex)
      break
    case 0x4042:
      retryOrReload('远端流订阅超时', errorCodeHex)
      break
    case 0xffff:
      retryOrReload('未知错误', errorCodeHex)
      break
    default:
      retryOrReload(`错误代码 ${errorCode}（0x${errorCode.toString(16)}）`, errorCodeHex)
      break
  }
})

// 重连逻辑
// 建议有一个重连的上限，例如 3 次，这里只做重连操作
const retryMaxTimes = 3

function retryOrReload(msg, code) {
    // 经过了若干次尝试仍然无法重连成功
    if ( retryTimes > retryMaxTimes) {
        alert( `网络状态异常(${code})，请您检查网络连接刷新页面尝试重连。`)
        return
    }
    // 重连逻辑，离开，再加入房间
    client
      .leave()
      .then(() => {
        client.join({... }).catch(e => {
          retryOrReload(msg)
        })
      })
      .catch(e => {
        retryOrReload(msg)
      })
}

上面回答了怎么办问题。如果想了解背后的逻辑，可以往下看。

β. 为什么

1. 错误的类型这么多，为什么最后只给用户弹出一个网络状态异常的提示？

用户不是开发者，不必也无需了解这些背后的原因，你只需要告诉他结论，以及怎么办，就够了。

2. 其他问题

可以评论留言

实时音视频

0 人点赞