移动端Web接入腾讯云TRTC实践（React+TS）

实时音视频服务在项目中出现的频率越来越高的，自己写webRTC的成本相对腾讯云的TRTC-SDK要多大得多，最近公司项目移动端和PC端Web(React+TS)小程序（Taro）中都有使用到，这里针对移动端web做实时通话做个记录与大家交流下

TRTC流程图

相信准备接入或者已经在接入TRTC的小伙伴是看过文档实时音视频，这里不说这些概念了，直接上代码

一、安装TRTC依赖

pnpm i trtc-js-sdk @types/trtc-js-sdk -D

二、初始化TRTC实例

import TRTC from 'trtc-js-sdk'
// 创建TRTC实例
trtcInstance.current = TRTC.createClient({ 
    sdkAppId, // 腾讯云申请的appId
    userSig, // 用户签名，后端获取
    userId, // 随机生成的用户ID，不可重复
    mode: 'rtc' // 实时音视频通话模式
})
// 创建本地流Stream
localStreamRef.current = TRTC.createStream({ userId, audio: true, video: false })
// 绑定TRTC事件
bindTRTCEvent()

三、绑定TRTC事件

// TRTCEvent 可自行从trtc-js-sdk中获取到

trtcInstance.current?.on(TRTCEvent.NETWORK_QUALITY, (event) => {
  subscribeTrtcNetwork?.(event)
  // 监听网络变化 
  if (event.uplinkNetworkQuality > 3 || uplinkLoss > 3) {
     // 本地用户网络差，uplinkLoss（丢包率） 的值可自行调试
  } else if (network.downlinkNetworkQuality > 3 || network.downlinkLoss > 3) {
     // 远端用户网络差，downlinkLoss（丢包率） 的值可自行调试
  }
})
// 添加远程流
trtcInstance.current?.on(TRTCEvent.STREAM_ADDED, (event) => {
  const remoteStream = event.stream
  trtcInstance.current?.subscribe(remoteStream)
    .then(() => {
       // 远端用户进入房间
    })
    .catch((error) => {
      // 远端进入房间失败
    })
})
// 订阅远程流
trtcInstance.current?.on(TRTCEvent.STREAM_SUBSCRIBED, (event) => {
  const remoteStream = event.stream
  remoteStream.on('error', (error) => {
    // 远端流异常
  })
  // 创建播放容器
  const remotePlayerElement = document.createElement('div')
  remotePlayerElement.id = 'remote-stream-' + remoteStream.getId()
  document.body.appendChild(remotePlayerElement)
  remoteStream.play(remotePlayerElement.id)
})
// 有用户被赶出事件
trtcInstance.current?.on(TRTCEvent.CLIENT_BANNED, (error) => {
    // 远端用户异常推出房间
})
// 远端用户推流断开
trtcInstance.current?.on(TRTCEvent.STREAM_REMOVED, (event) => {
  // 远端用户推流断开
  const remoteStream = event.stream
  remoteStream.stop()
  remoteStream.close() // 离开房间释放资源
})
// 远端用户离开房间
trtcInstance.current?.on(TRTCEvent.PEER_LEAVE, (event) => {
  // 远端用户离开房间
})

四、进入房间

await trtcInstance.current?.join({ roomId })
// 初始化本地音视频流
await localStream.current?.initialize?.()
// 本地需创建一个localStream的dom
localStream.current?.play?.('localStream')
if (localStream?.current) {
    await trtcInstance.current?.publish?.(localStream.current)
}

五、退出房间

if (trtcInstance.current &&  localStream.current) {
  await trtcInstance.current?.unpublish?.(localStreamRef?.current)
  await trtcInstance.current?.leave()
  localStreamRef.current?.stop()
  localStreamRef.current?.close()
}

六、完整demo (hooks，无UI)

import { useRef } from 'react'
import TRTC, { Client, LocalStream } from 'trtc-js-sdk'

const useTRTC = () => {
  const trtcInstance = useRef<Client | null>(null)
  const localStream = useRef<LocalStream | null>(null)
  
  const init = () => {
      try {
        // 创建TRTC实例
        trtcInstance.current = TRTC.createClient({ 
            sdkAppId, // 腾讯云申请的appId
            userSig, // 用户签名，后端获取
            userId, // 随机生成的用户ID，不可重复
            mode: 'rtc' // 实时音视频通话模式
        })
        // 创建本地流Stream
        localStream.current = TRTC.createStream({ userId, audio: true, video: false })
        // 绑定TRTC事件
        bindTRTCEvent()
      } catch(error) {
        console.log('初始化TRTC失败', error)
      } 
  }
  
  const enterRoom = async () => {
    try {
         await trtcInstance.current?.join({ roomId })
        // 初始化本地音视频流
        await localStream.current?.initialize?.()
        // 本地需创建一个localStream的dom
        localStream.current?.play?.('localStream')
        if (localStream?.current) {
            await trtcInstance.current?.publish?.(localStream.current)
        }
    } catch (error) {
        console.log('进入房间失败', error)
    }
  }
  
  const exitRoom = async () => {
    if (trtcInstance.current &&  localStream.current) {
      await trtcInstance.current?.unpublish?.(localStream?.current)
      await trtcInstance.current?.leave()
      localStream.current?.stop()
      localStream.current?.close()
    }
  }
  
  const bindTRTCEvent = () => {
    trtcInstance.current?.on(TRTCEvent.NETWORK_QUALITY, (event) => {
      subscribeTrtcNetwork?.(event)
      // 监听网络变化 
      if (event.uplinkNetworkQuality > 3 || uplinkLoss > 3) {
         // 本地用户网络差，uplinkLoss（丢包率） 的值可自行调试
      } else if (network.downlinkNetworkQuality > 3 || network.downlinkLoss > 3) {
         // 远端用户网络差，downlinkLoss（丢包率） 的值可自行调试
      }
    })
// 添加远程流
    trtcInstance.current?.on(TRTCEvent.STREAM_ADDED, (event) => {
        const remoteStream = event.stream
        trtcInstance.current?.subscribe(remoteStream)
          .then(() => {
             // 远端用户进入房间
          })
          .catch((error) => {
            // 远端进入房间失败
          })
    })
    // 订阅远程流
    trtcInstance.current?.on(TRTCEvent.STREAM_SUBSCRIBED, (event) => {
        const remoteStream = event.stream
        remoteStream.on('error', (error) => {
          // 远端流异常
        })
        // 创建播放容器
        const remotePlayerElement = document.createElement('div')
        remotePlayerElement.id = 'remote-stream-' + remoteStream.getId()
        document.body.appendChild(remotePlayerElement)
        remoteStream.play(remotePlayerElement.id)
    })
    // 有用户被赶出事件
    trtcInstance.current?.on(TRTCEvent.CLIENT_BANNED, (error) => {
        // 远端用户异常推出房间
    })
    // 远端用户推流断开
    trtcInstance.current?.on(TRTCEvent.STREAM_REMOVED, (event) => {
        // 远端用户推流断开
        const remoteStream = event.stream
        remoteStream.stop()
        remoteStream.close() // 离开房间释放资源
    })
    // 远端用户离开房间
    trtcInstance.current?.on(TRTCEvent.PEER_LEAVE, (event) => {
        // 远端用户离开房间
    })
  }
  return {
      init,
      enterRoom,
      exitRoom,
      ....
  }
}

以上是TRTC的流程，除了这些，我们还有其他的重要流程，如：

• 授权麦克风、摄像头权限（这里只针对麦克风）
• 关闭麦克风
• 通话期间保持常亮
• 当前标签页是否进入后台
• …(其他的还有的可交流)

注意：由于浏览器的安全策略，音视频自动播放必须用户与页面产生交互，否则无法自动播放；

移动端目前无法实现听筒和扬声器的切换（如果有小伙伴有实现方案，可以交流下）

其他更多的业务层的逻辑了，如有疑惑的，欢迎探讨，如果对你有帮助的，请手动点赞，谢谢！