@tencentcloud/roomkit-electron-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,
361 lines (360 loc) • 15.1 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const SvgIcon = require("../../common/base/SvgIcon.vue.js");
const LoadingIcon = require("../../common/icons/LoadingIcon.vue.js");
const NextIcon = require("../../common/icons/NextIcon.vue.js");
const Button = require("../../common/base/Button.vue.js");
const useRoomControlHooks = require("./useRoomControlHooks.js");
const CreateRoomIcon = require("../../common/icons/CreateRoomIcon.vue.js");
const EnterRoomIcon = require("../../common/icons/EnterRoomIcon.vue.js");
const ScheduleRoomIcon = require("../../common/icons/ScheduleRoomIcon.vue.js");
const useRoomEngine = require("../../../hooks/useRoomEngine.js");
const basic = require("../../../stores/basic.js");
const room = require("../../../stores/room.js");
const AudioMediaControl = require("../../common/AudioMediaControl.vue.js");
const VideoMediaControl = require("../../common/VideoMediaControl.vue.js");
const index = require("../../ScheduleConference/ScheduleConferencePanel/index.vue.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
const vClickOutside = require("../../../directives/vClickOutside.js");
const mediaAbility = require("../../../utils/mediaAbility.js");
const useDeviceManager = require("../../../hooks/useDeviceManager.js");
const _withScopeId = (n) => (Vue.pushScopeId("data-v-d010fdde"), n = n(), Vue.popScopeId(), n);
const _hoisted_1 = { class: "room-control-container" };
const _hoisted_2 = { class: "room-control-main" };
const _hoisted_3 = { class: "control-container" };
const _hoisted_4 = { class: "stream-preview-container" };
const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("div", {
id: "stream-preview",
class: "stream-preview"
}, null, -1));
const _hoisted_6 = { class: "attention-info" };
const _hoisted_7 = {
key: 0,
class: "off-camera-info"
};
const _hoisted_8 = { class: "control-region" };
const _hoisted_9 = { class: "media-control-region" };
const _hoisted_10 = { class: "room-control-region" };
const _hoisted_11 = { class: "create-room-region" };
const _hoisted_12 = { class: "button-text" };
const _hoisted_13 = {
key: 0,
class: "create-room-items"
};
const _hoisted_14 = ["title"];
const _hoisted_15 = ["title"];
const _hoisted_16 = { class: "enter-room-region" };
const _hoisted_17 = { class: "button-text" };
const _hoisted_18 = {
key: 1,
class: "enter-room-action"
};
const _hoisted_19 = ["placeholder"];
const _hoisted_20 = {
key: 0,
class: "schedule-room-region"
};
const _hoisted_21 = { class: "button-text" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "index",
props: {
userName: { default: "" },
givenRoomId: {},
enableScheduledConference: { type: Boolean, default: true }
},
emits: ["create-room", "enter-room"],
setup(__props, { expose: __expose, emit: __emit }) {
const roomStore = room.useRoomStore();
const basicStore = basic.useBasicStore();
const { t } = useRoomControlHooks.default();
const { deviceManager, initMediaDeviceList } = useDeviceManager.default({
listenForDeviceChange: true
});
const props = __props;
__expose({
getRoomParam,
startStreamPreview
});
const roomEngine = useRoomEngine.default();
const isCameraLoading = Vue.ref(false);
const audioVolume = Vue.ref(0);
const isMicMuted = Vue.ref(false);
const isCameraMuted = Vue.ref(false);
const showCreateRoomItems = Vue.ref(false);
const showEnterRoomAction = Vue.ref(Boolean(props.givenRoomId));
const scheduleConferenceDialogVisible = Vue.ref(false);
const scheduleConference = () => {
scheduleConferenceDialogVisible.value = true;
};
const tuiRoomParam = {
isOpenCamera: true,
isOpenMicrophone: true,
defaultCameraId: "",
defaultMicrophoneId: "",
defaultSpeakerId: ""
};
async function openCamera() {
var _a, _b;
const trtcCloud = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud();
await (trtcCloud == null ? void 0 : trtcCloud.setLocalRenderParams({
mirrorType: basicStore.isLocalStreamMirror ? TUIRoomEngine.TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TUIRoomEngine.TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
rotation: TUIRoomEngine.TRTCVideoRotation.TRTCVideoRotation0,
fillMode: TUIRoomEngine.TRTCVideoFillMode.TRTCVideoFillMode_Fill
}));
await ((_b = roomEngine.instance) == null ? void 0 : _b.startCameraDeviceTest({
view: "stream-preview"
}));
}
async function closeCamera() {
var _a;
await ((_a = roomEngine.instance) == null ? void 0 : _a.stopCameraDeviceTest());
}
async function openAudio() {
var _a;
await ((_a = roomEngine.instance) == null ? void 0 : _a.startMicDeviceTest({ interval: 200 }));
}
async function closeAudio() {
var _a;
await ((_a = roomEngine.instance) == null ? void 0 : _a.stopMicDeviceTest());
}
async function toggleMuteAudio() {
isMicMuted.value = !isMicMuted.value;
tuiRoomParam.isOpenMicrophone = !isMicMuted.value;
if (isMicMuted.value) {
await closeAudio();
audioVolume.value = 0;
} else {
await openAudio();
}
}
async function toggleMuteVideo() {
isCameraMuted.value = !isCameraMuted.value;
tuiRoomParam.isOpenCamera = !isCameraMuted.value;
if (isCameraMuted.value) {
await closeCamera();
isCameraLoading.value = false;
} else {
isCameraLoading.value = true;
await openCamera();
isCameraLoading.value = false;
}
}
function getRoomParam() {
tuiRoomParam.defaultCameraId = roomStore.currentCameraId;
tuiRoomParam.defaultMicrophoneId = roomStore.currentMicrophoneId;
tuiRoomParam.defaultSpeakerId = roomStore.currentSpeakerId;
return tuiRoomParam;
}
const onUserVoiceVolume = (options) => {
audioVolume.value = options.volume;
};
async function startStreamPreview() {
if (!mediaAbility.isEnumerateDevicesSupported) {
return;
}
isCameraLoading.value = true;
await initMediaDeviceList();
if (!mediaAbility.isGetUserMediaSupported) {
isCameraLoading.value = false;
return;
}
if (roomStore.microphoneList && roomStore.microphoneList.length > 0) {
openAudio();
}
if (roomStore.cameraList && roomStore.cameraList.length > 0) {
await openCamera();
}
isCameraLoading.value = false;
}
const roomId = Vue.ref(props.givenRoomId);
Vue.watch(
() => props.givenRoomId,
(val) => {
roomId.value = val;
showEnterRoomAction.value = Boolean(val);
},
{ immediate: true }
);
const emit = __emit;
function handleCreateRoom() {
showCreateRoomItems.value = !showCreateRoomItems.value;
}
function handleClickOutsideCreateRoomItems() {
if (showCreateRoomItems.value) {
showCreateRoomItems.value = false;
}
}
function handleEnterRoom() {
showEnterRoomAction.value = true;
}
function createRoom(mode) {
const roomParam = getRoomParam();
emit("create-room", {
roomMode: mode,
roomParam,
isSeatEnabled: Boolean(mode === "SpeakAfterTakingSeat")
});
}
function enterRoom() {
if (!roomId.value) {
return;
}
const roomParam = getRoomParam();
emit("enter-room", {
roomId: String(roomId.value),
roomParam
});
}
TUIRoomEngine.once("ready", () => {
var _a;
startStreamPreview();
(_a = deviceManager.instance) == null ? void 0 : _a.on(
TUIRoomEngine.TUIRoomDeviceMangerEvents.onTestMicVolume,
onUserVoiceVolume
);
});
Vue.onBeforeUnmount(async () => {
var _a;
await closeAudio();
await closeCamera();
(_a = deviceManager.instance) == null ? void 0 : _a.off(
TUIRoomEngine.TUIRoomDeviceMangerEvents.onTestMicVolume,
onUserVoiceVolume
);
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createElementVNode("div", _hoisted_2, [
Vue.createElementVNode("div", _hoisted_3, [
Vue.createElementVNode("div", _hoisted_4, [
_hoisted_5,
Vue.createElementVNode("div", _hoisted_6, [
isCameraMuted.value ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_7, Vue.toDisplayString(Vue.unref(t)("Off Camera")), 1)) : Vue.createCommentVNode("", true),
isCameraLoading.value ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, {
key: 1,
icon: LoadingIcon.default,
class: "loading"
})) : Vue.createCommentVNode("", true)
])
]),
Vue.createElementVNode("div", _hoisted_8, [
Vue.createElementVNode("div", _hoisted_9, [
Vue.createVNode(AudioMediaControl.default, {
class: "media-control-item",
"has-more": true,
"is-muted": isMicMuted.value,
"audio-volume": audioVolume.value,
onClick: toggleMuteAudio
}, null, 8, ["is-muted", "audio-volume"]),
Vue.createVNode(VideoMediaControl.default, {
class: "media-control-item",
"has-more": true,
"is-muted": isCameraMuted.value,
onClick: toggleMuteVideo
}, null, 8, ["is-muted"])
]),
Vue.createElementVNode("div", _hoisted_10, [
Vue.createElementVNode("div", _hoisted_11, [
Vue.createVNode(Button.default, {
class: "button-item",
style: { "width": "170px" },
onClick: Vue.withModifiers(handleCreateRoom, ["stop"])
}, {
default: Vue.withCtx(() => [
Vue.createVNode(SvgIcon.default, { icon: CreateRoomIcon.default }),
Vue.createElementVNode("span", _hoisted_12, Vue.toDisplayString(Vue.unref(t)("New Room")), 1)
]),
_: 1
}),
showCreateRoomItems.value ? Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_13, [
Vue.createElementVNode("div", {
class: "create-room-item",
onClick: _cache[0] || (_cache[0] = ($event) => createRoom("SpeakAfterTakingSeat"))
}, [
Vue.createElementVNode("span", {
title: Vue.unref(t)("On-stage Speaking Room"),
class: "create-room-option"
}, Vue.toDisplayString(Vue.unref(t)("On-stage Speaking Room")), 9, _hoisted_14),
Vue.createVNode(SvgIcon.default, {
class: "create-room-icon",
icon: NextIcon.default
})
]),
Vue.createElementVNode("div", {
class: "create-room-item",
onClick: _cache[1] || (_cache[1] = ($event) => createRoom("FreeToSpeak"))
}, [
Vue.createElementVNode("span", {
title: Vue.unref(t)("Free Speech Room"),
class: "create-room-option"
}, Vue.toDisplayString(Vue.unref(t)("Free Speech Room")), 9, _hoisted_15),
Vue.createVNode(SvgIcon.default, {
class: "create-room-icon",
icon: NextIcon.default
})
])
])), [
[Vue.unref(vClickOutside.default), handleClickOutsideCreateRoomItems]
]) : Vue.createCommentVNode("", true)
]),
Vue.createElementVNode("div", _hoisted_16, [
!showEnterRoomAction.value ? (Vue.openBlock(), Vue.createBlock(Button.default, {
key: 0,
class: "button-item",
style: { "width": "170px" },
onClick: handleEnterRoom
}, {
default: Vue.withCtx(() => [
Vue.createVNode(SvgIcon.default, { icon: EnterRoomIcon.default }),
Vue.createElementVNode("span", _hoisted_17, Vue.toDisplayString(Vue.unref(t)("Join Room")), 1)
]),
_: 1
})) : Vue.createCommentVNode("", true),
showEnterRoomAction.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_18, [
Vue.withDirectives(Vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => roomId.value = $event),
class: "input",
placeholder: Vue.unref(t)("Enter room ID"),
onKeyup: Vue.withKeys(enterRoom, ["enter"])
}, null, 40, _hoisted_19), [
[Vue.vModelText, roomId.value]
]),
Vue.createElementVNode("div", {
class: Vue.normalizeClass([
"enter-button",
{ active: roomId.value && roomId.value.length > 0 }
]),
onClick: enterRoom
}, [
Vue.createVNode(SvgIcon.default, { icon: EnterRoomIcon.default })
], 2)
])) : Vue.createCommentVNode("", true)
]),
props.enableScheduledConference ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_20, [
Vue.createVNode(Button.default, {
class: "button-item",
style: { "width": "170px" },
onClick: scheduleConference
}, {
default: Vue.withCtx(() => [
Vue.createVNode(SvgIcon.default, { icon: ScheduleRoomIcon.default }),
Vue.createElementVNode("span", _hoisted_21, Vue.toDisplayString(Vue.unref(t)("Schedule")), 1)
]),
_: 1
})
])) : Vue.createCommentVNode("", true)
])
])
])
]),
Vue.createVNode(index.default, {
visible: scheduleConferenceDialogVisible.value,
"user-name": props.userName,
onInput: _cache[3] || (_cache[3] = ($event) => scheduleConferenceDialogVisible.value = $event)
}, null, 8, ["visible", "user-name"])
]);
};
}
});
exports.default = _sfc_main;