腾讯云音视频插件使用文档

原创

wx6488042bd0b3d 2023-11-06 17:19:56 ©著作权

文章标签 音视频腾讯云初始化 文章分类 spring boot 后端开发

©著作权归作者所有：来自51CTO博客作者wx6488042bd0b3d的原创作品，请联系作者获取转载授权，否则将追究法律责任

获取服务所需信息

腾讯云新用户有实时音视频提供包月套餐体验和免费时长包免费试用 TRTC 功能

首先注册并实名认证后，先领取七天免费体验和免费时长包。

领取链接：https://cloud.tencent.com/document/product/647/44360七天免费体验结束后，如果再想使用腾讯云音视频功能需购买

领取成功后，需要先创建应用

腾讯云音视频插件使用文档_腾讯云

应用创建后，点击详情获取所需数据。

吃一堑长一智

领完体验功能时候还要领一下音视频时长包。

腾讯云音视频插件使用文档_腾讯云_02

不要勾选超级加购。

腾讯云音视频插件使用文档_音视频_03

SDKAppID：在腾讯云创建的音视频应用 SDKAppID

SDKSecretKey：在腾讯云创建的音视频应用 SDKSecretKey

腾讯云音视频插件使用文档_腾讯云_04

RoomID 即房间号，用于唯一标识一个房间。房间号取值区间为1 - 4294967295，由开发者自行维护和分配。

UserID 即用户ID，用于在一个实时音视频应用中唯一标识一个用户。取值范围长度建议不超过32字节。请使用英文字母、数字或下划线，区分大小写。

UserSig 是腾讯云设计的一种安全保护签名，目的是为了阻止恶意攻击者盗用您的云服务使用权。

目前，腾讯云的实时音视频（TRTC）、即时通信（IM）以及移动直播（MLVB）等服务都采用了该套安全保护机制。要使用这些服务，您需要在相应 SDK 的初始化或登录函数中提供 SDKAppID，UserID 和 UserSig 三个关键信息。其中 SDKAppID 用于标识您的应用，UserID 用于标识您的用户，而 UserSig 则是基于前两者计算出的安全签名，它由 HMAC SHA256 加密算法计算得出。只要攻击者不能伪造 UserSig，就无法盗用您的云服务流量。 UserSig 的计算原理如下图所示，其本质就是对 SDKAppID、UserID、ExpireTime 等关键信息进行了一次哈希加密：

TRTC 自己的本地画面和远端画面左右相反？本地默认采集的画面是镜像的。App 端可以通过 setLocalViewMirror 接口设置，该接口只改变本地摄像头预览画面的镜像模式；也可以通过 setVideoEncoderMirror 接口设置编码器输出的画面镜像模式，该接口不改变本地摄像头的预览画面，但会改变另一端用户看到的（以及服务器录制下来的）画面效果。Web 端可以通过 createStream 接口修改 mirror 参数来设置。

web端

1.创建项目

可先创建对应项目，如已有项目则跳过

2.安装组件

vue2:

vue3:

3.获取到使用实时音视频对应的信息

页面中直接引入所需模块, 并在对应位置进行注册组件

在模板中使用组件,组件外使用大小固定的盒子包裹 (组件默认显示空内容，进入通话后自动显示 )

4.登录 TUI 组件

设置好对应的用户信息(获取方式看上文)

初始化插件(使用之前先初始化,登录之后可接受到电话消息)

5.拨通电话

过调用 TUICallKitServer 的 call 函数并指定通话类型和被叫方的 userID，就可以发起语音或者视频通话 (type为通话方式 1语音 2视频) 此时组件可自行显示通话内容

UNI-APP端

1.创建项目

可先创建对应项目，如已有项目则跳过

2.购买 uni-app 原生插件

腾讯云音视频插件使用文档_初始化_05

使用 uni 原生插件必须先提交云端打包才能生效，购买插件后在应用的 manifest.json 页面的 App原生插件配置项下单击选择云端插件，选择腾讯云原生音视频插件。

腾讯云音视频插件使用文档_音视频_06

3.使用插件

使用 uni.requireNativePlugin 的 API 在 vue 页面中引入原生插件，参数为插件的 ID。

const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit');

4.登录 TUI 组件

在项目中添加如下代码，完成 TUICallKit 组件的登录

const options = {
  SDKAppID: xxx,   // 请替换为步骤一取到的 SDKAppID
  userID: xxx,        // 请替换为您的 UserID
  userSig: xxxx, // 您可以在控制台中计算一个 UserSig 并填在这个位置
};
TUICallKit.login(options, (res) => {
  if (res.code === 0) {
    console.log('login success');
  } else {
    console.log(`login failed, error message = ${res.msg}`);
  }
});

5.拨通电话

通过调用 TUICallKit 的 call 函数并指定通话类型和被叫方的 userID，就可以发起语音或者视频通话。

const options = {
  userID: 'mike',
  callMediaType: 1, // 语音通话(callMediaType = 1)、视频通话(callMediaType = 2)
};
TUICallKit.call(options, (res) => {
  if (res.code === 0) {
    console.log('call success');
  } else {
    console.log(`call failed, error message = ${res.msg}`);
  }
});