@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,
286 lines (285 loc) • 11.1 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const pinia = require("pinia");
const index$2 = require("../../common/base/Dialog/index.js");
const IconButton = require("../../common/base/IconButton.vue.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const useRoomEngine = require("../../../hooks/useRoomEngine.js");
const room = require("../../../stores/room.js");
const basic = require("../../../stores/basic.js");
const index$1 = require("../../../utils/common/logger/index.js");
const message = require("../../../constants/message.js");
const index = require("../../../locales/index.js");
const useMitt = require("../../../hooks/useMitt.js");
const mediaAbility = require("../../../utils/mediaAbility.js");
require("../../../services/main.js");
const roomService = require("../../../services/roomService.js");
require("../../../utils/environment.js");
require("mitt");
require("../../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const _hoisted_1 = {
key: 0,
class: "screen-share-control-container"
};
const logPrefix = "[ScreenShareControl]";
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "Index",
setup(__props) {
const roomEngine = useRoomEngine.default();
const screenShareConfig = roomService.roomService.getComponentConfig("ScreenShare");
const roomStore = room.useRoomStore();
const basicStore = basic.useBasicStore();
const {
isAnchor,
isAudience,
remoteScreenStream,
isGeneralUser,
isScreenShareDisableForAllUser
} = pinia.storeToRefs(roomStore);
const { isShowScreenShareAntiFraud } = pinia.storeToRefs(basicStore);
const { t } = index.useI18n();
const btnStopRef = Vue.ref();
const isSharing = Vue.ref(false);
const dialogVisible = Vue.ref(false);
const isShowFraudDialog = Vue.ref(false);
const screenShareDisabled = Vue.computed(() => isAudience.value);
const title = Vue.computed(
() => isSharing.value ? t("End sharing") : t("Share screen")
);
Vue.watch(isAnchor, (val, oldVal) => {
if (!oldVal && val && isSharing.value) {
stopScreenShare();
}
});
async function toggleScreenShare() {
if (isSharing.value) {
dialogVisible.value = true;
return;
}
if (isAudience.value) {
uikitBaseComponentVue3.TUIToast({
type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
message: t(
"You currently do not have sharing permission, please raise your hand to apply for sharing permission first"
),
duration: message.MESSAGE_DURATION.LONG
});
return;
}
if (remoteScreenStream.value) {
uikitBaseComponentVue3.TUIToast({
type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
message: t("Another user is sharing the screen."),
duration: message.MESSAGE_DURATION.LONG
});
return;
}
if (!mediaAbility.isScreenShareSupported) {
uikitBaseComponentVue3.TUIToast({
type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
message: t("The current browser does not support screen sharing"),
duration: message.MESSAGE_DURATION.LONG
});
return;
}
if (isGeneralUser.value && isScreenShareDisableForAllUser.value) {
uikitBaseComponentVue3.TUIToast({
type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
message: t(
"Failed to initiate screen sharing, currently only host/admin can share screen."
),
duration: message.MESSAGE_DURATION.LONG
});
return;
}
if (!isShowScreenShareAntiFraud.value) {
await startScreenShare();
return;
}
isShowFraudDialog.value = true;
roomService.roomService.trackingManager.sendMessage("experience-screen-share");
}
function cancelStop() {
dialogVisible.value = false;
}
async function startScreenShare() {
var _a;
isShowFraudDialog.value = false;
try {
await ((_a = roomEngine.instance) == null ? void 0 : _a.startScreenSharing());
isSharing.value = true;
} catch (error) {
index$1.default.error(
`${logPrefix}startScreenShare error:`,
error.name,
error.message,
error.code
);
let message$1 = "";
switch (error.name) {
case "NotReadableError":
message$1 = t(
"The system prohibits the current browser from accessing the screen content, please enable the screen sharing privilege."
);
break;
case "NotAllowedError":
if (error.message.includes("Permission denied by system")) {
message$1 = t(
"The system prohibits the current browser from accessing the screen content, please enable the screen sharing privilege."
);
} else {
message$1 = t("User canceled screen sharing");
}
break;
default:
message$1 = t(
"An unknown error occurred while screen sharing, please try again."
);
break;
}
uikitBaseComponentVue3.TUIToast({
type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
message: message$1,
duration: message.MESSAGE_DURATION.LONG
});
}
}
async function stopScreenShare() {
var _a;
if (isSharing.value) {
try {
await ((_a = roomEngine.instance) == null ? void 0 : _a.stopScreenSharing());
dialogVisible.value = false;
isSharing.value = false;
} catch (error) {
index$1.default.error(`${logPrefix}stopScreenShare error:`, error);
}
}
}
function screenCaptureStopped() {
isSharing.value = false;
}
useMitt.default.on("ScreenShare:stopScreenShare", stopScreenShare);
TUIRoomEngine.once("ready", () => {
var _a;
(_a = roomEngine.instance) == null ? void 0 : _a.on(
TUIRoomEngine.TUIRoomEvents.onUserScreenCaptureStopped,
screenCaptureStopped
);
});
Vue.onUnmounted(() => {
var _a;
useMitt.default.off("ScreenShare:stopScreenShare", stopScreenShare);
(_a = roomEngine.instance) == null ? void 0 : _a.off(
TUIRoomEngine.TUIRoomEvents.onUserScreenCaptureStopped,
screenCaptureStopped
);
});
return (_ctx, _cache) => {
return Vue.unref(screenShareConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createVNode(IconButton.default, {
ref_key: "btnStopRef",
ref: btnStopRef,
"is-active": isSharing.value,
disabled: screenShareDisabled.value,
title: title.value,
"is-not-support": !Vue.unref(mediaAbility.isScreenShareSupported),
onClickIcon: toggleScreenShare
}, {
default: Vue.withCtx(() => [
isSharing.value ? (Vue.openBlock(), Vue.createBlock(Vue.unref(uikitBaseComponentVue3.IconStopScreenShare), {
key: 0,
size: "24"
})) : (Vue.openBlock(), Vue.createBlock(Vue.unref(uikitBaseComponentVue3.IconScreenShare), {
key: 1,
size: "24"
}))
]),
_: 1
}, 8, ["is-active", "disabled", "title", "is-not-support"]),
Vue.createVNode(Vue.unref(index$2.default), {
modelValue: isShowFraudDialog.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isShowFraudDialog.value = $event),
width: "420px",
title: Vue.unref(t)("Safety Reminder"),
modal: true,
"append-to-room-container": true
}, {
footer: Vue.withCtx(() => [
Vue.createElementVNode("span", null, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: startScreenShare,
type: "primary",
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Continue sharing")), 1)
]),
_: 1
}),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: _cache[0] || (_cache[0] = ($event) => isShowFraudDialog.value = false),
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
]),
_: 1
})
])
]),
default: Vue.withCtx(() => [
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)(
"Sharing screens may lead to the leakage of private information such as SMS verification codes and passwords, resulting in financial losses. Please be vigilant against various forms of fraud."
)), 1)
]),
_: 1
}, 8, ["modelValue", "title"]),
Vue.createVNode(Vue.unref(index$2.default), {
modelValue: dialogVisible.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => dialogVisible.value = $event),
width: "420px",
title: Vue.unref(t)("End sharing"),
modal: true,
"before-close": cancelStop,
"append-to-room-container": true
}, {
footer: Vue.withCtx(() => [
Vue.createElementVNode("span", null, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: stopScreenShare,
type: "primary",
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("End sharing")), 1)
]),
_: 1
}),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
class: "button",
onClick: cancelStop,
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
]),
_: 1
})
])
]),
default: Vue.withCtx(() => [
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)(
"Others will no longer see your screen after you stop sharing. Are you sure you want to stop?"
)), 1)
]),
_: 1
}, 8, ["modelValue", "title"])
])) : Vue.createCommentVNode("", true);
};
}
});
exports.default = _sfc_main;