admin管理员组

文章数量:1565351

 

需求

(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 >
    <div >
      <!-- 远端视频 -->
      <div
        v-for="(item, index) in remoteStreamList"
        :key="index"

本文标签： 腾讯音视频实时vueTRTC

版权声明：本文标题：Vue 接入腾讯云【实时音视频】TRTC 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1726541399a1074759.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。