VUE接入腾讯实时音视频TRTC方法

VUE接入腾讯实时音视频TRTC方法

由于公司很多项目中都涉及到了音视频实时通话，在刚开始项目工期比较紧就直接给腾讯的Demo下载下来，在项目中iframe引入使用了。最近领导说让给改成vue的，方便以后好维护。于是结合官网和demo代码终于完成了改造。下边梳理出来一些供大家参考。

官方文档：https://cloud.tencent.com/document/product/647/17249

1.首先集成TRTC,在项目中运行如下命令下载依赖，在所需组件中引入；

npm install trtc-js-sdk 
//在所需组件中引入
import TRTC from 'trtc-js-sdk'

2.视频容器

//主视频窗口
<div  id="local_stream" class="local-stream"  style="width:100%;height:100%"> </div>
//小视频（这块考虑的是多人视频）
<div v-for="(item,i) in remoteStream" :key="i" class="video-box" >
     <div :class="item?'distant-stream':''"  v-html="item"  ></div>
 </div>

3.核心音视频链接方法

export default {
    data() {
      userId: '', //用户id --可更改
      roomId: '', //房间号--加入相同房间才能聊
      client: '', //客户端服务
      remoteStream: [], //远方视频流
      localStream: null, //本地流
      sdkAppId: '', //sdkID
      userSig: '', //签名
      localStream:null,//本地视频流
    },
    mounted(){
        //下方参数是链接的必要参数。需要根据自己情况的情况获取！！！。
         this.sdkAppId = sessionStorage.getItem('sdkAppId') 
         this.userSig = sessionStorage.getItem('userSig')
         this.userId = sessionStorage.getItem('userId')
         this.roomId = this.$route.query.roomId * 1 //必须是number
         this.createClient(this.userId)
    },
    methods: {
        //创建链接
        createClient(userId) {
          const sdkAppId = this.sdkAppId
          const userSig = this.userSig
          this.client = TRTC.createClient({
            mode: 'rtc',
            sdkAppId,
            userId,
            userSig
          })
          //注册远程监听，要放在加入房间前--这里用了发布订阅模式
          this.subscribeStream(this.client)
          //初始化后才能加入房间
          this.joinRoom(this.client, this.roomId)
          // 公共监听方法----主要是推流方摄像头关闭，音频关闭开启等；下方有说！！
          // this.publicMonitor(this.client)
        },
        //加入房间
        joinRoom(client, roomId) {
          client.join({ roomId })
            .catch(error => {
              console.error('进房失败 ' + error)
            })
            .then(() => {
              console.log('进房成功')
              //创建本地流
              this.createStream(this.userId)
              //播放远端流
              this.playStream(this.client)
            })
        }, 
        //创建本地音视频流
         createStream(userId) {
          const localStream = TRTC.createStream({ userId, audio: true, video: true })
          this.localStream = localStream
          localStream
            .initialize()
            .catch(error => {
              console.error('初始化本地流失败 ' + error)
            })
            .then(() => {
              console.log('初始化本地流成功')
              localStream.play('local_stream')
              //创建好后才能发布
              this.publishStream(localStream, this.client)
            })
        },
           //发布本地音视频流
        publishStream(localStream, client) {
          client
            .publish(localStream)
            .catch(error => {
              console.error('本地流发布失败 ' + error)
            })
            .then(() => {
              console.log('本地流发布成功')
            })
        },
        //订阅远端流--加入房间之前
        subscribeStream(client) {
          client.on('stream-added', event => {
            const remoteStream = event.stream
            //订阅远端流
            client.subscribe(remoteStream)
          })
        },
        //播放远端流
        playStream(client) {
          client.on('stream-subscribed', event => {
            const remoteStream = event.stream
            console.log('远端流订阅成功：' + remoteStream.getId())
            // 创建远端流标签，因为id是动态的，所以动态创建，用了v-html
            const base = `<view id="${'remote_stream-' + remoteStream.getId()}"  style="width:100%;height:100%"></view>`
            this.remoteStream.push(base)
            //做了dom操作 需要使用$nextTick(),否则找不到创建的标签无法进行播放
            this.$nextTick(() => {
              //播放
              remoteStream.play('remote_stream-' + remoteStream.getId())
            })
          })
        },
       //退出音视频
       leaveRoom() {
           var client = this.client
              client.leave().then(() => {
                // 停止本地流，关闭本地流内部的音视频播放器
                this.localStream.stop()
                // 关闭本地流，释放摄像头和麦克风访问权限
                this.localStream.close()
                this.localStream = null
                this.client = null
                // 退房成功，可再次调用client.join重新进房开启新的通话。
              })
                .catch(error => {
                  console.error('退房失败 ' + error)
                  // 错误不可恢复，需要刷新页面。
                })
       }
    }
}

​

4.公共监听方法（新增删减人员，开始关闭音频等）

//主要检测推流方公共方法内
publicMonitor(client) {
      var that = this
      // 新增人员
      client.on('peer-join', evt => {
        console.log(evt)
      })
      // 删减人员
      client.on('peer-leave', evt => {
         console.log(evt)
      })
      // 推流方关闭音频
      client.on('mute-audio', evt => {
         console.log(evt)
      })
      // 推流方开启音频
      client.on('unmute-audio', evt => {
         console.log(evt)
      })
},
 //关闭本地摄像头   this.localStream.muteVideo()  
 //开始本地摄像头   this.localStream.unmuteVideo()
//关闭本地麦克风   this.localStream.muteAudio() 
//开启本地麦克风   this.localStream.unmuteAudio()
 
//监听声音大小 在本地视频里发布成功后调用。
​
 setVolumeInterval(stream, userId) {
     setInterval(() => {
          const volume = stream.getAudioLevel()
          console.log(volume)
         // volume>0.01 算是正常说话；
         //如需监听房间内所有人声音大小需要在增加人员后调用下；针对每个人设置一个setInterval
         //在关闭麦克风和人员退出需要清除该人员的定时器。房间退出后结束全部定时器；
     })
 }

以上就是一些核心的方法。希望对大家有帮助 如有疑问请留言！