当前位置:   article > 正文

新知实验室_初探腾讯云音视频_腾讯云多人语音场景

腾讯云多人语音场景

本文目标:

  • 了解 TRTC 的基本概念
  • 初步运行 demo 调用 API
  • 完成进入视频房间
  • 完成多人进入同一房间

一、腾讯 TRTC

可能有些同学并不知道 RTC 的相关概念, 这里先简单说一下。

WebRTC(web Real-Time Communication) 是指网站实时音视频通话技术。
这项技术允许网络应用或者网络站点,在不借助任何中间媒介和第三方工具的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和音频流或者其他任意数据的传输,感兴趣的小伙伴可以自行搜索了解下。

TRTC (Tencent Real-Time Communication)是腾讯业务中的一项,也是 WebRTC的一种实现。

TRTC 主要提供了两个场景

  • 多人音视频通话
  • 低延时互动直播

那么与其他的 WebRTC 相比,TRTC 具有哪些优点呢?

  1. 更清晰更直观的接口文档:中文版式,图文互补
  2. 更全面更详细的代码示例:API 示例 + 场景方案
  3. 所见即所需的实时传输:借助腾讯云覆盖全球的专线网络和优质的节点资源,为使用者提供了便捷快速的全球语音视频服务
  4. 超多的平台支持:打通 Web,Android,iOS,Windows,MacOS、小程序等多平台
  5. 强大的 API 集成:除了基础的语音通话视频直播,还提供了如连麦、PK、卡拉OK、虚拟成像、基础美颜、屏幕分享、变声、耳返等更多功能支持
  6. 超低的学习成本:提供了多个平台的基础 demo,可以直接下载运行查看效果
  7. 场景化定制组件:提供了音视频通话、多人会议、在线直播、在线K歌等常用组件,只需要安装,引入,使用,三步完成场景搭建

二、初步体验

  1. 首先需要登录腾讯云 TRTC,点击链接微信扫码注册即可,然后按照相关法律法规要求,进行实名认证,这里就不过多赘述了。

  2. 实名认证后,进入应用管理,创建自己的应用。

在这里插入图片描述

TRTC 以项目的方式进行接口管理,每一个创建成功的项目,都会被分配携带一个 SDKAppIDSecretKey。其中

  • SDKAppID 是项目的标识,用于业务隔离。
  • SecretKey 是初始化 SDK 配置文件的密钥信息。
  • 这两个信息可以在应用管理的列表中获取,也可以根据平台引导自行查看

在这里插入图片描述

⚠️ 请不要泄漏你的SecretKey,否则可能造成流量盗用

完成上面的步骤以后,就可以进入到第三步了。

  1. 下载SDK 以及相应的 demo, 这一步我选择 web 项目
  2. 然后在本地打开 demo,将 demo 中src/utils/generateTestUserSig.ts文件中的SDKAPPIDSECRETKEY替换为上面创建好的项目的SDKAppIDSecretKey
    在这里插入图片描述
  3. 然后在此文件的根目录下运行npm start 就可以看到效果了。

当然了,到这一步只能算万里长征的第一步。后面我们还需要针对性的理解几个概念。

三、深入理解

在理解实际的直播场景之前,我们需要先理解如下几个概念:

namedescfunctional
Client音视频通话客户端对象进入通话房间、发布本地数据流、订阅远端数据流
Stream数据流(音频、视频)播放、暂停
LocalStream本地数据流TRTC.createStream() 创建
RemoteStream远端数据流Client.on(‘stream-added’)获取
roomId房间标识(唯一)-
role用户标识(唯一)-
userSig进房鉴权票据-

有些童鞋被本地数据流和远端数据流的概念困扰,这里简单说一下,本地数据流可以理解为自己的声音和图像,远端数据流就是房间中其他人的声音和图像。

userSig

userSig 是比较特殊的一项,因为它是通过计算得到的加密数据。

每个用户在进入房间都需要验证 userSig,就好比你进入电影院看电影要买电影票一样,本质上,它是一种安全保护签名,目的是为了阻止恶意攻击者盗用云服务使用权。

userSig 由 HMAC SHA256 加密算法基于SDKAppIDUserID等数据计算得出,其计算的基本方式是

hmacsha256(
	secretkey, 
	(userid + sdkappid + currtime + expire + 
     base64(userid + sdkappid + currtime + expire)))
  • 1
  • 2
  • 3
  • 4

这个加密还是很复杂的,但是放在前端依旧不安全,在真实的线上环境, UserSig 的计算代码应该放在业务服务器上,然后由 App 在需要的时候向服务器获取实时算出的 UserSig

更多内容在这里

生命周期

有了上面的概念支持,我们大概就知道视频房间是什么样子的。接下来看一下 client 生命周期。

在这里插入图片描述
从生命周期图中可以看出来,TRTC 的设计是非常简洁的,从创建房间到加入、离开只需要调用几个固定的方法,这些方法都可以在这里找到,感兴趣的话可以点开看详细的内容。

四、动手实践

为了演示方便,我直接在 demo 项目中动手了,需求就是创建一个直播间。

在router 中加入一个新的路由

 {
    path: '/myroom',
    name: 'myroom',
    component: () => import('../views/video/myroom.vue'),
  },
  • 1
  • 2
  • 3
  • 4
  • 5

然后在myroom.vue中写入如下代码

<template>
    <div id="local"></div>
 </template>
 
 <script lang="ts" setup>
 import TRTC from 'trtc-js-sdk';
 import { genTestUserSig } from '@/utils/generateTestUserSig';
 import { getParamKey } from '@/utils/utils';
 
 const userId = getParamKey('userId');
 const { sdkAppId, userSig } = genTestUserSig({ sdkAppId: 0, userId, secretKey: '' });
 
 const Client = TRTC.createClient({
   mode: 'rtc',
   sdkAppId,
   userId,
   userSig,
 });
 
 Client
   .join({
     roomId: 111,
     role: 'anchor',
   })
   .then(async () => {
     console.log('进房成功');
   })
   .catch((error) => {
     console.error(`进房失败,请稍后再试${error}`);
   });
 
 </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

访问页面和控制台,已经能够看到控制台打印出了进房成功

在这里插入图片描述
但是页面并没有呈现任何内容,这是因为此时我们还没有对本地的数据流进行采集、播放。加入如下代码

...
.then(async () => {
     console.log('进房成功');
     const localStream = TRTC.createStream({
      userId,
      audio: true,
      video: true,
      cameraId: (await TRTC.getCameras())[0].deviceId,
      microphoneId: (await TRTC.getMicrophones())[0].deviceId,
    });
    localStream.setVideoProfile('480p');
    await localStream.initialize();
    localStream.play('local');
    await Client.publish(localStream);
})
...
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

这里已经对本地的数据流进行了采集和播放,并指定了摄像头和麦克风,页面此时可以看到自己了,当然,为了不影响你们的学习兴趣,我自己马赛克了

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/70079
推荐阅读
相关标签