Vue实现腾讯云_音视频通话的推拉流

目标：单对单通信
大部分异步使用 async await 进行同步，try catch 捕获错误处理
先放一个流程图，解决80%的问题

安装 TRTC Web SDK

安装

npm install trtc-js-sdk --save

需要的页面中引入，或者全局引入

import TRTC from 'trtc-js-sdk'

创建 client,stream

created中创建,存入当前页面的全局即可，不需要放入data中
TRTC.createClient
TRTC.createStream

rtcClient = TRTC.createClient({
  mode: 'rtc',
  sdkAppId: sdkAppId,
  userId: userId,
  userSig: userSig
  // autoSubscribe: false
})
localStream = TRTC.createStream({
  userId: userId,
  audio: true,
  video: true
})

join之后开启监听

join之后开启监听，拉流主要在 on监听中的 stream-added 中监听获取，然后拿到流使用 remoteStream.play() 在指定dom id中添加video进行播放

在 stream-leave中监听用户是否离开房间，做相应的处理。

rtcClient.join
remoteStream.play
rtcClient.on
on监听事件

await rtcClient.join({ roomId: id })
// 开启监听
this.handleClientEvents()
// 音视频监听
handleClientEvents() {
  // 错误
  rtcClient.on('error', (error) => {
    const errorCode = error.getCode()
    if (errorCode === 0x4043) {
      console.log('PLAY_NOT_ALLOWED')
      // PLAY_NOT_ALLOWED,引导用户手势操作并调用 stream.resume 恢复音视频播放
      // stream.resume()
    }
  })
  // 远端流添加事件，当远端用户发布流后会收到该通知。
  rtcClient.on('stream-added', (event) => {
    console.log('stream-added', event)
    // 远端流添加，在此进行处理
    const remoteStream = event.stream
    remoteStream.play('dom id').catch((error) => {
      console.log(error, 'play error')
    })
  })
  // 远端流更新事件，当远端用户添加、移除或更换音视频轨道后会收到该通知。
  rtcClient.on('stream-update', (event) => {
    console.log('stream-update', event)
    
  })
  // 远端流移除事件，当远端用户取消发布流后会收到该通知。
  rtcClient.on('stream-removed', (event) => {
    // this.$message.error('患者端视频推送异常，播放失败！')
    console.log('stream-removed', event)
  })
  // 远端流订阅成功事件，调用 subscribe() 成功后会触发该事件。
  rtcClient.on('stream-subscribed', (event) => {
    console.log('stream-subscribed', event)
  })
  // 远端用户进房通知
  rtcClient.on('peer-join', (event) => {
    console.log('peer-join', event)
  })
  // 远端用户退房通知
  rtcClient.on('peer-leave', (event) => {
    console.log('peer-leave', event)
  })
}

推流

以上已经完成了拉流，紧接着进行推流的处理。
初始化流的时候进行设备的检查，如果要求必须打开摄像头和麦克风，在此进行驳回
localStream.initialize
rtcClient.publish

// 初始化流
await localStream.initialize()
// 初始化完成之后进行 发布流
await rtcClient.publish(localStream)
// 播放流
await localStream.play('dom id')

销毁

销毁会话可以分为三种，全部卸载，卸载本地，卸载远程
流程反着来，一步步关闭
localStream.stop
rtcClient.unpublish
localStream.close
rtcClient.leave
rtcClient.off

// 卸载会话 1-全部卸载 2-本地卸载 3-远程卸载
async uninstallRtcClient(type = 1) {
  const loading = this.$loading({
    lock: true,
    text: '销毁会话中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  try {
    if (type !== 3) {
      await localStream.stop('dom id')
      try {
        await rtcClient.unpublish(localStream)
      } catch (e) {}
      await localStream.close()
    }
    if (type !== 2) {
      await localStream.stop('dom id')
    }
    await rtcClient.leave()
  } catch (e) {
    console.log(e, 'uninstallRtcClient err')
  }
  rtcClient.off('*')
  loading.close()
}

转载请标明原文及作者，谢谢！