新知实验室 腾讯云实时音视频产品体验

发布于:2024-02-08 21:03:35

新知实验室 腾讯云实时音视频TRTC产品体验

本次体验嫁接在本人正在开发的一个线上招聘系统(PCWEB端)中,实现线上面试沟通功能。

本文编写旨在记录本次体验的整体过程。

如果在某一个时间点可以帮助到其他同学,鄙人实属有幸。

名次解释:T —— Tencent 腾讯;R-T —— Real-Time 实时的;C —— Communication 传播 / 交流 / 通信。

前端代码链接:https://gitee.com/lzy147561/trtcdemo.git

参考文档:含UI的集成方案——集成 TUIRoom (Web)

接入腾讯云实时音视频

TRTC基本实现逻辑

房间是一个基本概念,从加入房间,到退出房间可以为本地音视频通话的一个生命周期。

  • 一切的开始——创建房间:通过这个房间,TRTC云服务才能知道,接收到的某个人的音视频信息要发送到哪里。
  • 发布文件流:加入房间,需要给房间内的其他人发送本地音视频数据流给到云服务,然后再由云服务处理完成后转发到房间内的其他用户。
  • 订阅远程流:其他的用户需要有一个订阅的处理,利用SDK接收云服务器端,别的用户发送过来经过处理的音视频,然后进行展现和播放。
  • 一切的终止——退出房间:生命周期结束,SDK会自动取消订阅远程流和取消发布本地流。

创建实时音视频应用

获取APPID

SDKAppID与SecretKey是必要信息,可以复制保存在服务端env文件

下载含UI的集成方案代码

集成方案代码下载地址

方案中重要代码结构简析

index.vue

  • 集成方案的入口文件,即在项目引入的组件
  • 主体包含header content footer 组件
  • 同时包含sidebar setting组件

components

  • 这里面的组件并不是所有都使用到index.Vue,如果在您的接入项目中有需要可以自行引入
  • 同时也可以自行修改组件中的代码来更适用于自己的项目,比如只允许通过房间号分享,那就直接注释掉相关代码
  • 也可以通过sidebar组件

stores

  • 本集成方案使用pinia对状态进行的管理
  • 可以找到你所需要的数据(用户列表等),自行做透传处理,比如加入到某事件的参数中

hooks

  • 交互操作的入口函数以及相关业务逻辑实现,在其中调用tui-room-core中的核心操作函数

trtc-cloud 与 tui-room-core

  • 与原生SDK交互的相关操作,如果后续有同学想直接对SDK进行操作可以参考这里的代码

接入项目实现业务

服务端(PHP)获取UserSig以及初始化参数

推荐使用服务端生成UserSig的方式,更安全。链路如下

下载生成UserSig SDK

要使用HMAC-SHA256签名算法(新版)生成UserSig

生成UserSig SDK下载地址

构建初始化参数

  • api参数:client_guid 用户uuid 以及 type:'admin' | 'client' 区分创建/加入
  • 推荐在后端整体生成初始化参数并响应回前端。注意初始化参数类型。相关处理见下方代码注释
export interface TuiRoomInitParam {
  // 特别注意appId是一个数字类型,千万别是string
  sdkAppId: number,
  // 根据type参数查询不同的表验证传入的userId,并获取用户详情$userInfo
  userId: string, 
  // 根据下载的生成UserSig的SDK中的genSig(可以在SDK中将appID和secretKey写入文件,避免作为参数传递)
  userSig: string,
  // $userInfo.nickName
  userName: string,
  // $userInfo.avatarUrl
  userAvatar: string,
  // 用户用于屏幕分享的唯一 Id,`share_${userId}`
  shareUserId: string,
  // 再次调用genSig生成
  shareUserSig: string,
}

创建房间信息

创建房间时调用

  • api参数:invite_guid 邀请者guid以及creator_guid 创建者guid,响应数据:roomId
  • 根据creator_guid查询得到数据库中是否存在房间,获取roomID,如果不存在,使用用户信息中的id字段作为roomID(必须是数字)
  • 将房间信息添加/更新到数据库中。如果roomID存在,表示该用户之前已经创建过房间,当下想重新创建,则将字段更新即可
  • 核心字段:
    • roomId
    • creator 创建者guid
    • invite 邀请者guid(因为业务要求一对一面试 所以邀请者是一个确定的值)——创建时更新
    • expires 过期时间戳(做一个房间有效期限制)——创建时更新 当前时间+180分钟
    • status 状态 1:正常; 2:关闭 —— 创建时更新为1

查询房间信息

加入房间时调用

  • api参数:client_guid 用户guid 以及 roomId 房间号,响应数据:true/false
  • 根据roomId查询房间信息,验证是否存在
  • 验证该房间的邀请者存在 且 是否与client_guid匹配
  • 验证有效期存在 且 大于当前时间
  • 验证状态是否为1

清除房间信息

退出房间时调用

  • api参数:creator_guid 创建者guid 以及 roomId 房间号,响应数据:true/false
  • 根据roomId查询房间信息,验证是否存在
  • 验证创建者guid是否正确
  • 清空邀请者字段
  • 清空有效期
  • 更新状态为2

前端(VUE)业务逻辑

参考含UI的集成方案——集成 TUIRoom (Web)进行配置开发环境,注意该方案使用的是vue@2.7.8

代码结构

Admin页面

  • 引入@/TUIRoom/index.vue组件,并设置ref为TuiRoom,用来获取该组件实例
  • mounted方法
    • 调构建初始化参数接口
    • 调用this.$refs.TuiRoom中的init接口,传入获取的初始化参数
    • 调创建房间接口获取roomId
    • 调用this.$refs.TuiRoom中的createRoom接口,传入roomId等信息(参看文档)
    • 监听onDestroyRoom事件,在销毁房间时,调用清除房间信息接口

Client页面

  • 引入@/TUIRoom/index.vue组件,并设置ref为TuiRoom,用来获取该组件实例
  • 添加modal窗用来输入roomId
  • modal窗confirm具柄
    • 调构建初始化参数接口
    • 调用this.$refs.TuiRoom中的init接口,传入获取的初始化参数
    • 调加入房间接口验证房间信息
    • 调用this.$refs.TuiRoom中的enterRoom接口,传入roomId等信息(参看文档)

体验感受总结

  • 整体感受非常好,文档完整,接入逻辑流畅,无“反人类”设计
  • 通话质量极好,但是因为受本系统业务使用场景限制,在一个房间内仅支持两人,延时基本可以忽略,且同时在线房间浅测尚无感知阙值
  • 方案中对错误的处理很完善,可以清楚的知道问题出在哪个环节
  • 此功能对本需求可谓完美切合
  • 建议:
    • roomId是否必须使用number,感觉比较局限,是否可以使用uuid
    • 可以将含UI集成方案进一步封装为NPM组件
    • 透传出来更多的信息,房间人数等,避免在组件内部进行修改
    • 创建房间可以增加一些可选限制参数,房间人数等

后续伴随业务拓展,可能会有更多建议将持续跟进补充,以上便是目前全部内容,与君共勉~


上一篇:网络模型的参数量和FLOPs的计算 Pytorch

下一篇:自动驾驶路径跟踪控制——驾驶员预瞄模型

资讯 观察行业视觉,用专业的角度,讲出你们的心声。
MORE

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。