@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
346 lines (345 loc) • 13.4 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import TUIRoomEngine__default, { TUIVideoStreamType, TUIRoomEvents, TUIRole } from "@tencentcloud/tuiroom-engine-js";
import { isMobile } from "../../utils/environment.mjs";
import { combineComparators, throttle, createComparator } from "../../utils/utils.mjs";
class UserManager {
constructor(service) {
__publicField(this, "service");
__publicField(this, "userListCompareFunction");
__publicField(this, "streamListCompareFunction");
__publicField(this, "onUserVideoStateChanged", (eventInfo) => {
const { userId, streamType, hasVideo } = eventInfo;
let userInfo = this.service.roomStore.userInfoObj[userId];
if (!userInfo && hasVideo) {
this.service.roomStore.addUserInfo({ userId, isInRoom: true });
}
userInfo = this.service.roomStore.userInfoObj[userId];
if (!userInfo) {
return;
}
const updateInfo = streamType === TUIVideoStreamType.kScreenStream ? { hasScreenStream: hasVideo } : { hasVideoStream: hasVideo };
this.service.roomStore.updateUserInfo({ userId, ...updateInfo });
if (streamType === TUIVideoStreamType.kCameraStream || streamType === TUIVideoStreamType.kScreenStream && hasVideo) {
const streamInfo = this.service.roomStore.streamInfoObj[`${userId}_${streamType}`];
if (!streamInfo) {
this.service.roomStore.addStreamInfo(userId, streamType);
}
this.service.roomStore.updateStreamInfo({
userId,
streamType,
hasVideoStream: hasVideo
});
} else if (streamType === TUIVideoStreamType.kScreenStream && !hasVideo) {
this.service.roomStore.removeStreamInfo(userId, streamType);
}
});
__publicField(this, "handleUserVoiceVolumeThrottle", throttle(
this.handleUserVoiceVolume,
1e3
));
this.service = service;
this.userListCompareFunction = null;
this.streamListCompareFunction = null;
this.onRemoteUserEnterRoom = this.onRemoteUserEnterRoom.bind(this);
this.onRemoteUserLeaveRoom = this.onRemoteUserLeaveRoom.bind(this);
this.onSeatListChanged = this.onSeatListChanged.bind(this);
this.onUserVideoStateChanged = this.onUserVideoStateChanged.bind(this);
this.onUserAudioStateChanged = this.onUserAudioStateChanged.bind(this);
this.onUserVoiceVolumeChanged = this.onUserVoiceVolumeChanged.bind(this);
this.bindRoomEngineEvents();
}
async setSelfInfo(options) {
const { avatarUrl, userName } = await TUIRoomEngine__default.getSelfInfo();
const info = {
userName: options.userName || userName,
avatarUrl: options.avatarUrl || avatarUrl
};
this.service.basicStore.setBasicInfo(info);
return TUIRoomEngine__default.setSelfInfo(info);
}
async setCustomInfoForUser(options) {
const roomEngine = this.service.roomEngine.instance;
return roomEngine == null ? void 0 : roomEngine.setCustomInfoForUser(options);
}
getDisplayName(options) {
const { nameCard, userName, userId } = options;
return nameCard || userName || userId;
}
setLocalUser(userInfo) {
this.service.roomStore.addUserInfo(userInfo);
this.service.roomStore.addStreamInfo(
userInfo.userId,
TUIVideoStreamType.kCameraStream
);
}
setUserListSortComparator(comparator) {
this.userListCompareFunction = comparator;
}
getUserListSortComparator() {
const defaultUserListCompareFunction = combineComparators(
createComparator(
(userInfo) => Boolean(userInfo.userId === this.service.basicStore.userId)
),
createComparator(
(userInfo) => Boolean(userInfo.userRole === TUIRole.kRoomOwner)
),
createComparator(
(userInfo) => Boolean(userInfo.userRole === TUIRole.kAdministrator)
),
createComparator(
(userInfo) => Boolean(userInfo.hasScreenStream)
),
createComparator(
(userInfo) => Boolean(userInfo.hasVideoStream && userInfo.hasAudioStream)
),
createComparator(
(userInfo) => Boolean(userInfo.hasVideoStream)
),
createComparator(
(userInfo) => Boolean(userInfo.hasAudioStream)
),
createComparator((userInfo) => Boolean(userInfo.onSeat)),
createComparator(
(userInfoA, userInfoB) => Boolean(Number(userInfoA.timestamp) < Number(userInfoB.timestamp))
)
);
return this.userListCompareFunction || defaultUserListCompareFunction;
}
setStreamListSortComparator(comparator) {
this.streamListCompareFunction = comparator;
}
getStreamListSortComparator() {
const defaultUserListCompareFunction = combineComparators(
createComparator(
(streamInfo) => Boolean(streamInfo.streamType === TUIVideoStreamType.kScreenStream)
),
createComparator(
(streamInfo) => Boolean(streamInfo.userId === this.service.roomStore.masterUserId)
),
createComparator(
(streamInfo) => Boolean(streamInfo.userId === this.service.basicStore.userId)
),
createComparator(
(streamInfoA) => Boolean(streamInfoA.hasAudioStream && streamInfoA.hasVideoStream)
),
createComparator(
(streamInfoA) => Boolean(streamInfoA.hasVideoStream)
),
createComparator(
(streamInfoA) => Boolean(streamInfoA.hasAudioStream)
),
createComparator(
(streamInfoA, streamInfoB) => Boolean(Number(streamInfoA.timestamp) - Number(streamInfoB.timestamp))
)
);
return this.streamListCompareFunction || defaultUserListCompareFunction;
}
onRemoteUserEnterRoom(eventInfo) {
const { userInfo } = eventInfo;
this.service.roomStore.addUserInfo(
Object.assign(userInfo, { isInRoom: true, timestamp: Date.now() })
);
if (this.service.roomStore.isFreeSpeakMode) {
this.service.roomStore.addStreamInfo(
userInfo.userId,
TUIVideoStreamType.kCameraStream
);
}
}
onRemoteUserLeaveRoom(eventInfo) {
const { userId } = eventInfo.userInfo;
this.service.roomStore.removeUserInfo(userId);
this.service.roomStore.removeStreamInfo(
userId,
TUIVideoStreamType.kCameraStream
);
this.service.roomStore.removeStreamInfo(
userId,
TUIVideoStreamType.kScreenStream
);
}
onSeatListChanged(eventInfo) {
const { seatedList, leftList } = eventInfo;
seatedList.forEach((seat) => {
const { userId } = seat;
const user = this.service.roomStore.userInfoObj[userId];
if (user) {
this.service.roomStore.updateUserInfo({ userId, onSeat: true });
} else {
this.service.roomStore.addUserInfo({
userId,
onSeat: true,
isInRoom: true
});
}
this.service.roomStore.addStreamInfo(
userId,
TUIVideoStreamType.kCameraStream
);
});
leftList == null ? void 0 : leftList.forEach((seat) => {
const { userId } = seat;
const user = this.service.roomStore.userInfoObj[userId];
if (user) {
this.service.roomStore.updateUserInfo({ userId, onSeat: false });
}
this.service.roomStore.removeStreamInfo(
userId,
TUIVideoStreamType.kCameraStream
);
this.service.roomStore.removeStreamInfo(
userId,
TUIVideoStreamType.kScreenStream
);
});
}
onUserAudioStateChanged(eventInfo) {
const { userId, hasAudio } = eventInfo;
let userInfo = this.service.roomStore.userInfoObj[userId];
if (!userInfo && hasAudio) {
this.service.roomStore.addUserInfo({ userId, isInRoom: true });
}
userInfo = this.service.roomStore.userInfoObj[userId];
if (!userInfo) {
return;
}
this.service.roomStore.updateUserInfo({ userId, hasAudioStream: hasAudio });
const streamInfo = this.service.roomStore.streamInfoObj[`${userId}_${TUIVideoStreamType.kCameraStream}`];
if (!streamInfo) {
this.service.roomStore.addStreamInfo(
userId,
TUIVideoStreamType.kCameraStream
);
}
this.service.roomStore.updateStreamInfo({
userId,
streamType: TUIVideoStreamType.kCameraStream,
hasAudioStream: hasAudio
});
}
// Calculate the userId of the loudest speaker in the room
// Calculate the userId of the remote user who speaks the loudest in the current room.
handleUserVoiceVolume(userVolumeList) {
const localUserVolume = {
userId: this.service.basicStore.userId,
volume: 0
};
const largestRemoteUserVolume = {
userId: "",
volume: 0
};
userVolumeList.forEach((item) => {
var _a, _b;
if (item.userId === this.service.basicStore.userId && ((_a = this.service.roomStore.localStream) == null ? void 0 : _a.hasAudioStream)) {
localUserVolume.volume = item.volume;
} else if (item.userId !== this.service.basicStore.userId && ((_b = this.service.roomStore.userInfoObj[item.userId]) == null ? void 0 : _b.hasAudioStream)) {
const { userId, volume } = item;
if (volume > largestRemoteUserVolume.volume) {
largestRemoteUserVolume.userId = userId;
largestRemoteUserVolume.volume = volume;
}
}
});
const largestUserVolume = localUserVolume.volume > largestRemoteUserVolume.volume ? localUserVolume : largestRemoteUserVolume;
if (this.service.roomStore.currentSpeakerInfo.remoteSpeakerUserId) {
const lastRemoteSpeakerUserVolumeInfo = userVolumeList.find(
(item) => item.userId === this.service.roomStore.currentSpeakerInfo.remoteSpeakerUserId
);
if (!lastRemoteSpeakerUserVolumeInfo || (lastRemoteSpeakerUserVolumeInfo == null ? void 0 : lastRemoteSpeakerUserVolumeInfo.volume) === 0 && largestRemoteUserVolume.volume > 0) {
this.service.roomStore.setCurrentSpeakerInfo({
remoteSpeakerUserId: largestRemoteUserVolume.userId
});
}
} else {
if (largestRemoteUserVolume.volume > 0) {
this.service.roomStore.setCurrentSpeakerInfo({
remoteSpeakerUserId: largestRemoteUserVolume.userId
});
}
}
if (this.service.roomStore.currentSpeakerInfo.speakerUserId) {
const lastSpeakerUserVolumeInfo = userVolumeList.find(
(item) => item.userId === this.service.roomStore.currentSpeakerInfo.speakerUserId
);
if (!lastSpeakerUserVolumeInfo || lastSpeakerUserVolumeInfo.volume === 0 && largestUserVolume.volume > 0) {
this.service.roomStore.setCurrentSpeakerInfo({
speakerUserId: largestUserVolume.userId
});
}
} else {
if (largestUserVolume.volume > 0) {
this.service.roomStore.setCurrentSpeakerInfo({
speakerUserId: largestUserVolume.userId
});
}
}
}
onUserVoiceVolumeChanged(eventInfo) {
const { userVolumeList } = eventInfo;
this.service.roomStore.setAudioVolume(userVolumeList);
if (isMobile) {
this.handleUserVoiceVolumeThrottle(userVolumeList);
}
}
bindRoomEngineEvents() {
TUIRoomEngine__default.once("ready", () => {
var _a, _b, _c, _d, _e, _f;
(_a = this.service.roomEngine.instance) == null ? void 0 : _a.on(
TUIRoomEvents.onRemoteUserEnterRoom,
this.onRemoteUserEnterRoom
);
(_b = this.service.roomEngine.instance) == null ? void 0 : _b.on(
TUIRoomEvents.onRemoteUserLeaveRoom,
this.onRemoteUserLeaveRoom
);
(_c = this.service.roomEngine.instance) == null ? void 0 : _c.on(
TUIRoomEvents.onSeatListChanged,
this.onSeatListChanged
);
(_d = this.service.roomEngine.instance) == null ? void 0 : _d.on(
TUIRoomEvents.onUserVideoStateChanged,
this.onUserVideoStateChanged
);
(_e = this.service.roomEngine.instance) == null ? void 0 : _e.on(
TUIRoomEvents.onUserAudioStateChanged,
this.onUserAudioStateChanged
);
(_f = this.service.roomEngine.instance) == null ? void 0 : _f.on(
TUIRoomEvents.onUserVoiceVolumeChanged,
this.onUserVoiceVolumeChanged
);
});
}
unbindRoomEngineEvents() {
var _a, _b, _c, _d, _e, _f;
(_a = this.service.roomEngine.instance) == null ? void 0 : _a.off(
TUIRoomEvents.onRemoteUserEnterRoom,
this.onRemoteUserEnterRoom
);
(_b = this.service.roomEngine.instance) == null ? void 0 : _b.off(
TUIRoomEvents.onRemoteUserLeaveRoom,
this.onRemoteUserLeaveRoom
);
(_c = this.service.roomEngine.instance) == null ? void 0 : _c.off(
TUIRoomEvents.onSeatListChanged,
this.onSeatListChanged
);
(_d = this.service.roomEngine.instance) == null ? void 0 : _d.off(
TUIRoomEvents.onUserVideoStateChanged,
this.onUserVideoStateChanged
);
(_e = this.service.roomEngine.instance) == null ? void 0 : _e.off(
TUIRoomEvents.onUserAudioStateChanged,
this.onUserAudioStateChanged
);
(_f = this.service.roomEngine.instance) == null ? void 0 : _f.off(
TUIRoomEvents.onUserVoiceVolumeChanged,
this.onUserVoiceVolumeChanged
);
}
}
export {
UserManager
};