diff --git a/.gitea/workflows/deploy.yaml b/.gitea/workflows/deploy.yaml new file mode 100644 index 0000000..d6f10a7 --- /dev/null +++ b/.gitea/workflows/deploy.yaml @@ -0,0 +1,43 @@ +name: Deploy To Dev + +on: + push: + branches: + - 'dev' + +jobs: + deploy: + runs-on: gx-dev01 + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Copy specific directory to runner's host machine + run: | + TARGET_DIR="./dist" + + # 检查 dist 目录是否存在 + if [ ! -d "$TARGET_DIR" ]; then + echo "Error: The source directory '$TARGET_DIR' does not exist in the repository." + # 如果目录不存在，报错并退出当前步骤 + exit 1 + fi + cp -r ./dist/* /data/xsy-www/ + + - name: Find and restart the app container + run: | + # 1. 使用 docker ps 过滤包含 'xsy-lighttpd' 服务的容器 + # 2. 提取容器 ID 或名称 + CONTAINER_ID=$(docker ps -a --filter "name=xsy-lighttpd" --format "{{.ID}}") + + if [ -z "$CONTAINER_ID" ]; then + echo "Error: Could not find any container matching name 'app1'." + exit 1 + else + echo "Found container ID: $CONTAINER_ID. Restarting..." + # 使用标准的 docker restart 命令 + docker restart "$CONTAINER_ID" + echo "Container restarted successfully." + fi + diff --git a/dist.zip b/dist.zip index bf8d84c..3c3d146 100644 Binary files a/dist.zip and b/dist.zip differ diff --git a/src/layout/components/InviteJoin/index.vue b/src/layout/components/InviteJoin/index.vue index 63b1350..da3a220 100644 --- a/src/layout/components/InviteJoin/index.vue +++ b/src/layout/components/InviteJoin/index.vue @@ -83,8 +83,7 @@ const clickJoin = async () => { inviteDialog.value = false router.push({ path: '/conferencingRoom', - query:{ - type:2,//创建房间，加入房间 2 + query:{ room_uid:socketInformation.value.room_uid } }) diff --git a/src/views/conferencingRoom/components/fileUpload/browseFile.vue b/src/views/conferencingRoom/components/fileUpload/browseFile.vue index b6cd4af..d72a641 100644 --- a/src/views/conferencingRoom/components/fileUpload/browseFile.vue +++ b/src/views/conferencingRoom/components/fileUpload/browseFile.vue @@ -348,8 +348,7 @@ function handleFileUploadMessage(payload, topic){ try { const messageStr = payload.toString() const data = JSON.parse(messageStr) - // emitter.emit('fileUploadStatus') - console.log(data,'data文件转换完成，预览通知') + // emitter.emit('fileUploadStatus') const userId = JSON.parse(sessionStorage.getItem('userData'))?.uid if(dialogFileVisible.value){ dialogFileVisible.value = false @@ -422,7 +421,7 @@ function handlePdfMessage(payload, topic){ case 'converting': break case 'completed': - getConvertedFile(data.task_id) + getConvertedFile(data.task_id,data.room_uid) break case 'failed': break @@ -436,12 +435,12 @@ function handlePdfMessage(payload, topic){ } // 获取转换后的文件 -const getConvertedFile = async (taskId) => { +const getConvertedFile = async (taskId,roomId) => { try { if (!taskId) { throw new Error('任务ID不存在') } - const fileRes = await getConvertStatusApi(taskId,props.roomId) + const fileRes = await getConvertStatusApi(taskId,roomId) } catch (err) { console.error('获取转换文件失败:', err) handleError('获取转换文件失败', err) diff --git a/src/views/conferencingRoom/index.vue b/src/views/conferencingRoom/index.vue index ae2c507..7c4c201 100644 --- a/src/views/conferencingRoom/index.vue +++ b/src/views/conferencingRoom/index.vue @@ -457,6 +457,7 @@ const loading = ref(false); let lastPublishTime = 0; const publishThrottleTime = 100; // 100ms 节流 + // 鼠标状态跟踪 const mouseState = reactive({ isDrawing: false, @@ -1148,8 +1149,9 @@ async function initMqttFilePreview(){ const clientId = `filePreview_${Date.now()}` await mqttClient.connect(clientId) isMqttFilePreview.value = true - // 订阅主题 + // 订阅主题 emitter.emit('subscribeToFilePreviewTopic',{roomId:roomId.value}) + emitter.emit('roomces',{roomId:roomId.value}) } catch (error) { console.error('MQTT连接失败:', error) ElMessage.error('文件上传服务连接失败') @@ -1903,11 +1905,8 @@ function handleRemoteWhiteboardOpen(data) { // 处理远程关闭白板 function handleRemoteWhiteboardClose(data) { - ElMessage.info(`${data.senderName || data.sender} 关闭了白板`); - // if(data.roomType == '1'){ - // isWhiteboardActive.value = false; - // } - //当远程用户关闭白板时，如果本地有屏幕共享，确保屏幕共享重新显示 + ElMessage.info(`${data.senderName || data.sender} 关闭了白板`); + //当远程用户关闭白板时，如果本地有屏幕共享，确保屏幕共享重新显示 nextTick(() => { if (hasActiveScreenShare.value && !isWhiteboardActive.value) { activateLayer('screenVideo',false); @@ -1952,8 +1951,7 @@ async function handleConfirmSelection(userInfo){ function publishWhiteboardMessage(type, payload = {}) { try { const message = { - type, - roomType: route.query.type,//用于判断是参与者还是发起者 + type, roomId: roomId.value, sender: hostUid.value, senderName: hostUid.value, @@ -2115,22 +2113,34 @@ function setupRoomListeners() { } // 事件处理函数 +/** + * 处理房间连接成功事件 + * 1. 初始化房间ID + * 2. 初始化各种MQTT连接（白板、激光笔、文件上传等） + * 3. 更新连接状态 + * 4. 初始化已存在的远程参与者 + */ async function handleConnected() { + // 设置当前房间ID roomId.value = room.name - await initMqtt(); - await initToLaserPointerMqtt(); - await initMqttFileUploadSucc() ; - await initMqttFileConversionStatus(); - await initMqttFilePreview(); - await initMqttEnlargeVideo(); + + // 初始化各种MQTT服务 + await initMqtt(); // 白板MQTT + await initToLaserPointerMqtt(); // 激光笔MQTT + await initMqttFileUploadSucc(); // 文件上传成功MQTT + await initMqttFileConversionStatus(); // 文件转换状态MQTT + await initMqttFilePreview(); // 文件预览MQTT + await initMqttEnlargeVideo(); // 视频放大MQTT + + // 更新连接状态 status.value = false; ElMessage.success('已成功连接到房间'); - // 初始化现有远程参与者 + + // 初始化已存在的远程参与者 room.remoteParticipants.forEach(participant => { - addRemoteParticipant(participant); - setupParticipantListeners(participant); - // 立即检查并更新参与者的轨道状态 - updateParticipantTracks(participant); + addRemoteParticipant(participant); // 添加参与者 + setupParticipantListeners(participant); // 设置监听器 + updateParticipantTracks(participant); // 更新轨道状态 }); } @@ -2838,35 +2848,7 @@ function handleScreenShareEnded() { ElMessage.info('屏幕共享已停止'); // 移除事件监听器 room.localParticipant.off('screenShareEnded', handleScreenShareEnded); -} - -async function joinRoomBtn() { - try { - loading.value = true; // 开始加载 - status.value = true; // 确保显示加载状态 - - const res = await getRoomToken({max_participants: 20}); - if(res.meta.code != 200){ - ElMessage.error(res.meta.message); - loading.value = false; - return; - } - const token = res.data.access_token; - roomName.value = res.data.room.name - if (!token) { - throw new Error('获取 token 失败'); - } - setupRoomListeners(); - await room.connect(wsURL, token, { - autoSubscribe: true, - }); - } catch (error) { - ElMessage.error(`连接失败: ${error.message}`); - status.value = true; - } finally { - loading.value = false; // 无论成功失败都结束加载 - } -} +} // 离开会议函数 async function leaveRoom() { @@ -3105,19 +3087,15 @@ onUnmounted(() => { } }); onMounted(async () => { - if(route.query.type == '1'){ - await joinRoomBtn() - hostUid.value = roomStore.userUid - // 邀请用户参与房间 - if(room.name){ - await getInvite(room.name,{participants:[{user_uid:roomStore.detailUid,display_name:roomStore.detailName}], participant_role: "participant"}) - } - } else { + try { + loading.value = true; // 开始加载 + status.value = true; // 确保显示加载状态 const res = await getTokenApi(route.query.room_uid) if(res.meta.code == 200){ const token = res.data.access_token; hostUid.value = res.data.user_uid - await nextTick(); + roomName.value = res.data.room_name + await nextTick(); setupRoomListeners(); await room.connect(wsURL, token, { autoSubscribe: true, @@ -3125,7 +3103,12 @@ onMounted(async () => { }else{ ElMessage.error(res.meta.message); return; - } + } + } catch (error) { + ElMessage.error(`连接失败: ${error.message}`); + status.value = true; + } finally { + loading.value = false; // 无论成功失败都结束加载 } }); diff --git a/src/views/conferencingRoom/pathTransit.vue b/src/views/conferencingRoom/pathTransit.vue index 6bb0774..c277b17 100644 --- a/src/views/conferencingRoom/pathTransit.vue +++ b/src/views/conferencingRoom/pathTransit.vue @@ -42,7 +42,7 @@
-
+
+ + 他人共享中 共享屏幕 + + {{ isWhiteboardActive ? '退出白板' : '共享白板' }} - + { + return hasScreenShareOrEnlarged.value || isWhiteboardActive.value; +}); + +// 是否有桌面共享或放大视频 +const hasScreenShareOrEnlarged = computed(() => { + return hasActiveScreenShare.value || enlargedParticipant.value; +}); + +// 判断各图层是否为顶层 +const isScreenVideoTopLayer = computed(() => { + return hasScreenShareOrEnlarged.value && lastActivatedLayer.value === 'screenVideo'; +}); + +const isWhiteboardTopLayer = computed(() => { + return isWhiteboardActive.value && lastActivatedLayer.value === 'whiteboard'; +}); + +// 当前顶层标题 +const currentTopLayerTitle = computed(() => { + if (hasScreenShareOrEnlarged.value && isScreenVideoTopLayer.value) { + if (enlargedParticipant.value) { + if (enlargedParticipant.value.identity === hostUid.value) { + return '我的放大视频'; + } else { + return `放大视图 - ${enlargedParticipant.value.identity}`; + } + } else { + return '共享屏幕'; + } + } else if (isWhiteboardActive.value && isWhiteboardTopLayer.value) { + return '共享白板'; + } else { + // 默认显示第一个活动的内容 + if (hasScreenShareOrEnlarged.value) { + if (enlargedParticipant.value) return '放大视频'; + return '共享屏幕'; + } + if (isWhiteboardActive.value) return '共享白板'; + return '共享内容'; + } +}); + + + const participantCount = computed(() => { return remoteParticipants.value.size + 1; // 包括自己 }); @@ -508,7 +571,8 @@ const canScreenShare = computed(() => { // 是否允许白板共享 const canWhiteboardShare = computed(() => { - return !enlargedParticipant.value; +// return !enlargedParticipant.value; + return true; // 白板现在完全独立，没有限制 }); // 添加一个计算属性来显示屏幕共享状态提示 @@ -556,6 +620,38 @@ const room = new Room({ emitter.on('whiteboardFailed',whiteboardFailedHandle); +// 激活图层函数 +function activateLayer(layerType, isLocalAction = true) { + const oldLayer = lastActivatedLayer.value; + lastActivatedLayer.value = layerType; + // 如果是本地操作，通过MQTT通知其他用户 + if (isLocalAction) { + publishLayerActivation(layerType); + } +} +// 发布图层激活消息 +function publishLayerActivation(layerType) { + try { + const message = { + type: WHITEBOARD_MESSAGE_TYPES.ACTIVATE_LAYER, + roomId: roomId.value, + sender: hostUid.value, + senderName: hostUid.value, + timestamp: Date.now(), + payload: { + layerType: layerType, + hasScreenShare: hasActiveScreenShare.value, + hasEnlargedVideo: !!enlargedParticipant.value, + hasWhiteboard: isWhiteboardActive.value + } + }; + + mqttClient.publish(`xSynergy/shareWhiteboard/${room.name}`, message); + } catch (error) { + console.error('发布图层激活消息失败:', error); + } +} + /** 登录成功回调 */ function handleLoginSuccess() { showLogin.value = false; @@ -589,10 +685,10 @@ function enlargeParticipant(participant) { ElMessage.info('已自动停止屏幕共享，开启视频放大模式'); } // 如果正在使用白板，自动退出 - if (isWhiteboardActive.value) { - exitWhiteboard(); - ElMessage.info('已自动退出白板，开启视频放大模式'); - } + // if (isWhiteboardActive.value) { + // exitWhiteboard(); + // ElMessage.info('已自动退出白板，开启视频放大模式'); + // } // 如果正在放大其他用户，先关闭 if (enlargedParticipant.value && enlargedParticipant.value.identity !== hostUid.value) { @@ -600,6 +696,7 @@ function enlargeParticipant(participant) { } enlargedParticipant.value = participant; + activateLayer('screenVideo', true); // 激活屏幕视频图层 ElMessage.success(`已放大您的视频`); // 发布放大消息给其他用户 @@ -1053,7 +1150,9 @@ async function initMqttFilePreview(){ await mqttClient.connect(clientId) isMqttFilePreview.value = true // 订阅主题 + console.log('执行了一次') emitter.emit('subscribeToFilePreviewTopic',{roomId:roomId.value}) + emitter.emit('roomces',{roomId:roomId.value}) } catch (error) { console.error('MQTT连接失败:', error) ElMessage.error('文件上传服务连接失败') @@ -1762,6 +1861,9 @@ function handleWhiteboardMessage(payload, topic) { case WHITEBOARD_MESSAGE_TYPES.SYNC: handleWhiteboardSync(data); break; + case WHITEBOARD_MESSAGE_TYPES.ACTIVATE_LAYER: + handleRemoteLayerActivation(data); + break; default: console.warn('未知的白板消息类型:', data.type); } @@ -1770,19 +1872,36 @@ function handleWhiteboardMessage(payload, topic) { } } +// 处理远程图层激活 +function handleRemoteLayerActivation(data) { + const { layerType, hasScreenShare, hasEnlargedVideo, hasWhiteboard } = data.payload; + // 根据远程状态更新本地图层激活 + if (layerType === 'screenVideo' && (hasScreenShare || hasEnlargedVideo)) { + // 只有当远程用户确实有屏幕共享或放大视频时才激活 + activateLayer('screenVideo', false); + // console.log('远程激活屏幕视频层'); + } else if (layerType === 'whiteboard' && hasWhiteboard) { + // 只有当远程用户确实有白板时才激活 + activateLayer('whiteboard', false); + // console.log('远程激活白板层'); + } +} + // 处理远程打开白板 function handleRemoteWhiteboardOpen(data) { ElMessage.info(`${data.senderName || data.sender} 开启了白板`); isWhiteboardActive.value = true; + // 当远程用户开启白板时，激活白板图层 + activateLayer('whiteboard', false); // 如果正在屏幕共享，自动停止 - if (isScreenSharing.value) { - room.localParticipant.setScreenShareEnabled(false); - isScreenSharing.value = false; - } + // if (isScreenSharing.value) { + // room.localParticipant.setScreenShareEnabled(false); + // isScreenSharing.value = false; + // } // 如果正在放大视图，自动关闭 - if (enlargedParticipant.value) { - closeEnlargedView(); - } + // if (enlargedParticipant.value) { + // closeEnlargedView(); + // } } // 处理远程关闭白板 @@ -1791,6 +1910,17 @@ function handleRemoteWhiteboardClose(data) { // if(data.roomType == '1'){ // isWhiteboardActive.value = false; // } + //当远程用户关闭白板时，如果本地有屏幕共享，确保屏幕共享重新显示 + nextTick(() => { + if (hasActiveScreenShare.value && !isWhiteboardActive.value) { + activateLayer('screenVideo',false); + + // 确保屏幕共享视频元素重新附加轨道 + if (activeScreenShareTrack.value && screenShareVideo.value) { + attachTrackToVideo(screenShareVideo.value, activeScreenShareTrack.value); + } + } + }); } // 处理白板同步消息 @@ -1814,9 +1944,12 @@ async function handleConfirmSelection(userInfo){ if(userInfo.length < 0){ ElMessage.error('请选择加入房间的人员') return - } - const joinUserIds = userInfo.map(item => item.uid) - await getInvite(room.name,{user_uids:joinUserIds, participant_role: "participant"}) + } + const joinUserInfo = userInfo.map(item => ({ + user_uid: item.uid, + display_name: item.name + })); + await getInvite(room.name,{participants:joinUserInfo, participant_role: "participant"}) } function publishWhiteboardMessage(type, payload = {}) { @@ -1851,10 +1984,10 @@ async function toggleWhiteboard() { // } // roomId.value = room.name - if (isWhiteboardActive.value) { + if (isWhiteboardActive.value) { // 如果白板已经激活，点击则退出白板 await exitWhiteboard(); - } else { + } else { // 否则开启白板 await startWhiteboard(); } @@ -1863,18 +1996,19 @@ async function toggleWhiteboard() { async function startWhiteboard() { try { // 如果正在屏幕共享，先停止 - if (isScreenSharing.value) { - await room.localParticipant.setScreenShareEnabled(false); - isScreenSharing.value = false; - ElMessage.info('已停止屏幕共享，开启白板'); - } + // if (isScreenSharing.value) { + // await room.localParticipant.setScreenShareEnabled(false); + // isScreenSharing.value = false; + // ElMessage.info('已停止屏幕共享，开启白板'); + // } // 如果正在放大视图，先关闭 - if (enlargedParticipant.value) { - closeEnlargedView(); - } + // if (enlargedParticipant.value) { + // closeEnlargedView(); + // } // 激活白板状态 isWhiteboardActive.value = true; + activateLayer('whiteboard', true); // 激活白板图层 const success = publishWhiteboardMessage(WHITEBOARD_MESSAGE_TYPES.OPEN, { action: 'open', whiteboardId: roomId.value, @@ -1905,6 +2039,10 @@ async function exitWhiteboard() { if (whiteboardRef.value && whiteboardRef.value.cleanup) { whiteboardRef.value.cleanup(); } + // 如果关闭的是当前顶层，且还有屏幕共享或放大视频，则激活屏幕视频层 + if (lastActivatedLayer.value === 'whiteboard' && hasScreenShareOrEnlarged.value) { + activateLayer('screenVideo',false); + } ElMessage.success('已退出白板'); } catch (error) { if (error !== 'cancel') { @@ -1980,22 +2118,34 @@ function setupRoomListeners() { } // 事件处理函数 +/** + * 处理房间连接成功事件 + * 1. 初始化房间ID + * 2. 初始化各种MQTT连接（白板、激光笔、文件上传等） + * 3. 更新连接状态 + * 4. 初始化已存在的远程参与者 + */ async function handleConnected() { + // 设置当前房间ID roomId.value = room.name - await initMqtt(); - await initToLaserPointerMqtt(); - await initMqttFileUploadSucc() ; - await initMqttFileConversionStatus(); - await initMqttFilePreview(); - await initMqttEnlargeVideo(); + + // 初始化各种MQTT服务 + await initMqtt(); // 白板MQTT + await initToLaserPointerMqtt(); // 激光笔MQTT + await initMqttFileUploadSucc(); // 文件上传成功MQTT + await initMqttFileConversionStatus(); // 文件转换状态MQTT + await initMqttFilePreview(); // 文件预览MQTT + await initMqttEnlargeVideo(); // 视频放大MQTT + + // 更新连接状态 status.value = false; ElMessage.success('已成功连接到房间'); - // 初始化现有远程参与者 + + // 初始化已存在的远程参与者 room.remoteParticipants.forEach(participant => { - addRemoteParticipant(participant); - setupParticipantListeners(participant); - // 立即检查并更新参与者的轨道状态 - updateParticipantTracks(participant); + addRemoteParticipant(participant); // 添加参与者 + setupParticipantListeners(participant); // 设置监听器 + updateParticipantTracks(participant); // 更新轨道状态 }); } @@ -2026,6 +2176,10 @@ function handleTrackSubscribed(track, publication, participant) { // 设置全局屏幕共享用户 globalScreenSharingUser.value = participant.identity; isGlobalScreenSharing.value = true; + // 如果是远程用户的屏幕共享，激活屏幕视频层 + if (participant.identity !== hostUid.value) { + activateLayer('screenVideo', false); + } } // 立即附加到视频元素（如果元素已存在） @@ -2135,7 +2289,7 @@ function handleLocalTrackUnpublished(publication) { if (screenSharingUser.value === room.localParticipant.identity) { isScreenSharing.value = false; screenSharingUser.value = ''; - activeScreenShareTrack.value = null; + activeScreenShareTrack.value = null; // 清除全局屏幕共享状态 if (globalScreenSharingUser.value === room.localParticipant.identity) { globalScreenSharingUser.value = ''; @@ -2208,6 +2362,10 @@ function updateScreenShareState(participant, track) { // 有新的屏幕共享轨道 screenSharingUser.value = participant.identity; activeScreenShareTrack.value = track; + // 重要：确保屏幕共享层被激活（如果白板已关闭） + if (!isWhiteboardActive.value) { + activateLayer('screenVideo',false); + } // 附加到屏幕共享视频元素 if (screenShareVideo.value) { attachTrackToVideo(screenShareVideo.value, track); @@ -2658,10 +2816,10 @@ async function toggleScreenShare() { ElMessage.error('当前处于视频放大模式，无法进行屏幕共享'); return; } - if(isWhiteboardActive.value){ - ElMessage.error('请先关闭白板'); - return; - } + // if(isWhiteboardActive.value){ + // ElMessage.error('请先关闭白板'); + // return; + // } // 检查是否已经有其他用户在共享屏幕 if (!isScreenSharing.value && isGlobalScreenSharing.value && globalScreenSharingUser.value !== hostUid.value) { ElMessage.error(`当前 ${globalScreenSharingUser.value} 正在共享屏幕，请等待其结束后再共享`); @@ -2682,6 +2840,7 @@ async function toggleScreenShare() { // 设置全局屏幕共享状态 globalScreenSharingUser.value = hostUid.value; isGlobalScreenSharing.value = true; + activateLayer('screenVideo', true);// 激活屏幕视频图层 ElMessage.success('屏幕共享已开始'); } } catch (error) { @@ -2694,29 +2853,7 @@ function handleScreenShareEnded() { ElMessage.info('屏幕共享已停止'); // 移除事件监听器 room.localParticipant.off('screenShareEnded', handleScreenShareEnded); -} - -async function joinRoomBtn() { - try { - const res = await getRoomToken({max_participants: 20}); - if(res.meta.code != 200){ - ElMessage.error(res.meta.message); - return; - } - const token = res.data.access_token; - roomName.value = res.data.room.name - if (!token) { - throw new Error('获取 token 失败'); - } - setupRoomListeners(); - await room.connect(wsURL, token, { - autoSubscribe: true, - }); - } catch (error) { - ElMessage.error(`连接失败: ${error.message}`); - status.value = true; - } -} +} // 离开会议函数 async function leaveRoom() { @@ -2854,7 +2991,7 @@ watch([() => hasActiveScreenShare.value, () => isScreenSharing.value], ([newHasA }, { immediate: true }); // 在摄像头关闭时，如果正在放大自己的视频，自动关闭放大视图 -watch(cameraEnabled, (newVal) => { +watch(cameraEnabled, (newVal) => { if (!newVal) { // 摄像头关闭时，如果正在放大自己的视频，自动关闭 if (enlargedParticipant.value && enlargedParticipant.value.identity === hostUid.value) { @@ -2891,7 +3028,7 @@ watch(isLaserPointerActive, (newVal) => { }); // 监听放大视频状态变化，初始化激光笔 -watch(enlargedParticipant, (newVal) => { +watch(enlargedParticipant, (newVal) => { if (newVal && isLaserPointerActive.value) { nextTick(() => { initEnlargedLaserPointerCanvas(); @@ -2900,6 +3037,30 @@ watch(enlargedParticipant, (newVal) => { cleanupEnlargedLaserPointer(); } }); + +// 监听屏幕共享或放大视频状态变化 +watch(hasScreenShareOrEnlarged, (newVal) => { + if (newVal && !lastActivatedLayer.value) { + // 如果首次有屏幕共享或放大视频，且没有激活图层，则激活 + activateLayer('screenVideo',false); + } else if (!newVal && lastActivatedLayer.value === 'screenVideo') { + // 如果屏幕视频层关闭且当前激活的是它，则检查是否有白板 + if (isWhiteboardActive.value) { + activateLayer('whiteboard',false); + } else { + lastActivatedLayer.value = ''; + } + } +}); + +// 监听白板状态变化 +watch(isWhiteboardActive, (newVal) => { + if (newVal && !lastActivatedLayer.value) { + // 如果首次有白板，且没有激活图层，则激活 + activateLayer('whiteboard',false); + } +}); + // 添加专门的关闭激光笔函数 function closeLaserPointer() { isLaserPointerActive.value = false; @@ -2914,6 +3075,34 @@ function closeLaserPointer() { ElMessage.info('屏幕共享已结束，激光笔已自动关闭'); } +async function joinRoomBtn() { + try { + loading.value = true; // 开始加载 + status.value = true; // 确保显示加载状态 + + const res = await getRoomToken({max_participants: 20}); + if(res.meta.code != 200){ + ElMessage.error(res.meta.message); + loading.value = false; + return; + } + const token = res.data.access_token; + roomName.value = res.data.room.name + if (!token) { + throw new Error('获取 token 失败'); + } + setupRoomListeners(); + await room.connect(wsURL, token, { + autoSubscribe: true, + }); + } catch (error) { + ElMessage.error(`连接失败: ${error.message}`); + status.value = true; + } finally { + loading.value = false; // 无论成功失败都结束加载 + } +} + // 在组件卸载时也清理资源 onUnmounted(() => { window.removeEventListener('resize', resizeLaserPointerCanvas); @@ -2931,32 +3120,155 @@ onUnmounted(() => { } }); onMounted(async () => { - if(route.query.type == '1'){ - await joinRoomBtn() - hostUid.value = roomStore.userUid - // 邀请用户参与房间 - if(room.name){ - await getInvite(room.name,{user_uids:[roomStore.detailUid], participant_role: "participant"}) - } - } else { - const res = await getTokenApi(route.query.room_uid) - if(res.meta.code == 200){ - const token = res.data.access_token; - hostUid.value = res.data.user_uid - await nextTick(); - setupRoomListeners(); - await room.connect(wsURL, token, { - autoSubscribe: true, - }); - }else{ - ElMessage.error(res.meta.message); - return; - } - } + + const res = await getTokenApi(route.query.room_uid) + console.log(res,'res++--++') + if(res.meta.code == 200){ + const token = res.data.access_token; + hostUid.value = res.data.user_uid + await nextTick(); + setupRoomListeners(); + await room.connect(wsURL, token, { + autoSubscribe: true, + }); + }else{ + ElMessage.error(res.meta.message); + return; + } + + // if(route.query.type == '1'){ + // await joinRoomBtn() + // hostUid.value = roomStore.userUid + + // } else { + // const res = await getTokenApi(route.query.room_uid) + // if(res.meta.code == 200){ + // const token = res.data.access_token; + // hostUid.value = res.data.user_uid + // await nextTick(); + // setupRoomListeners(); + // await room.connect(wsURL, token, { + // autoSubscribe: true, + // }); + // }else{ + // ElMessage.error(res.meta.message); + // return; + // } + // } }); \ No newline at end of file + diff --git a/src/views/conferencingRoom/transit.vue b/src/views/conferencingRoom/transit.vue index 664ca84..294fd44 100644 --- a/src/views/conferencingRoom/transit.vue +++ b/src/views/conferencingRoom/transit.vue @@ -53,7 +53,6 @@ @mousemove="handleEnlargedCanvasMouseMove" @mouseup="handleEnlargedCanvasMouseUp" @mouseleave="handleEnlargedCanvasMouseLeave" - style='border:1px solid red' >