【新知实验室 - TRTC 实践】音视频互动 Demo、即时通信 IM 服务搭建

news2024/12/30 3:17:26

在这里插入图片描述

一、TRTC 初识

TRTC 是什么

TRTC（Tencent RTC）腾讯实时音视频，源自于 QQ 音视频团队，是基于 QQ 音视频多年来的音视频技术积累，位于腾讯云的 RTC 云服务。TRTC 支持腾讯会议、企业微信直播、微信视频号、腾讯云课堂、全民 K 各等业务，是腾讯丰富的音视频场景的最佳实践输出。

TRTC 的客户端 SDK 全平台覆盖，有微信/QQ 小程序、企业微信、浏览器，以及 iOS、Windows、Linux 和 macOS 等平台。

在这里插入图片描述
TRTC 可以旁路到云直播并且通过 CDN 进行分发，可对直播系统的转码、急速高清等能力进行复用，并录制存储至云点播。TRTC 包含两大基础场景：

第一个场景是 多人实时互动，针对多人实时互动深度优化，实现全球端到端延迟小于 300 毫秒，抗丢包率超过 80%，抗网络抖动超过 1000 毫秒。单个房间可支持 300 人同时在线，50 人同时上行音视频。

第二个场景是 超低延时直播，观众可实现平滑上下卖，单房间 10w 人一秒以内低延迟播放。

TRTC 技术特性

在实时互动的场景下，用户的音频数据是“既发又收”的，需要经过 3A 处理。比如某音频经过云端的传输后，再通过外放播放该音频，很难避免的会产生回声，而且在通话过程中也会有各种背景噪音等不良体验。

我们在讲话过程中声音是连续的，当把时间颗粒度放小会发现声音其实就是连续的波形，如果在传输时丢了一部分，那么就可以根据这个波形来补齐，这就是 PLC 技术。但如果丢的内容过多，就很难再恢复了。

而 TRTC 技术则可以很好的应对音频连续丢包的场景，它会根据历史语言帧进行上下文的分析，最后波形合成，通话效果会很顺畅。此外，TRTC 由全链路 H.265 支持，相比 H.264，在相同画质下它会有大约 30 的带宽节省。

二、TRTC 入门 - 快速跑通 Demo(音视频互动)

那么 TRTC 到底应该如何开发使用呢，在这里我基于 Web 场景下的 vue 2.0 进行实操演示。

• 创建应用

首先进入腾讯云音视频主页，注册登录后首页如下；

在这里插入图片描述
然后选择“开发辅助”下的“快速跑通 Remo”，设置应用名称后点击“创建”；

在这里插入图片描述

• 下载源码

接下来就可以开始源码的下载了，云平台为我们提供了各个平台的源码，可以在 Github 和 Gitee 进行云端下载或者直接下载压缩包至本地；

在这里插入图片描述
在这里我选择 Web 的 zip 包进行下载，下载后解压，是一个名为“Web”的文件夹；

在这里插入图片描述

• 基于 vue2.0 运行源码

接下来使用开发工具打开我们需要的 quick-demo-vue2-js 文件(我用的是 WebStorm)；

在这里插入图片描述
打开控制台 Terminal，首先输入 npm i 下载 vue 项目所需要的包；

在这里插入图片描述
接下来就可以启动项目了，在控制台输入 npm run serve 进行启动，运行成功后出现运行地址，点击地址即可运行；

在这里插入图片描述
运行效果如下；

在这里插入图片描述

• 获取 SDKAppID 和密钥

正常运行后，回到腾讯云音视频平台，选择“已下载，下一步”；

在这里插入图片描述
可以看到这里已为我们生成 SDKAppID 和密钥；

在这里插入图片描述

复制然后将其输入到已运行页面中指定的位置即可；

在这里插入图片描述

• 开始视频通话

输入密钥以及 SDKAppID，就可以进行相关的音视频操作了，用户 id 和房间 id 已经默认配置；

在这里插入图片描述

点击“进入房间”，运行成功效果如下；

在这里插入图片描述

除此之外还可以进行共享屏幕、邀请好友加入视频等操作等操作，我们的每一步操作都会打印日志显示到左侧日志栏(log)中；

在这里插入图片描述
至此，音视频互动 Demo 运行成功。

三、TRTC 进阶 - 集成即时通信 IM 服务

即时通信 IM（Instant Messaging） 是一个简单接入、稳定必达、覆盖全球的即时通信云服务。通过植入 SDK 就可集成聊天、会话、群组、资料管理能力，实现文字、图片、短语音、短视频等富媒体消息收发，全面满足通信需要。

快速集成即时通信 IM 服务

Web 环境下的 IM 集成开发环境要求如下：

  • Vue 3
  • TypeScript
  • sass（sass-loader 版本 ≤ 10.1.1）
  • node（12.13.0 ≤ node 版本 ≤ 17.0.0）
  • npm（与 node 版本匹配）
• 创建项目

首先使用 vue-cli 来创建项目，在本地创建一个文件夹作为我们的项目文件夹；

如果本地没有 vue-cli，在 cmd 通过命令 npm install -g @vue/cli@4.5.0 sass sass-loader@10.1.1 下载；

在这里插入图片描述
在文件夹中点击右键，选择“在终端中打开”；
终端窗口中输入命令 vue create chat-example 后回车，按照如下提示进行选择；

上下键切换，空格选中，回车确认。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目创建成功；

在这里插入图片描述

• 下载并使用 TUIKit 组件库

TUIKit 是基于腾讯云 IM SDK 的 UI 组件库，提供了一些通用的 UI 组件，包含会话、聊天、关系链、群组、音视频通话等功能。

首先 cd chat-example 切换到项目所在目录，使用如下命令下载 TuIKit 组件；

npm i @tencentcloud/chat-uikit-vue 
xcopy .\node_modules\@tencentcloud\chat-uikit-vue .\src\TUIKit /i /e

下载完成后项目中会出现 TUIKit 目录：

在这里插入图片描述
接下来 main.js 文件中引入 TUIKit 组件；

import { createApp } from 'vue';
import App from './App.vue';
import { TUIComponents, TUICore, genTestUserSig } from './TUIKit';

const SDKAppID = 0; // Your SDKAppID
const secretKey = ''; //Your secretKey
const userID = ''; // User ID

// init TUIKit
const TUIKit = TUICore.init({
  SDKAppID,
});
// TUIKit add TUIComponents
TUIKit.use(TUIComponents);

// login TUIKit
TUIKit.login({
  userID: userID,
  userSig: genTestUserSig({
    SDKAppID,
    secretKey,
    userID,
  }).userSig, // The password with which the user logs in to IM. It is the ciphertext generated by encrypting information such as userID.For the detailed generation method, see Generating UserSig
});

createApp(App).use(TUIKit).mount('#app');
• 获取 SDKAppID 、密钥、userID

此步骤与第一节 Demo 案例的操作是相同的，进入 即时通信 IM 控制台进行登录，然后创建一个新应用；

在这里插入图片描述
在应用配置界面中可获得我们需要的 SDKAppID 、密钥、userID；

在这里插入图片描述
user ID 可通过在“账号管理”中新建账号获得；

在这里插入图片描述
最后将获取到的 SDKAppID 、密钥、userID 填入 main.js 中即可；

在这里插入图片描述

• 调用 TUIKit 组件

相关数据配置完成之后，就可以调用我们的 TUIKit 组件了。在需要使用组件的页面调用即可，例如我在 App.vue 页面中调用：

<template>
  <div class="home-TUIKit-main">
    <div :class="env?.isH5 ? 'conversation-h5' : 'conversation'" v-show="!env?.isH5 || currentModel === 'conversation'">
      <TUISearch class="search" />
      <TUIConversation @current="handleCurrentConversation" />
    </div>
    <div class="chat" v-show="!env?.isH5 || currentModel === 'message'">
      <TUIChat>
        <h1 style="margin-top: 20px;text-align: center">腾讯云即时通信IM</h1>
        <h3 style="color: #149985; margin-top: 10px;text-align: center">体验官 —— 敬 之（马金建）</h3>
      </TUIChat>
    </div>
  </div>
</template>


<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue';
  import { TUIEnv } from './TUIKit/TUIPlugin';


  export default defineComponent({
    name: 'App',
    setup() {
      const data = reactive({
        env: TUIEnv(),
        currentModel: 'conversation',
      });
      const handleCurrentConversation = (value: string) => {
        data.currentModel = value ? 'message' : 'conversation';
      };
      return {
        ...toRefs(data),
        handleCurrentConversation,
      };
    },
  });
</script>

<style scoped>
  .home-TUIKit-main {
    display: flex;
    height: 100vh;
    overflow: hidden;
  }
  .search {
    padding: 12px;
  }
  .conversation {
    min-width: 285px;
    flex: 0 0 24%;
    border-right: 1px solid #f4f5f9;
  }
  .conversation-h5 {
    flex: 1;
    border-right: 1px solid #f4f5f9;
  }
  .chat {
    flex: 1;
    height: 100%;
    position: relative;
    border: 2px solid #999;
  }
</style>
• 启动项目

打开控制台，输入命令 npm run serve 启动项目；启动成功效果：

在这里插入图片描述

接下来就可以体验聊天功能了。点击“发起单聊”，输入我们上面获得的 userID 并按下回车进行搜索，选择联系人后开始单聊。

在这里插入图片描述
如下为聊天页面；

在这里插入图片描述
除此之外还有群聊功能，可选多个用户，设置群头像、ID、群类型等。

在这里插入图片描述

四、TRTC 产品使用体验

此次体验，我主要进行了两个方面的开发实践：

Ⅰ云平台音视频 Demo 的快速跑通

快速跑通 Demo 这一模块整体上的步骤设计简洁高效，只需 3 步：创建应用 --> 下载源码 --> 获取 SDKAppID 和密钥，然后就可以运行项目了。

不得不说，这一开发辅助模块的存在意义重大。对于大多数开发者来说，谈起云平台和云服务，可能都会觉得这些东西很“高大尚”，自己没用过也不知道怎么用等想法，原因当然不是因为他们的水平不够高，而是对云平台和云服务的缺乏足够的认知，特别是缺乏实践，作为一种引领产业发展的服务，部分开发者可能都会觉得操作起来很难，导致不愿意去上手。

而开发辅助这一模块的设计基本上消除了上面的顾虑，只要上手使用后就会发展它的操作是真简单，步骤非常明确，且几乎是全平台覆盖，无论我们是哪一类开发者，均可上手。在可以跑通 Demo 之后，对于云平台的操作其实可以说就没有什么问题了，因为其他的 SDK 和服务的使用方法也基本上是相同的。

在这里插入图片描述
个人的建议想法是可以针对开发辅助这一部分可以重点推荐，引导开发者去上手，因为只有在操作过后才会进一步的深入认识这些云服务，才能够体验到它们优势所在。虽然内容基础，但是至关重要。

Ⅱ 即时通信 IM 云服务的搭建与使用

第二部分我对即时通信 IM 云服务进行了使用，实现了在线单聊与群聊。说实话这是我第一次了解 IM，才发现原来聊天功能的实现“就靠它”。我使用的是 Web & H5，需要用到 TUIKit 组件，但是不知道为什么开发环境只支持 Vue3 和 TypeScript，所以我不得不重新创建项目进行演示（上文有详细步骤），官方文档也有着对 IM、TUIKit 和操作方法的详细介绍。

在这里插入图片描述
最后在项目中调用成功的页面是这样的；

在这里插入图片描述
相信对于没有使用过云服务的开发者来说，想要实现这个功能应该很难很难吧，但是在这里就是这么简单，我们需要做的就是调用，其他的云平台都已经为我们做好了。

大体上云平台的操作无区别，简单高效；项目的操作也有详细介绍，个人建议想法是 web & h5 是否可以集成 vue2 和 JavaScript？其次云服务文档可以做的更加显眼一点，或者直接标明“IM 服务 开发文档”等，一目了然直接进入，目前是在这个位置：

在这里插入图片描述

写在最后

对于我这样一个前端开发者来说，在使用腾讯云 TRTC 之后的最大体会就是高效，仅需 2 行代码即可跑通测试 Demo，10 行代码完成通用能力的接入，就是简单的创建 --> 下载 --> 引用，我们仅需要获得它的 SDKAppID 、密钥即可享受到各种高品质的音视频服务。

其次是它的通用性，几乎是全平台互通，提供覆盖全平台的 SDK 且兼容各大开发框架，真所谓可帮助全球开发者快速搭建低成本、低延迟、高品质的音视频互动解决方案。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1602043.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

虚拟机vm桥接模式linux（centos，ubuntu）联网

虚拟机vm桥接模式linux（centos，ubuntu）联网

台式机网线 查看宿主机网络 编辑虚拟机—>虚拟网络编辑器–>更改设置 选择&#xff0c;确定 进入linux系统 输入ip addr找到自己的网卡 我的是eno16777736 centos&#xff1a; 编辑 HWADDR"00:0C:29:54:CE:B8" TYPE"Ethernet" BOOTPROTO"…
阅读更多...
Python处理海量大数据库之fugue使用详解

Python处理海量大数据库之fugue使用详解

概要 在大数据时代，处理海量数据是一项重要的任务。Python作为一种流行的编程语言，有许多优秀的库和工具可以帮助开发者处理大规模数据。其中，Fugue库是一个强大的工具，可以帮助开发者构建分布式数据处理流水线。本文将介绍Fugue库的安装方法、特性、基本功能、高级功能、…
阅读更多...
Elasticsearch下载安装 以及Reindex(数据迁移)

Elasticsearch下载安装 以及Reindex(数据迁移)

部署Elasticsearch集群 这里介绍使用的是Elasticsearch 7.6.1的版本&#xff0c;配置两台服务器&#xff0c;一台部署主节点&#xff0c;一台部署两个从节点。 下载地址&#xff1a;https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.16.2-linux-x86_64…
阅读更多...
服务器数据恢复—ext3文件系统下raid5数据恢复案例

服务器数据恢复—ext3文件系统下raid5数据恢复案例

服务器数据恢复环境&故障情况&#xff1a; 某企业光纤存储上有一组由16块硬盘组建的raid5阵列。管理员发现该光纤存储上的卷无法挂载&#xff0c;经过检查发现raid5阵列中有2块硬盘离线&#xff0c;于是联系我们数据恢复中心要求数据恢复工程师到现场恢复服务器存储上的数据…
阅读更多...
PyQt5 快速入门

PyQt5 快速入门

PyQt5 简介和开发环境搭建 简介 PyQt是一个GUI小部件工具包。 它是Qt的Python接口&#xff0c; Qt是最强大&#xff0c;最受欢迎的跨平台GUI库之一。 PyQt由RiverBank Computing Ltd.开发。最新版本的PyQt可从其官方网站下载 - riverbankcomputing.com PyQt API是一组包含大…
阅读更多...
每天学点儿Python（6） -- 列表和枚举

每天学点儿Python（6） -- 列表和枚举

列表是Python中内置的可变序列&#xff0c;类使用C/C中的数组&#xff0c;使用 [ ] 定义列表&#xff0c;列表中的元素与元素之间用英文逗号&#xff08; , &#xff09;分隔&#xff0c; 但是Python中列表可以存储任意类型的数据&#xff0c;且可以混存&#xff08;即类型可以…
阅读更多...
2024能源动力、机械自动化与航天航空技术国际学术会议(ICEPMAT2024)

2024能源动力、机械自动化与航天航空技术国际学术会议(ICEPMAT2024)

2024能源动力、机械自动化与航天航空技术国际学术会议(ICEPMAT2024) 会议简介 能源动力、机械自动化和航空航天技术国际学术会议&#xff08;ICEPMAT2024&#xff09;将于2024年在北京举行。会议将探讨能源动力、机械自动化、航空航天技术领域的新研究热点、核心技术和发展趋…
阅读更多...
软件行业中的蓝海领域有哪些？

软件行业中的蓝海领域有哪些？

什么是蓝海&#xff1f; 蓝海&#xff0c;指的是未知的市场空间。这个概念相对于“红海”而言&#xff0c;红海则是指已知的市场空间。 企业要启动和保持获利性增长&#xff0c;就必须超越产业竞争&#xff0c;开创全新市场&#xff0c;这其中包括两块&#xff1a;一块是突破…
阅读更多...
2024五一杯数学建模C题思路分析

2024五一杯数学建模C题思路分析

文章目录 1 赛题思路2 比赛日期和时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…
阅读更多...
【YOLOv8改进[损失函数]】使用结合InnerIoU和Focaler的各种损失函数助力YOLOv8更优秀

【YOLOv8改进[损失函数]】使用结合InnerIoU和Focaler的各种损失函数助力YOLOv8更优秀

目录 一 回归损失函数&#xff08;Bounding Box Regression Loss&#xff09; 1 Inner-IoU 2 Focaler-IoU&#xff1a;更聚焦的IoU损失 二 改进YOLOv8的损失函数 1 总体修改 ① ultralytics/utils/metrics.py文件 ② ultralytics/utils/loss.py文件 ③ ultralytics/uti…
阅读更多...
Vue项目管理器创建项目

Vue项目管理器创建项目

黑马程序员JavaWeb开发教程 文章目录 1、创建新项目2、详情3、预设4、功能5、配置6、是否保存为预设模板7、正在创建项目8、创建完成 1、创建新项目 2、详情 3、预设 选择手动&#xff0c;点击下一步 4、功能 只需要额外选择一项–Router 即可&#xff0c;其余的保持默认&a…
阅读更多...
C语言【指针】

C语言【指针】

1. 基本语法 1.1 指针变量的定义和使用(重点) 指针是一种数据类型&#xff0c;指针变量指向谁 就把谁的地址赋值给指针变量 1.2 通过指针间接修改变量的值 指针变量指向谁 就把谁的地址赋值给指针变量 可以通过 *指针变量 间接修改变量的值 1.3 const修饰的指针变量 语法…
阅读更多...
TR转发路由器上手实测-助你轻松搭建企业网

TR转发路由器上手实测-助你轻松搭建企业网

TR转发路由器上手实测-助你轻松搭建企业网 基础概念实测路由图准备资源网络规划杭州地域北京地域 云服务器ECS云企业网免费试用TR创建云企业网创建TR转发路由器创建TR同地域连接创建TR跨地域连接 网络连通性测试释放资源释放云服务器ECS释放TR 体验感受 在进行TR转发路由器上手…
阅读更多...
POST 为什么会发送两次请求？

POST 为什么会发送两次请求？

本文目录 同源策略 什么是同源策略 CORS 简单请求 预检请求 附带身份凭证的请求与通配符 完整的请求流程图 总结 前言 最近博主在字节面试中遇到这样一个面试题&#xff0c;这个问题也是前端面试的高频问题&#xff0c;因为在前端开发的日常开发中我们总是会与post请求…
阅读更多...
mysql搭建主从

mysql搭建主从

mysql搭建主从: 1:拉取mysql镜像 docker pull mysql2:创建主从对应目录 3:建立一个简易的mysql docker run -it --name mytest -e MYSQL_ROOT_PASSWORD123 -d mysql4:进入这个简易的mysql;从中获取my.cnf文件 docker exec -it mytest bash5:从容器中将my.cnf拷贝到 /3306/c…
阅读更多...
WIFI/BT中蓝牙的硬件资源是如何调度的 UART和PCM接口传输的是什么信号

WIFI/BT中蓝牙的硬件资源是如何调度的 UART和PCM接口传输的是什么信号

安卓或IOS手机中&#xff0c;wifi/bt中的蓝牙是如何调度硬件资源的&#xff0c;尤其是UART和PCM是如何分配的。M.2 wifi/bt模块或其他形式的模块中&#xff0c;蓝牙是如何调度硬件资源的&#xff0c;尤其是UART和PCM是如何分配的。今天我们就图文并茂的解决这个问题。 蓝牙文件…
阅读更多...
CSS display属性

CSS display属性

目录 概述&#xff1a; 设置display示例&#xff1a; none&#xff1a; block&#xff1a; inline&#xff1a; inline-block &#xff1a; 概述&#xff1a; 在CSS中我们可以使用display属性来控制元素的布局&#xff0c;我们可以通过display来设置元素的类型。 在不设置…
阅读更多...
对装饰器模式的理解

对装饰器模式的理解

目录 一、场景二、面对场景中的新需求&#xff0c;我们怎么办&#xff1f;1、暴力法&#xff1a;直接修改原有的代码。2、子类继承法&#xff1a;既然要增强行为&#xff0c;那我搞一个子类&#xff0c;覆写不就完事了&#xff1f;3、装饰器模式 三、对装饰器模式的思考1、从代…
阅读更多...
今天刷两题（day2）

今天刷两题（day2）

题目一&#xff1a;最长公共前缀 题目描述&#xff1a; 给你一个大小为 n的字符串数组 strs &#xff0c;其中包含n个字符串 , 编写一个函数来查找字符串数组中的最长公共前缀&#xff0c;返回这个公共前缀。输入输出描述&#xff1a; 输入&#xff1a;"abca","…
阅读更多...
Python这十大特征,堪称“圆满”!

Python这十大特征,堪称“圆满”!

当你犹豫是否要开始 Python 学习之前&#xff0c;可以先详尽了解一下这门编程语言。 软件开发者 Guido Van Rossum 于 1991 年创建了 Python&#xff0c;旨在使程序员的工作更加简单。Python 是目前全球比较流行且产业急需的程序设计语言&#xff0c;也是一门跨平台、开源、免…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023