草庐IT

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

大胖（胖哥） 2024-04-24 原文

新知实验室 腾讯云实时音视频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组件
    • 透传出来更多的信息，房间人数等，避免在组件内部进行修改
    • 创建房间可以增加一些可选限制参数，房间人数等

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

音视品体xfflixff0c腾讯云实时音视频云计算经验分享

有关新知实验室 腾讯云实时音视频产品体验的更多相关文章

  1. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  2. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  3. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  4. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID？ - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它，以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7，这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

  5. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  6. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  7. 网络实验之RIPV2协议（一） - 2

    一、RIPV2协议简介  RIP(RoutingInformationProtocol)路由协议是一种相对古老，在小型以及同介质网络中得到了广泛应用的一种路由协议。RIP采用距离向量算法，是一种距离向量协议。RIP-1是有类别路由协议（ClassfulRoutingProtocol），它只支持以广播方式发布协议报文。RIP-1的协议报文无法携带掩码信息，它只能识别A、B、C类这样的自然网段的路由，因此RIP-1不支持非连续子网（DiscontiguousSubnet）。RIP-2是一种无类别路由协议（ClasslessRoutingProtocol），支持路由标记，在路由策略中可根据路由标记对

  8. 阿里云，华为云，腾讯云三大公有云厂商，香港地区主机测评 - 2

    三大公有云厂商，香港地区主机测评一、ping时延比对（厦门电信本地测试）：Ping时延测试腾讯云阿里云华为云延迟率最低时延44ms，最高72ms，平均46ms47.242段：最低时延59ms，最高204ms，平均107ms最低时延45ms，最高93ms，平均47ms丢包率丢包率小有的ip段丢包率较大每个段都会有概率丢包阿里云：47.242段：最低时延59ms，最高204ms，平均107ms，有的ip段丢包率较大8.210段：最低时延64ms，最高232ms，平均119ms，丢包率较好腾讯云：最低时延44ms，最高72ms，平均46ms，丢包率小华为云：最低时延45ms，最高93ms，平均47m

  9. ruby-on-rails - Ruby on Rails 3 - 公共(public)实时聊天 - 2

    我想使用Rails3创建一个公共(public)实时聊天应用程序。我在rails2上找到了一些例子。任何人都可以告诉你一个很好的例子/教程来使用rails3开发一个实时聊天应用程序。 最佳答案 当我试图在我的Rails3应用程序中实现一个公共(public)和私有(private)聊天系统时，我遇到了几个障碍。我查看了faye、juggernaut、node.js等。最终在尝试了几种方法之后，我能够实现一个运行良好的系统:1)我开始关注Railscast260中的faye消息传递视频指南。正如DevinM所提到的，我能够快速设置一个

  10. 第1部分 实验拓扑、终端服务器 - 2

    目录1.1访问Cisco路由器的方法1.1.1通过Console口访问路由器1.1.2通过Telnet访问路由器1.1.3终端访问服务器1.2终端访问服务器配置命令汇总1.1访问Cisco路由器的方法    路由器没有键盘和鼠标，要初始化路由器需要把计算机的串口和路由器的Console口进行连接。访问Cisco路由器的方法还有Telnet、WebBrowser和网络管理软件（如CiscoWorks）等，本节讨论前2种。1.1.1通过Console口访问路由器    计算机的串口和路由器的Console口是通过反转线（Rollover）进行连接的，反转线的一端接在路由器的Console口上，另一

随机推荐