获取服务所需信息
腾讯云新用户有实时音视频提供包月套餐体验和免费时长包免费试用 TRTC 功能
首先注册并实名认证后,先领取七天免费体验和免费时长包。
领取链接:https://cloud.tencent.com/document/product/647/44360七天免费体验结束后,如果再想使用腾讯云音视频功能需购买
领取成功后,需要先创建应用
应用创建后,点击详情获取所需数据。
吃一堑长一智
领完体验功能时候还要领一下音视频时长包。
不要勾选超级加购。
SDKAppID:在腾讯云创建的音视频应用 SDKAppID
SDKSecretKey:在腾讯云创建的音视频应用 SDKSecretKey
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 原生插件
登录 uni 原生插件市场,并访问 TencentCloud-TUICallKit 插件,在插件详情页中购买(免费插件也可以在插件市场0元购)。购买后才能够云端打包使用插件。(购买插件时请选择正确的 appid,以及绑定正确包名)
使用 uni 原生插件必须先提交云端打包才能生效,购买插件后在应用的 manifest.json 页面的 App原生插件配置 项下单击选择云端插件,选择腾讯云原生音视频插件。
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}`);
}
});