vue3 使用腾讯TRTC实时音视频 多人视频通话

accc3cde09e453e184bb744adfcda3e.jpg

先去注册个 腾讯的TRTC 新用户赠送10000分钟 https://cloud.tencent.com/product/trtc
demo 地址：https://gitee.com/qsqqiao/vue3Trtc.git
安装 TRTC的sdk
npm i trtc-js-sdk

<template>
  <el-form :model="formData" ref="vForm" :rules="rules" label-position="top" label-width="80px" size="default" @submit.prevent>
    <el-form-item label="用户名" prop="">
      <el-input v-model="userId" type="text" clearable></el-input>
    </el-form-item>
    <el-form-item label="房间" prop="">
      <el-input v-model="roomId" type="text" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <!-- getFacility -->
      <el-button @click="getFacility" type="primary">授权</el-button>
      <el-button @click="handleJoin" type="primary">加入</el-button>
      <el-button @click="handleRemove" type="warning">离开</el-button>
    </el-form-item>
  </el-form>
  <div class="main-box" id="local"></div>
  <div class="video">
    <div v-for="(item, i) in remoteStream" :key="i" class="video-box">
      <div :class="item ? 'distant-stream' : ''" v-html="item"></div>
    </div>
  </div>
</template>

<script>
import { defineComponent, toRefs, reactive, nextTick, getCurrentInstance } from 'vue'
import TRTC from 'trtc-js-sdk'
import { genTestUserSig } from './utils/generateTestUserSig'
export default defineComponent({
  components: {},
  props: {},
  setup() {
    const state = reactive({
      sdkAppId: '你在腾讯云上的sdkAppId',
      userId: 'user_' + Date.now(),
      secretKey: '你在腾讯云上的secretKey',
      roomId: 8888,
      remoteStream: [],
    })
    let localClient = null
    let localStream = null

    // 创建房间
    const handleJoin = async () => {
      // genTestUserSig这个方法是用来  生成userSig的   
      let { sdkAppId, userSig } = genTestUserSig({
        sdkAppId: parseInt(state.sdkAppId, 10),
        userId: state.userId,
        secretKey: state.secretKey,
      })
      localClient = TRTC.createClient({
        sdkAppId,
        userSig,
        userId: state.userId,
        mode: 'rtc',
      })
      installEventHandlers()
      try {
        await localClient.join({ roomId: state.roomId })
        console.log('进房成功')
      } catch (error) {
        console.error('进房失败 ' + error)
      }
      await createLocalStream()
      await localClient.publish(localStream)
    }
    // 创建本地音视频流
    const createLocalStream = async () => {
      try {
        localStream = TRTC.createStream({
          userId: state.userId,
          audio: true,
          video: true,
        })
        await localStream.initialize()
        localStream.setVideoProfile('1080p')
        localStream.play('local')
      } catch (error) {
        console.error('初始化本地流失败 ' + error)
      }
    }
    // 安装事件处理程序
    const installEventHandlers = () => {
      localClient.on('stream-added', (event) => {
        const remoteStream = event.stream
        //订阅远端流
        localClient.subscribe(remoteStream)
      })
      localClient.on('stream-subscribed', (event) => {
        const remoteStream = event.stream
        const base = `<div id="${'remote_stream-' + remoteStream.getId()}"  style="width:100%;height:100%"></div>`
        state.remoteStream.push(base)
        nextTick(() => {
          remoteStream.play('remote_stream-' + remoteStream.getId())
        })
      })
    }
    // 离开房间
    const handleRemove = async () => {
      localStream.stop()
      localStream.close()

      await localClient.unpublish(localStream)
      await localClient.leave()
      proxy.$message.warning('您已离开直播间')
    }
    // 音频授权
    const getFacility = () => {
      navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((res) => {
        res.getTracks().forEach((track) => track.stop())
      })
    }
    return {
      handleJoin,
      handleRemove,
      getFacility,
      ...toRefs(state),
    }
  },
})
</script>

<style lang="scss">

</style>

<style lang="scss" scoped>

</style>