Vue 接入腾讯云【实时音视频】TRTC

最新推荐文章于 2024-04-29 14:51:16 发布

BrodZhu

最新推荐文章于 2024-04-29 14:51:16 发布

阅读量5.4k

点赞数 5

分类专栏： Vue 文章标签：腾讯云 vue.js 音视频

本文链接：https://blog.csdn.net/BrodZhu/article/details/118104367

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求

(Web端和小程序端进行视频通话)

1. web 端开启一个房间，房间号假设为 888。此时，画面可以看到自己端的画面。

2. 小程序端，输入相同的房间号 888，进入房间，即可和 web 端进行视频通话。

准备工作

1. 打开腾讯云官方文档腾讯云-实时音视频

2. web 端参照 webDemo 将项目下载下来。小程序参照小程序端将项目下载下来。

集成

1. 项目根目录打开命令行，执行

npm install trtc-js-sdk

2. 局部引入组件（哪个组件使用在哪个组件里引入），不建议在main.js里全局引入。

import TRTC from 'trtc-js-sdk'

3. 打开【准备工作 - 2】下载好的demo打开，寻找关键代码

创建一个实时音视频通话的客户端对象，在每次会话中仅需要调用一次。（js -> rtc-client.js）
因为创建连接是需要 skdAppid 和 userSig 的，所以继续往下看。

    // create a client for RtcClient
    this.client_ = TRTC.createClient({
      mode: 'rtc', // 实时通话模式
      sdkAppId: this.sdkAppId_,
      userId: this.userId_,
      userSig: this.userSig_
    });

上边的 sdkAppId 和 userSig 来自哪儿呢，我们按顺序可以找到
我们可以看到它来自【presetting】的【genTestUserSig】方法、那么获取签名的【genTestUserSig】方法哪里来的呢？在这儿
准备工作做好了，接下来正式开始吧~

Vue文件用法

直接上代码了

<template>
  <div class="video_wrap">
    <div class="content">
      <!-- 远端视频 -->
      <div
        v-for="(item, index) in remoteStreamList"
        :key="index"
        class="remote-stream"
      >
        <div
          v-html="item.view"
          :class="{ 'distant-stream': item.view }"
        >
        </div>
      </div>
      <!-- 本地视频 -->
      <div
        id='local_stream'
        class="local-stream"
      >
      </div>
    </div>
  </div>
</template>

<script>
import * as LibGenerateTestUserSig from 'static/lib-generate-test-usersig.min.js'
import TRTC from 'trtc-js-sdk'

export default {
  data () {
    return {
      SDKAPPIDConfig: '腾讯云自己申请的SDKAPPID',
      SECRETKEYConfig: '腾讯云自己申请的SECRETKEY',
      userId: '',
      roomId: null,
      client: '', // 客户端服务
      remoteStream: '', // 远方播放流
      localStream: '', // 本地流
      remoteStreamList: [] // 远端小视频
    }
  },
  methods: {
    // 可以绑定在按钮上，点击按钮，进行视频通话
    createClient (roomId) {
      this.userId = 'web_' + parseInt(Math.random() * 100000000)
      this.roomId = roomId || '888'
      this.localStream = ''
      this.remoteStreamList = []
      // 获取签名
      const config = this.genTestUserSig(this.userId)
      const sdkAppId = config.sdkAppId
      const userSig = config.userSig
      const userId = this.userId
      this.client = TRTC.createClient({
        mode: 'rtc', // 实时音视频通话
        sdkAppId,
        userId,
        userSig
      })
      // 注册远程监听
      this.subscribeStream(this.client)
      // 注册监听事件 如，房间关闭
      this.handleEvents(this.client)
      // 初始化成功后才能加入房间
      this.joinRoom(this.client, this.roomId)
    },

    // 订阅远端流--加入房间之前
    subscribeStream (client) {
      client.on('stream-added', event => {
        const remoteStream = event.stream
        console.log('远端流增加: ' + remoteStream.getId())
        // 订阅远端流
        client.subscribe(remoteStream)
      })
    },

    handleEvents (client) {
      client.on('stream-subscribed', event => {
        const remoteStream = event.stream
        console.log('远端流订阅成功：' + remoteStream.getId())
        // 创建远端流标签，因为id是动态的，所以动态创建，用了v-html
        let remoteStreamItem = `<view id="${'remote_stream-' + remoteStream.getId()}"  ></view>`
        let isExist = this.remoteStreamList.find(item => item.userId === remoteStream.getUserId())
        if (!isExist) {
          this.remoteStreamList.push({
            id: remoteStream.getId(),
            userId: remoteStream.getUserId(),
            view: remoteStreamItem,
            hasVideo: true, // 是否开启了摄像头
            hasMic: true // 是否开启了麦克风
          })

          // 做了dom操作 需要使用$nextTick(),否则找不到创建的标签无法进行播放
          this.$nextTick(() => {
            //播放远端流
            remoteStream.play('remote_stream-' + remoteStream.getId())
          })
        }
      })
    },

    // 加入房间
    joinRoom (client, roomId) {
      client.join({ roomId })
        .catch(error => {
          console.error('进房失败 ' + error)
        })
        .then(() => {
          console.log('进房成功')
          // 创建本地流
          this.createStream(this.userId)
        })
    },
    // 创建本地音频流
    async createStream (userId) {
      const localStream = TRTC.createStream({ userId, audio: true, video: true })
      // 设置视频属性 Profile 为 '480p'
      localStream.setVideoProfile('480p')

      this.localStream = localStream

      try {
        await localStream
          .initialize()
          // .catch(error => {
          //   console.error('初始化本地流失败 ' + error)
          // })
          .then(() => {
            console.log('初始化本地流成功')
            // 创建好后才能播放 本地流播放 local_stream 是div的id
            localStream.play('local_stream')
            // 创建好后才能发布
            this.publishStream(localStream, this.client)
          })
      } catch (error) {
        switch (error.name) {
          case 'NotReadableError':
            alert(
              '暂时无法访问摄像头/麦克风，请确保系统允许当前浏览器访问摄像头/麦克风，并且没有其他应用占用摄像头/麦克风'
            )
            break
          case 'NotAllowedError':
            if (error.message === 'Permission denied by system') {
              alert('请确保系统允许当前浏览器访问摄像头/麦克风')
            } else {
              console.log('User refused to share the screen')
              alert('请确保系统允许当前浏览器访问摄像头/麦克风')
            }
            break
          case 'NotFoundError':
            alert(
              '浏览器获取不到摄像头/麦克风设备，请检查设备连接并且确保系统允许当前浏览器访问摄像头/麦克风'
            )
            break
          default:
            break
        }
      }
    },
    // 发布本地音视频流
    publishStream (localStream, client) {
      client
        .publish(localStream)
        .catch(error => {
          console.error('本地流发布失败 ' + error)
        })
        .then(() => {
          console.log('本地流发布成功')
        })
    },

    // 退出房间
    logoutHandler () {
      this.leaveRoom(this.client)
    },
    leaveRoom (client) {
      client
        .leave()
        .then(() => {
          console.log('退房成功')
          // 停止本地流，关闭本地流内部的音视频播放器
          this.localStream.stop()
          // 关闭本地流，释放摄像头和麦克风访问权限
          this.localStream.close()
          this.localStream = null
          this.client = null
          // 退房成功，可再次调用client.join重新进房开启新的通话。
        })
        .catch(error => {
          console.error('退房失败 ' + error)
          // 错误不可恢复，需要刷新页面。
        })
    },

    // 获取用户签名 - 前端测试使用
    genTestUserSig (userID) {
      /**
       * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。
       *
       * 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到 SDKAppId，
       * 它是腾讯云用于区分客户的唯一标识。
       */
      const SDKAPPID = this.SDKAPPIDConfig
      /**
       * 签名过期时间，建议不要设置的过短
       * <p>
       * 时间单位：秒
       * 默认时间：7 x 24 x 60 x 60 = 604800 = 7 天
       */
      const EXPIRETIME = 604800
      /**
       * 计算签名用的加密密钥，获取步骤如下：
       *
       * step1. 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav )，如果还没有应用就创建一个，
       * step2. 单击“应用配置”进入基础配置页面，并进一步找到“帐号体系集成”部分。
       * step3. 点击“查看密钥”按钮，就可以看到计算 UserSig 使用的加密的密钥了，请将其拷贝并复制到如下的变量中
       *
       * 注意：该方案仅适用于调试Demo，正式上线前请将 UserSig 计算代码和密钥迁移到您的后台服务器上，以避免加密密钥泄露导致的流量盗用。
       * 文档：https://cloud.tencent.com/document/product/647/17275#Server
       */
      const SECRETKEY = this.SECRETKEYConfig
      if (SDKAPPID === '' || SECRETKEY === '') {
        alert(
          '请先配置好您的账号信息： SDKAPPID 及 SECRETKEY ' +
          '\r\n\r\nPlease configure your SDKAPPID/SECRETKEY in js/debug/GenerateTestUserSig.js'
        )
      }
      const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME)
      const userSig = generator.genTestUserSig(userID)
      return {
        sdkAppId: SDKAPPID,
        userSig: userSig
      }
    }
  }
}
<script>

<style scoped>

  .local-stream {
    width: 500px;
    height: 500px;
  }

  .remote-stream {
    width: 200px;
    height: 200px;
  }
</style>

以上就实现了简单的 web 端，在小程序端输入相同的房间号就可以连接上。

效果图：

注意：

可在本地 localhost 下访问。
不可不可不可在 http 下访问，需升级为 https

线上必须使用 https，，，https~~~!!!。

问题：

UserId 使用的中文

Q：web端和小程序端输入相同的房间号进行视频通话，如果小程序的用户名格式是【中文+数字】，则两端互相看不到。小程序端的用户名格式改为【英文+数字】就好了？？

A：UserId 最好不要用中文，不同平台会有编码的问题。

结语：

以上只是实现了简单的通话效果，更多的细节请参考官网。实时音视频

如果大家需要一些更详细的效果，如：web端点击某一个视频将其放大这种，可私信我。

BrodZhu

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
4
评论
Vue 接入腾讯云【实时音视频】TRTC

需求(Web端和小程序端进行视频通话)1. web 端开启一个房间，房间号假设为 888。此时，画面可以看到自己端的画面。2. 小程序端，输入相同的房间号 888，进入房间，即可和 web 端进行视频通话。准备工作1. 打开腾讯云官方文档腾讯云-实时音视频2. web 端参照webDemo将项目下载下来。小程序参照小程序端将项目下载下来。集成1. 项目根目录打开命令行，执行npm install trtc-js-sdk 2. 局部引入组...
复制链接

扫一扫