wangys/urbanLifeline

Fork 0

Files

wangys 55801fa0ec 暂存

2025-12-27 15:36:40 +08:00

13 KiB

Raw Blame History

Jitsi 会议独立页面实现方案

问题背景

Web端问题：ChatRoom 弹窗关闭按钮不应该触发 endMeeting，只有在 Jitsi iframe 中点击"结束会议"才应该结束会议
主持人问题：主持人应该是数据库中的会议创建人，而不是第一个进入会议的人
小程序问题：无法捕捉结束会议事件

解决方案

1. 后端修改（已完成）

1.1 新增路由配置 (`initDataPermission.sql`)

-- Jitsi视频会议独立页面（支持URL参数token认证，用于小程序和外部链接访问）
('VIEW-W003', 'view_workcase_jitsi_meeting', 'Jitsi视频会议', NULL, '/meeting/:meetingId', 
 'public/Meeting/JitsiMeetingView.vue', 'Video', 1, 
 'route', NULL, 'workcase', 'BlankLayout', 25, 
 'Jitsi视频会议独立页面，支持token参数认证', 'system', now(), false);

1.2 新增 API 接口

接口	方法	说明
`/meeting/{meetingId}/entry?token=xxx`	GET	会议入口（支持URL参数token认证）
`/meeting/{meetingId}/share-url`	GET	生成会议分享URL

1.3 Gateway 白名单

whitelist:
  - /urban-lifeline/workcase/meeting/*/entry

1.4 主持人逻辑

主持人判断逻辑已正确实现：userId.equals(meeting.getCreator())

2. 前端实现（需要在前端仓库实现）

2.1 创建 `JitsiMeetingView.vue`

路径：src/views/public/Meeting/JitsiMeetingView.vue

<template>
  <div class="jitsi-meeting-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <p>正在加载会议...</p>
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <h2>无法加入会议</h2>
      <p>{{ error }}</p>
      <button @click="retry">重试</button>
    </div>
    
    <!-- Jitsi 会议容器 -->
    <div v-else id="jitsi-container" ref="jitsiContainer"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getMeetingEntry, endMeeting } from '@/api/meeting'
import { useUserStore } from '@/stores/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const loading = ref(true)
const error = ref(null)
const jitsiApi = ref(null)
const meetingInfo = ref(null)

// 获取会议信息
const fetchMeetingInfo = async () => {
  loading.value = true
  error.value = null
  
  try {
    const meetingId = route.params.meetingId
    // 优先从URL参数获取token，其次从store获取
    const token = route.query.token || userStore.token
    
    if (!token) {
      // 如果没有token，尝试从localStorage恢复登录状态
      await tryRestoreLogin()
    }
    
    const response = await getMeetingEntry(meetingId, token)
    if (response.success) {
      meetingInfo.value = response.data
      initJitsi()
    } else {
      error.value = response.message
    }
  } catch (e) {
    error.value = e.message || '加载会议失败'
  } finally {
    loading.value = false
  }
}

// 尝试从token恢复登录状态
const tryRestoreLogin = async () => {
  const token = route.query.token
  if (token) {
    try {
      // 调用refresh接口验证token并获取用户信息
      const response = await refreshToken(token)
      if (response.success) {
        userStore.setLoginInfo(response.data)
      }
    } catch (e) {
      console.error('恢复登录状态失败:', e)
    }
  }
}

// 初始化 Jitsi Meet
const initJitsi = () => {
  if (!meetingInfo.value?.iframeUrl) {
    error.value = '会议URL无效'
    return
  }
  
  // 解析iframe URL获取配置
  const url = new URL(meetingInfo.value.iframeUrl)
  const roomName = url.pathname.substring(1) // 去掉开头的 /
  const jwt = url.searchParams.get('jwt')
  
  // 使用 Jitsi External API
  const domain = url.hostname + (url.port ? ':' + url.port : '')
  
  const options = {
    roomName: roomName,
    jwt: jwt,
    parentNode: document.getElementById('jitsi-container'),
    width: '100%',
    height: '100%',
    configOverwrite: {
      startWithAudioMuted: false,
      startWithVideoMuted: false,
      enableWelcomePage: false,
      prejoinPageEnabled: false,
      disableDeepLinking: true,
      enableChat: true,
      enableScreenSharing: true,
    },
    interfaceConfigOverwrite: {
      SHOW_JITSI_WATERMARK: false,
      SHOW_WATERMARK_FOR_GUESTS: false,
      DISABLE_JOIN_LEAVE_NOTIFICATIONS: false,
      DEFAULT_BACKGROUND: '#474747',
      TOOLBAR_BUTTONS: [
        'microphone', 'camera', 'closedcaptions', 'desktop',
        'fullscreen', 'fodeviceselection', 'hangup', 'chat',
        'recording', 'livestreaming', 'etherpad', 'sharedvideo',
        'settings', 'raisehand', 'videoquality', 'filmstrip',
        'invite', 'feedback', 'stats', 'shortcuts', 'tileview',
        'videobackgroundblur', 'download', 'help', 'mute-everyone',
        'security'
      ],
    },
  }
  
  // 创建 Jitsi API 实例
  jitsiApi.value = new JitsiMeetExternalAPI(domain, options)
  
  // 监听会议事件
  setupEventListeners()
}

// 设置事件监听
const setupEventListeners = () => {
  if (!jitsiApi.value) return
  
  // 监听会议结束事件（主持人点击"结束会议"）
  jitsiApi.value.addListener('readyToClose', async () => {
    console.log('会议准备关闭')
    await handleMeetingEnd()
  })
  
  // 监听参与者离开事件
  jitsiApi.value.addListener('participantLeft', (participant) => {
    console.log('参与者离开:', participant)
  })
  
  // 监听视频会议结束事件
  jitsiApi.value.addListener('videoConferenceLeft', async (data) => {
    console.log('离开视频会议:', data)
    // 只有主持人离开时才结束会议
    if (meetingInfo.value?.creator === userStore.userId) {
      await handleMeetingEnd()
    } else {
      // 普通参与者离开，直接关闭页面
      handleClose()
    }
  })
  
  // 监听挂断事件
  jitsiApi.value.addListener('hangup', async () => {
    console.log('挂断')
    // 检查是否是主持人
    if (meetingInfo.value?.creator === userStore.userId) {
      // 主持人挂断，询问是否结束会议
      const shouldEnd = confirm('是否结束会议？')
      if (shouldEnd) {
        await handleMeetingEnd()
      } else {
        handleClose()
      }
    } else {
      handleClose()
    }
  })
}

// 处理会议结束
const handleMeetingEnd = async () => {
  try {
    const meetingId = route.params.meetingId
    await endMeeting(meetingId)
    console.log('会议已结束')
  } catch (e) {
    console.error('结束会议失败:', e)
  } finally {
    handleClose()
  }
}

// 处理关闭
const handleClose = () => {
  // 如果是在iframe中打开的，发送消息给父窗口
  if (window.parent !== window) {
    window.parent.postMessage({ type: 'MEETING_CLOSED', meetingId: route.params.meetingId }, '*')
  }
  
  // 尝试关闭窗口
  window.close()
  
  // 如果无法关闭（不是通过window.open打开的），则跳转回聊天室
  setTimeout(() => {
    router.push('/chatroom')
  }, 100)
}

// 重试
const retry = () => {
  fetchMeetingInfo()
}

// 清理
const cleanup = () => {
  if (jitsiApi.value) {
    jitsiApi.value.dispose()
    jitsiApi.value = null
  }
}

onMounted(() => {
  // 加载 Jitsi External API 脚本
  const script = document.createElement('script')
  script.src = `${import.meta.env.VITE_JITSI_SERVER_URL}/external_api.js`
  script.onload = fetchMeetingInfo
  script.onerror = () => {
    error.value = '加载Jitsi脚本失败'
    loading.value = false
  }
  document.head.appendChild(script)
})

onUnmounted(() => {
  cleanup()
})
</script>

<style scoped>
.jitsi-meeting-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
}

#jitsi-container {
  width: 100%;
  height: 100%;
}

.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #333;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  text-align: center;
  padding: 20px;
}

.error-container button {
  margin-top: 20px;
  padding: 10px 30px;
  background: #4a90d9;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

2.2 API 接口定义

// src/api/meeting.ts
import request from '@/utils/request'

// 获取会议入口信息（支持token参数）
export function getMeetingEntry(meetingId: string, token?: string) {
  return request({
    url: `/workcase/meeting/${meetingId}/entry`,
    method: 'get',
    params: { token },
    // 不使用默认的Authorization header
    headers: token ? { 'Authorization': `Bearer ${token}` } : {}
  })
}

// 结束会议
export function endMeeting(meetingId: string) {
  return request({
    url: `/workcase/meeting/${meetingId}/end`,
    method: 'post'
  })
}

// 生成会议分享URL
export function generateMeetingShareUrl(meetingId: string, baseUrl?: string) {
  return request({
    url: `/workcase/meeting/${meetingId}/share-url`,
    method: 'get',
    params: { baseUrl }
  })
}

2.3 路由配置

// src/router/workcase.ts
{
  path: '/meeting/:meetingId',
  name: 'JitsiMeeting',
  component: () => import('@/views/public/Meeting/JitsiMeetingView.vue'),
  meta: {
    layout: 'BlankLayout',
    requiresAuth: false, // 允许通过URL token认证
    title: '视频会议'
  }
}

2.4 修改 ChatRoom 组件

在 ChatRoom 组件中，点击"进入会议"时：

// 进入会议
const joinMeeting = async (meetingId: string) => {
  // 生成会议入口URL
  const response = await generateMeetingShareUrl(meetingId)
  if (response.success) {
    // 在新窗口打开会议页面
    window.open(response.data, '_blank', 'width=1200,height=800')
  }
}

2.5 Web 初始化逻辑修改

在 workcase 前端的初始化逻辑中，添加从 URL token 恢复登录状态的功能：

// src/utils/auth.ts
export async function initAuth() {
  // 1. 检查 localStorage 中是否有登录信息
  const storedToken = localStorage.getItem('token')
  if (storedToken) {
    // 验证token是否有效
    const isValid = await validateToken(storedToken)
    if (isValid) {
      return true
    }
  }
  
  // 2. 检查 URL 参数中是否有 token
  const urlParams = new URLSearchParams(window.location.search)
  const urlToken = urlParams.get('token')
  if (urlToken) {
    try {
      // 调用 refresh 接口验证 token 并获取用户信息
      const response = await refreshToken(urlToken)
      if (response.success) {
        // 保存登录信息到 localStorage
        localStorage.setItem('token', response.data.token)
        localStorage.setItem('loginDomain', JSON.stringify(response.data))
        return true
      }
    } catch (e) {
      console.error('URL token 验证失败:', e)
    }
  }
  
  return false
}

3. 小程序端实现

小程序端直接给出会议链接，用户在手机浏览器中打开：

// 小程序中获取会议链接
const getMeetingUrl = async (meetingId) => {
  const token = wx.getStorageSync('token')
  const baseUrl = 'https://your-domain.com/workcase'
  
  // 构建会议入口URL
  const meetingUrl = `${baseUrl}/meeting/${meetingId}?token=${token}`
  
  // 复制到剪贴板或显示给用户
  wx.setClipboardData({
    data: meetingUrl,
    success: () => {
      wx.showToast({
        title: '会议链接已复制，请在浏览器中打开',
        icon: 'none'
      })
    }
  })
}

4. 关键流程

4.1 Web 端进入会议流程

用户点击"进入会议" 
    ↓
调用 generateMeetingShareUrl 获取带token的URL
    ↓
window.open 打开 JitsiMeetingView.vue
    ↓
JitsiMeetingView 从URL获取token
    ↓
调用 /meeting/{id}/entry?token=xxx 获取会议信息
    ↓
初始化 Jitsi External API
    ↓
监听 readyToClose/hangup 事件
    ↓
主持人结束会议时调用 endMeeting API

4.2 小程序端进入会议流程

用户点击"进入会议"
    ↓
获取当前用户token
    ↓
构建会议URL: /meeting/{id}?token=xxx
    ↓
复制URL到剪贴板
    ↓
用户在手机浏览器打开URL
    ↓
JitsiMeetingView 从URL获取token
    ↓
调用 /meeting/{id}/entry?token=xxx 获取会议信息
    ↓
初始化 Jitsi External API

5. 注意事项

主持人权限：只有会议创建人（meeting.creator）才是主持人，JWT token 中的 moderator 字段会正确设置
结束会议：只有主持人点击"结束会议"或挂断时才会调用 endMeeting API
Token 安全：URL 中的 token 应该有时效性，建议使用短期 token 或一次性 token
跨域问题：确保 Jitsi 服务器配置了正确的 CORS 策略
HTTPS：生产环境必须使用 HTTPS，否则浏览器可能阻止摄像头/麦克风访问

13 KiB Raw Blame History Unescape Escape