腾讯云多人音视频房间SDKTUIRoomKit_音视频解决方案_同尘科技
API 简介
TUIRoomKit API 是多人视频会议组件的含 UI 接口,使用 TUIRoomKit API,您可以通过简单接口快速实现一个类微信的音视频通话场景,如果您想要体验并调试视频会议效果,请阅读 Demo 快速跑通,如果您想把我们的功能直接嵌入到您的项目中,请阅读 快速接入(TUIRoomKit)。
API 概览
在页面中引用 TUIRoomKit 组件。例如:在 App.vue
组件中引入 TUIRoomKit 组件。TUIRoomKit 组件将用户分为主持人角色及普通成员角色。组件对外提供了 init、createRoom、enterRoom 方法。主持人及普通成员可通过 init 方法向 TUIRoomKit 组件初始化应用及用户数据,主持人可通过 createRoom 方法创建并加入房间,普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。
import { ref, onMounted } from 'vue';// 引入 TUIRoom 组件,注意确认引入路径是否正确import Room from './TUIRoom/index.vue';// 获取 TUIRoom 组件元素,用于调用 TUIRoom 组件的方法const TUIRoomRef = ref();
onMounted(async () => { // 初始化 TUIRoom 组件 // 主持人在创建房间前需要先初始化 TUIRoom 组件 // 普通成员在进入房间前需要先初始化 TUIRoom 组件 await TUIRoomRef.value.init({ // 获取 sdkAppId 请您参考 步骤一 sdkAppId: 0, // 用户在您业务中的唯一标示 Id userId: '', // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系 userSig: '', // 用户在您业务中使用的昵称 userName: '', // 用户在您业务中使用的头像链接 avatarUrl: '', // 用户在您业务中需要的皮肤主题颜色及是否支持切换皮肤主题 theme: { defaultTheme:'black', isSupportSwitchTheme: true } }) // 默认执行创建房间,实际接入可按需求择机执行 handleCreateRoom 方法 await handleCreateRoom();})
// 主持人创建房间,该方法只在创建房间时调用async function handleCreateRoom() { // roomId 为用户进入的房间号, 要求 roomId 类型为 string // roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式,默认为'FreeToSpeak',注意目前仅支持自由发言模式 // roomParam 指定了用户进入房间的默认行为(是否默认开启麦克风,是否默认开启摄像头,默认媒体设备Id) const roomId = '123456'; const roomMode = 'FreeToSpeak'; const roomParam = { isOpenCamera: true, isOpenMicrophone: true, } try { await TUIRoomRef.value.createRoom({ roomId, roomName: roomId, roomMode, roomParam }); } catch (error: any) { alert('TUIRoomKit.createRoom error: ' + error.message); }}
// 普通成员进入房间,该方法在普通成员进入已创建好的房间时调用async function handleEnterRoom() { // roomId 为用户进入的房间号, 要求 roomId 类型为 string // roomParam 指定了用户进入房间的默认行为(是否默认开启麦克风,是否默认开启摄像头,默认媒体设备Id) const roomId = '123456'; const roomParam = { isOpenCamera: true, isOpenMicrophone: true, } try { await TUIRoomRef.value.enterRoom({ roomId, roomParam }); } catch (error: any) { alert('TUIRoomKit.enterRoom error: ' + error.message); }}
html, body { width: 100%; height: 100%; margin: 0;}
#app { width: 100%; height: 100%; * { box-sizing: border-box; }}
API 详情
TUIRoomkit 接口
init
初始化 TUIRoomKit 数据,任何使用 TUIRoomKIt 的用户都需要调用 init 方法。
TUIRoomRef.value.init(roomData);
参数如下表所示:
参数 | 类型 | 含义 |
roomData | object | 房间初始化参数 |
roomData.sdkAppId | number | 客户的 SDKAppId |
roomData.userId | string | 用户的唯一 ID |
roomData.userSig | string | 用户的 UserSig |
roomData.userName | string | 用户的昵称 |
roomData.avatarUrl | string | 用户的头像地址 |
roomData.theme | object | 界面的主题风格 |
roomData.theme.defaultTheme | string | 默认主题皮肤颜色 |
roomData.theme.isSupportSwitchTheme | boolean | 是否支持切换主题 |
createRoom
主持人创建房间。
TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);
参数如下表所示:
参数 | 类型 | 含义 |
roomId | string | 房间 ID |
roomMode | string | 房间模式,FreeToSpeak(自由发言模式)和 SpeakAfterTakingSeat(上台发言模式),默认为 FreeToSpeak |
roomParam | Object | 非必填 |
roomParam.isOpenCamera | string | 非必填,进房是否打开摄像头,默认为关闭 |
roomParam.isOpenMicrophone | string | 非必填,进房是否打开麦克风,默认为关闭 |
roomParam.defaultCameraId | string | 非必填,默认摄像头设备 ID |
roomParam.defaultMicrophoneId | string | 非必填,默认麦克风设备 ID |
roomParam.defaultSpeakerId | String | 非必填,默认扬声器设备 ID |
enterRoom
普通成员加入房间。
TUIRoomRef.value.enterRoom(roomId, roomParam);
参数如下表所示:
参数 | 类型 | 含义 |
roomId | string | 房间 ID |
roomParam | Object | 非必填 |
roomParam.isOpenCamera | string | 非必填,进房是否打开摄像头,默认为关闭 |
roomParam.isOpenMicrophone | string | 非必填,进房是否打开麦克风,默认为关闭 |
roomParam.defaultCameraId | string | 非必填,默认摄像头设备 ID |
roomParam.defaultMicrophoneId | string | 非必填,默认麦克风设备 ID |
roomParam.defaultSpeakerId | String | 非必填,默认扬声器设备 ID |
TUIRoomkit 事件
onCreateRoom
创建房间回调。
// 引入 TUIRoom 组件,注意确认引入路径是否正确 import Room from './TUIRoom/index.vue';
function onCreateRoom(info) { if (info.code === 0) { console.log('创建房间成功') } }
onEnterRoom
进入房间回调。
// 引入 TUIRoom 组件,注意确认引入路径是否正确 import Room from './TUIRoom/index.vue';
function onEnterRoom(info) { if (info.code === 0) { console.log('进入房间成功') } }
onDestroyRoom
主持人销毁房间的回调。
// 引入 TUIRoom 组件,注意确认引入路径是否正确 import Room from './TUIRoom/index.vue';
function onDestroyRoom(info) { if (info.code === 0) { console.log('主持人销毁成功') } }
onExitRoom
普通成员退出房间的回调。
// 引入 TUIRoom 组件,注意确认引入路径是否正确 import Room from './TUIRoom/index.vue';
function onExitRoom(info) { if (info.code === 0) { console.log('普通成员退出房间成功') } }
onKickedOutOfRoom
普通成员被主持人踢出房间通知。
// 引入 TUIRoom 组件,注意确认引入路径是否正确 import Room from './TUIRoom/index.vue';
function onKickedOutOfRoom({ roomId, message }) { console.log('普通成员被主持人踢出房间', roomId, message); }
onKickedOffLine
用户账号在其他地方登录,被踢下线。
// 引入 TUIRoom 组件,注意确认引入路径是否正确 import Room from './TUIRoom/index.vue';
function onKickedOffLine({ message }) { console.log('成员被踢下线', message); }
onUserSigExpired
用户 userSig 过期,请重新获取 userSig。
// 引入 TUIRoom 组件,注意确认引入路径是否正确 import Room from './TUIRoom/index.vue';
function onUserSigExpired() { console.log('用户 userSig 过期, 请重新生成 userSig.'); }
对音视频的解决方案有疑惑?想了解解决方案收费? 联系解决方案专家
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?