Vue3+Vite集成Zoom Meetings SDK遇阻，寻求技术帮助

问题根源 #

你混淆了Zoom普通Web SDK和嵌入式Web SDK的包与API：

• 导入zoomus-websdk-embedded.umd.min.js是嵌入式SDK的包，它的核心对象是ZoomMtgEmbedded，而非ZoomMtg，所以调用ZoomMtg.checkSystemRequirements会提示方法不存在。
• 最初的c2 is not a function错误，是因为Vite对Zoom SDK的ES模块处理存在兼容性问题，需要改用UMD格式加载。

解决方案（分两种场景） #

场景1：使用普通Zoom Web SDK（适合全屏会议场景） #

1. 正确导入UMD包
   在组件中导入普通SDK的UMD包：

import ZoomMtg from '@zoomus/websdk/dist/zoomus-websdk.umd.min.js'

2. 配置Vite解决兼容性
   在vite.config.js中添加以下配置，避免Vite对SDK的过度优化导致错误：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    exclude: ['@zoomus/websdk'] // 禁止Vite预构建SDK
  },
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin' // 解决媒体设备访问跨域问题
    }
  }
})

3. 初始化SDK与调用方法
   确保先加载Zoom的CDN资源，再调用方法：

// 在组件的setup或mounted钩子中
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.8.0/lib', '/av')
ZoomMtg.preLoadWasm()
ZoomMtg.prepareJssdk()

// 现在可以正常调用系统要求检查
const systemRequirements = ZoomMtg.checkSystemRequirements()
console.log('系统要求检查结果:', systemRequirements)

// 后续初始化会议逻辑
ZoomMtg.init({
  leaveUrl: '/',
  success: () => {
    ZoomMtg.join({
      meetingNumber: '你的会议号',
      userName: '参会者名称',
      apiKey: '你的SDK密钥',
      signature: '后端生成的签名',
      userEmail: '参会者邮箱',
      success: () => console.log('加入会议成功'),
      error: err => console.error(err)
    })
  },
  error: err => console.error(err)
})

场景2：使用嵌入式Zoom SDK（适合页面内嵌入会议窗口） #

如果确实需要嵌入式SDK，需调整导入和API调用：

1. 导入嵌入式SDK包

import ZoomMtgEmbedded from '@zoomus/websdk/dist/zoomus-websdk-embedded.umd.min.js'

2. 初始化嵌入式会议
   嵌入式SDK的API与普通SDK不同，示例代码：

const client = ZoomMtgEmbedded.createClient()
const meetingContainer = document.getElementById('zoom-meeting-container')

client.init({
  zoomAppRoot: meetingContainer,
  language: 'zh-CN',
  success: () => {
    client.join({
      apiKey: '你的SDK密钥',
      signature: '后端生成的签名',
      meetingNumber: '你的会议号',
      userName: '参会者名称',
      userEmail: '参会者邮箱',
      success: () => console.log('嵌入式会议初始化成功'),
      error: err => console.error(err)
    })
  },
  error: err => console.error(err)
})

可复用Vue3组件示例（普通Web SDK版） #

封装ZoomMeeting.vue，方便多页面复用：

<template>
  <div>
    <div id="zmmtg-root"></div>
    <button @click="joinMeeting" v-if="!isJoined">加入会议</button>
    <button @click="leaveMeeting" v-if="isJoined">离开会议</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ZoomMtg from '@zoomus/websdk/dist/zoomus-websdk.umd.min.js'

const isJoined = ref(false)
const meetingNumber = ref('')
const userName = ref('')
const userEmail = ref('')
// 注意：签名必须由后端生成，前端禁止暴露apiSecret
const apiKey = '你的SDK密钥'
const signature = '后端生成的签名'

onMounted(() => {
  // 预加载Zoom资源
  ZoomMtg.setZoomJSLib('https://source.zoom.us/2.8.0/lib', '/av')
  ZoomMtg.preLoadWasm()
  ZoomMtg.prepareJssdk()
})

const joinMeeting = () => {
  ZoomMtg.init({
    leaveUrl: '/',
    success: () => {
      ZoomMtg.join({
        meetingNumber: meetingNumber.value,
        userName: userName.value,
        apiKey,
        signature,
        userEmail: userEmail.value,
        success: () => isJoined.value = true,
        error: err => console.error('加入失败:', err)
      })
    },
    error: err => console.error('初始化失败:', err)
  })
}

const leaveMeeting = () => {
  ZoomMtg.leaveMeeting({
    success: () => isJoined.value = false
  })
}
</script>

<style scoped>
#zmmtg-root {
  width: 100%;
  height: 600px;
}
</style>

关键注意事项 #

• 签名必须由后端生成，前端直接使用apiSecret会导致密钥泄露，生成逻辑参考Zoom官方文档。
• 确保SDK版本与CDN资源版本一致（示例用2.8.0，需与你安装的npm包版本匹配）。
• Vite的跨域头配置是必须的，否则无法访问摄像头/麦克风等媒体设备。

内容的提问来源于stack exchange，提问作者Delon