【新知实行室】腾讯云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，设置进入房间前是否打开摄像头，麦克风等功能， 同时处理分享后的页面。
结果

主要代码

1. // 效验规则
2. const rules = reactive({
3.    
4.   user: [{
5.     required: true, message: "请输入用户id", trigger: "blur" }],
6.   roomId: [{
7.     required: true, message: "请输入房间号", trigger: "blur" }],
8. });
10. // 默认开启功能
11. const checkList = ref(["audio", "video"]);
13. //  表单信息和功能参数
14. const form = reactive({
15.    
16.   user: "",
17.   roomId: "",
18.   audio: true,
19.   video: true,
20.   beauty: false,
21. });
23. const route = useRoute();
24. const router = useRouter();
25. const ruleFormRef = ref<FormInstance>();
26. // 加入房间对话框
27. const dialogVisible = ref(false);
29. let localStream: LocalStream;
30. // 创建本地流
31. const createCameraStream = async () => {
32.    
33.   let localStream;
34.   try {
35.    
36.     // 初始化摄像头流
37.     localStream = TRTC.createStream({
38.    
39.       userId: "test",
40.       audio: checkList.value.includes("audio"),
41.       video: checkList.value.includes("video"),
42.     });
44.     await localStream.initialize();
45.   } catch (e: any) {
46.    
47.     throw new Error(e);
48.   }
49.   // 如果选择了美颜
50.   if (checkList.value.includes("beauty")) {
51.    
52.    

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。