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,
119 lines (118 loc) • 4.09 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, nextTick } from "vue";
import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
import { useRoomStore } from "../../../../stores/room.mjs";
import { roomService } from "../../../../services/roomService.mjs";
import { StreamPlayQuality, StreamPlayMode } from "../../../../services/manager/mediaManager.mjs";
import { useBasicStore } from "../../../../stores/basic.mjs";
import { storeToRefs } from "pinia";
import { getNanoId } from "../../../../utils/utils.mjs";
const _hoisted_1 = ["id"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
streamInfo: {},
streamPlayQuality: { default: StreamPlayQuality.Default },
streamPlayMode: { default: StreamPlayMode.PLAY }
},
setup(__props) {
const mediaManager = roomService.getMediaManager();
const basicStore = useBasicStore();
const roomStore = useRoomStore();
const { defaultStreamType, streamInfoObj } = storeToRefs(roomStore);
const props = __props;
const playRegionDomRef = ref();
const nanoId = getNanoId(5);
const playRegionDomId = computed(
() => `${props.streamInfo.userId}_${props.streamInfo.streamType}_${nanoId}`
);
const isNeedPlayStream = computed(
() => props.streamPlayMode !== StreamPlayMode.STOP && props.streamInfo.hasVideoStream
);
const streamTypeToFetch = computed(() => {
const { streamType, userId } = props.streamInfo;
const { userId: localUserId } = basicStore;
if (streamType === TUIVideoStreamType.kScreenStream) {
return TUIVideoStreamType.kScreenStream;
}
if (props.streamPlayQuality === StreamPlayQuality.HIGH || userId === localUserId) {
return TUIVideoStreamType.kCameraStream;
}
if (props.streamPlayQuality === StreamPlayQuality.LOW) {
return TUIVideoStreamType.kCameraStreamLow;
}
return defaultStreamType.value;
});
async function startPlayVideo() {
if (!streamInfoObj.value[`${props.streamInfo.userId}_${props.streamInfo.streamType}`] || !playRegionDomRef.value) {
return;
}
await nextTick();
if (isNeedPlayStream.value) {
await mediaManager.startPlayVideo({
userId: props.streamInfo.userId,
streamType: streamTypeToFetch.value,
view: playRegionDomRef.value,
observerViewInVisible: props.streamPlayMode === StreamPlayMode.PLAY_IN_VISIBLE
});
}
}
async function stopPlayVideo() {
await mediaManager.stopPlayVideo({
userId: props.streamInfo.userId,
streamType: streamTypeToFetch.value,
view: playRegionDomRef.value
});
}
watch(
() => [
props.streamInfo.userId,
props.streamInfo.streamType,
isNeedPlayStream.value
],
async (val, oldVal) => {
const [oldUserId, oldStreamType] = oldVal;
if (oldUserId !== props.streamInfo.userId || oldStreamType !== props.streamInfo.streamType) {
mediaManager.stopPlayVideo({
userId: oldUserId,
streamType: oldStreamType,
view: playRegionDomRef.value
});
}
if (isNeedPlayStream.value) {
await startPlayVideo();
} else {
await stopPlayVideo();
}
}
);
watch(
() => streamTypeToFetch,
async () => {
if (isNeedPlayStream.value) {
await startPlayVideo();
}
}
);
onMounted(async () => {
if (isNeedPlayStream.value) {
await startPlayVideo();
}
});
onBeforeUnmount(async () => {
if (isNeedPlayStream.value) {
await stopPlayVideo();
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "playRegionDomRef",
ref: playRegionDomRef,
id: playRegionDomId.value,
class: "stream-play-container"
}, null, 8, _hoisted_1);
};
}
});
export {
_sfc_main as default
};