【新知实验室】腾讯云TRTC服务体验

前言

什么是腾讯云TRTC

腾讯云实时音视频（Tencent RTC，简称 TRTC）是一项低延时、高并发、稳定可靠的音视频 PaaS云服务，主要提供多人实时通话以及低延时互动直播能力。TRTC 将腾讯 21 年来在网络与音视频技术上的深度积累，通过 SDK 及云端 API的方式向开发者开放，为包括全民K歌、腾讯会议、陌陌、VIPKID 等腾讯内外客户提供底层音视频服务，覆盖了数以亿计的终端用户。

腾讯云TRTC的功能包括视频通话、语音通话、视频互动直播、互动连麦、屏幕分享、3A 处理、变声、美颜特效、视频内容审核等功能可以满足大部分企业或者个人对于实时音视频领域的需求，而且接入成本低，提供SDK、Demo、详细的产品文档提供给开发人员学习。

开始使用

下面的例子是基于腾讯云实时音视频（TRTC）的无ui集成方案。 在web端简单实现多个视频会议功能，包含 多人音视频会议、屏幕共享、邀请成员、 关闭 开启 音视频 等基础功能。

基础概念

下面介绍一下本次例子所使用到的一些基础概念

应用

TRTC 通过应用的形式来管理不同的业务或项目。您可以在 TRTC 控制台 给不同的业务或项目分别创建不同的应用，从而实现业务或项目数据的隔离。每个腾讯云账号最多可以创建100个 TRTC 应用。

SDKAppID

SDKAppID（应用标识/应用 ID）是腾讯云后台用来区分不同 TRTC 应用的唯一标识，在 TRTC 控制台 创建应用时自动生成。不同 SDKAppID 之间的数据不互通。

SDKSecretKey

SDKSecretKey（应用密钥）是腾讯云后台用来验证TRTC 应用唯一标识(SDKAppID)的一个字符串，如果说SDKAppID是账号，那么SDKSecretKey就是密码。

UserID

UserID（用户标识）用于在一个 TRTC 应用中唯一标识一个用户。
用户标识是用户登录开发者业务系统的帐号在腾讯云上的映射。通常情况下，开发者可直接使用用户名作为 UserID。
取值范围长度建议不超过32字节。请使用英文字符、数字或下划线，不能全为数字，区分大小写。

RoomID

RoomID（房间号/房间ID）用于在一个 TRTC 应用中唯一标识一个房间。RoomID 是由开发者自行维护和分配的一个 uint32 范围内的数字，取值区间：1 - 4294967295。

UserSig

UserSig（用户签名）是腾讯云设计的一种安全保护签名，用于对一个用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用您的云服务使用权。详情请参见 UserSig 相关问题 文档。

推送

推送指用户将本地的音视频数据上传给 TRTC 服务端的操作，对应“推流”。

订阅

订阅指用户向 TRTC 服务端请求拉取指定用户音视频数据的操作，对应“拉流”。

想了解更多概念可以查看官方文档

准备工作

创建应用

获取应用的SDKAppID 和 SDKSecretKey

搭建项目

项目链接

项目链接
项目所用框架 vite + vue3 + element-plus + uno.css
项目代码结构如下

项目运行流程

代码解析

登录页面 Room.vue

获取 用户id 和房间id，设置进入房间前是否打开摄像头，麦克风等功能， 同时处理分享后的页面。

效果

主要代码

// 效验规则
const rules = reactive({
   
  user: [{
    required: true, message: "请输入用户id", trigger: "blur" }],
  roomId: [{
    required: true, message: "请输入房间号", trigger: "blur" }],
});

// 默认开启功能
const checkList = ref(["audio", "video"]);

//  表单信息和功能参数
const form = reactive({
   
  user: "",
  roomId: "",
  audio: true,
  video: true,
  beauty: false,
});

const route = useRoute();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
// 加入房间对话框
const dialogVisible = ref(false);

let localStream: LocalStream;
// 创建本地流
const createCameraStream = async () => {
   
  let localStream;
  try {
   
    // 初始化摄像头流
    localStream = TRTC.createStream({
   
      userId: "test",
      audio: checkList.value.includes("audio"),
      video: checkList.value.includes("video"),
    });

    await localStream.initialize();
  } catch (e: any) {
   
    throw new Error(e);
  }
  // 如果选择了美颜
  if (checkList.value.includes("beauty")) {
   
    // 用美颜插件处理视频流