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


在这里插入图片描述

一、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.rhkb.cn/news/315106.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

clickhouse安装部署

虚拟机&#xff1a;virtualbox7.0 操作系统&#xff1a;ubuntu server 22.04.3 虚拟机硬件&#xff1a;cpu 1&#xff0c;内存 2G&#xff0c; 硬盘 100G 采用默认安装 参照 https://clickhouse.com/docs/en/install#quick-install 安装部署 对于Debian、Ubuntu&#xff0c…

【漏洞复现】艺创科技智能营销路由器后台命令执行漏洞

漏洞描述&#xff1a; 成都艺创科技有限公司是一家专注于新型网络设备研发、生产、销售和服务的企业&#xff0c;在大数据和云时代&#xff0c;致力于为企业提供能够提升业绩的新型网络设备。 智能营销路由器存在后台命令执行漏洞&#xff0c;攻击者可利用漏洞获取路由器控制…

用NuGet安装 Oracle ODP.NET

oracle官网原文&#xff1a;Using NuGet to Install and Configure Oracle Data Provider for .NET Using NuGet to Install and Configure Oracle Data Provider for .NET In this section, you will install ODP.NET NuGet packages from nuget.org. Select View > Solut…

马赛克,克星,又火一个,懒人包!

在AI技术日新月异的今天&#xff0c;各种边界不断被突破&#xff0c;今天我要给大家带来的&#xff0c;是一款名为InstructIR的革命性AI工具&#xff0c;只需一句话&#xff0c;即可实现高质量图像修改&#xff01;这不仅仅是一个普通的图像处理工具&#xff0c;而是一种革命性…

【经验分享】MySQL集群部署一:主从模式

目录 前言一、基本介绍1.1、概念1.2、执行流程 二、部署2.1、通用配置2.2、主节点配置2.3、从节点配置2.4、主从测试2.5、谈一谈主节点历史数据同步问题 前言 MySQL的部署模式常见的包括以下几种&#xff1a; 独立服务器部署主从复制部署高可用性集群&#xff08;HA&#xff…

2024 年最好的免费数据恢复软件,您可以尝试的几个数据恢复软件

由于系统崩溃而丢失数据可能会给用户带来麻烦。我们将重要的宝贵数据和个人数据保存在我们的 PC、笔记本电脑和其他数字设备上。您可能会因分区丢失、意外删除文件和文件夹、格式化硬盘驱动器而丢失数据。数据丢失是不幸的&#xff0c;如果您不小心从系统中删除了文件或数据&am…

远程连接docker,实现本地发布版本到服务器

最近在学jenkins的时候&#xff0c;发现涉及到了docker的远程发布调用。后续应该还要自己搭建一个docker的本地仓库。 简单描述一下具体是如何实现的&#xff1a; 1、将docker的服务器开启2375端口&#xff08;注意&#xff0c;这里的开启是将端口直接暴露出去&#xff0c;不用…

spring高级篇(四)

1、DispatcherServlet DispatcherServlet 是 Spring MVC 中的一个关键组件&#xff0c;用于处理 Web 请求并将其分发给相应的处理器&#xff08;Controller&#xff09;进行处理。它是一个 Servlet&#xff0c;作为前端控制器&#xff08;Front Controller&#xff09;的核心&a…

基于深度学习神经网络的AI图片上色DDcolor系统源码

第一步&#xff1a;DDcolor介绍 DDColor 是最新的 SOTA 图像上色算法&#xff0c;能够对输入的黑白图像生成自然生动的彩色结果&#xff0c;使用 UNet 结构的骨干网络和图像解码器分别实现图像特征提取和特征图上采样&#xff0c;并利用 Transformer 结构的颜色解码器完成基于视…

以生命健康为中心的物联网旅居养老运营平台

随着科技的飞速发展和人口老龄化的日益加剧&#xff0c;养老问题逐渐成为社会关注的焦点。传统的养老模式已经难以满足现代老年人的多元化需求&#xff0c;因此&#xff0c;构建一个以生命健康为中心的物联网旅居养老运营平台显得尤为重要。 以生命健康为中心的物联网旅居养老运…

未来已来:解锁AGI的无限潜能与挑战

未来已来&#xff1a;解锁AGI的无限潜能与挑战 引言 假设你有一天醒来&#xff0c;发现你的智能手机不仅提醒你今天的日程&#xff0c;还把你昨晚做的那个奇怪的梦解释了一番&#xff0c;并建议你可能需要减少咖啡摄入量——这不是科幻电影的情节&#xff0c;而是人工通用智能…

本地认证的密码去哪了?怎么保证安全的?

1. windows登录的明文密码&#xff0c;存储过程是怎么样的&#xff1f;密文存在哪个文件下?该文件是否可以打开&#xff0c;并且查看到密文&#xff1f; 系统将输入的明文密码通过hash算法转为哈希值&#xff0c;且输入的值会在内存中立即删除无法查看。 然后将密文存放在C:…

Vue3+Vite开发的项目进行加密打包

本文主要介绍Vue3+Vite开发的项目如何进行加密打包。 目录 一、vite简介二、混淆工具三、使用方法1. 安装插件:2. 配置插件:3. 运行构建:4. 自定义混淆选项:5. 排除文件:下面是Vue 3+Vite开发的项目进行加密打包的方法。 一、vite简介 Vite 是一个由 Evan You 创造的现代…

MultiHeadAttention在Tensorflow中的实现原理

前言 通过这篇文章&#xff0c;你可以学习到Tensorflow实现MultiHeadAttention的底层原理。 一、MultiHeadAttention的本质内涵 1.Self_Atention机制 MultiHeadAttention是Self_Atention的多头堆嵌&#xff0c;有必要对Self_Atention机制进行一次深入浅出的理解&#xff0c;这…

AJAX——案例

1.商品分类 需求&#xff1a;尽可能同时展示所有商品分类到页面上 步骤&#xff1a; 获取所有的一级分类数据遍历id&#xff0c;创建获取二级分类请求合并所有二级分类Promise对象等待同时成功后&#xff0c;渲染页面 index.html代码 <!DOCTYPE html> <html lang&qu…

ssh 文件传输:你应该掌握的几种命令行工具

这篇文章主要分享一下我使用过的 ssh 传输文件的进阶路程&#xff0c;从 scp -> lrzsz -> trzsz&#xff0c;希望能给你带来一些帮助&#xff5e; scp scp 命令可以用于在 linux 系统之间复制文件&#xff0c;具体的语法可以参考下图 其实使用起来也还比较方便&#x…

【Docker】Docker 实践(三):使用 Dockerfile 文件构建镜像

Docker 实践&#xff08;三&#xff09;&#xff1a;使用 Dockerfile 文件构建镜像 1.使用 Dockerfile 文件构建镜像2.Dockerfile 文件详解 1.使用 Dockerfile 文件构建镜像 Dockerfile 是一个文本文件&#xff0c;其中包含了一条条的指令&#xff0c;每一条指令都用于构建镜像…

智慧码头港口:施工作业安全生产AI视频监管与风险预警平台方案

一、建设思路 随着全球贸易的快速发展&#xff0c;港口作为连接海洋与内陆的关键节点&#xff0c;其运营效率和安全性越来越受到人们的关注。为了提升港口的运营效率和安全性&#xff0c;智慧港口视频智能监控系统的建设显得尤为重要。 1&#xff09;系统架构设计 系统应该采…

针对icon报错

针对上篇文章生成图标链接中图标报错 C# winfrom应用程序添加图标-CSDN博客 问题&#xff1a;参数“picture”必须是可用作Icon的参数 原因&#xff1a;生成的ico图标类型不匹配 解决方法&#xff1a; 更改导出的ico类型

下载学浪视频,小浪助手一键搞定

小浪助手可以一键获取课程&#xff0c;一键根据课程获取视频列表&#xff0c;而且内置了2大下载器&#xff0c;N_m3u8和逍遥一仙下载器 小浪助手我已经打包好了&#xff0c;有需要的自己取一下 学浪下载工具链接&#xff1a;https://pan.baidu.com/s/1_Sg-EGGXKc4bMW-NPqUqvg…