feat:pc语音通话demo

shuishen

2026-01-13 ed18423fd694c46f3b6b30185bef04f295f7af2a

feat:pc语音通话demo

 applications/drone-command/src/views/audioCall.vue

New file
@@ -0,0 +1,439 @@
<template>
    <div style="padding:16px">
      <h2>1v1 语音通话 WebRTC Demo（对齐后端 ChatMessage，JS）</h2>
  
      <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
        <span>我的 userId：</span>
        <input v-model="uid" style="width:120px" />
  
        <span>对方 userId：</span>
        <input v-model="peerUid" style="width:120px" />
  
        <button @click="connectWS" :disabled="connected">连接WS</button>
  
        <button @click="requestCall" :disabled="!connected || state!=='idle'">呼叫</button>
  
        <button v-if="state==='ringing'" @click="acceptCall">接听</button>
        <button v-if="state==='ringing'" @click="rejectCall">拒绝</button>
  
        <button @click="hangup" :disabled="!connected || (state!=='calling' && state!=='in-call')">挂断</button>
  
        <strong>状态：{{ state }}</strong>
        <strong v-if="state==='in-call'">通话时长：{{ durationText }}</strong>
      </div>
  
      <div style="margin-top:8px;color:#666">
        <small>提示：若 getUserMedia 不可用，请用 https 或 localhost 访问页面。</small>
      </div>
  
      <pre style="margin-top:12px;max-height:280px;overflow:auto;">{{ logText }}</pre>
  
      <audio ref="remoteAudio" autoplay></audio>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onBeforeUnmount } from 'vue'
  
  /** ✅ 你的 WS 地址前缀（后面拼 userId） */
  const WS_BASE = 'wss://域名/ws/chat?userId='
  
  const uid = ref('2')
  const peerUid = ref('3')
  
  const connected = ref(false)
  const state = ref('idle') // idle | calling | ringing | in-call
  const logText = ref('')
  const remoteAudio = ref(null)
  
  let ws = null
  let pc = null
  let localStream = null
  const pendingCandidates = []
  
  // 来电暂存
  let incomingFrom = null
  let acceptedByMe = false // 我是否已经点了接听
  let offeredByPeer = false // 是否已收到对方 offer（用于流程判断）
  
  // 计时
  let timer = null
  const seconds = ref(0)
  const durationText = computed(() => {
    const m = String(Math.floor(seconds.value / 60)).padStart(2, '0')
    const s = String(seconds.value % 60).padStart(2, '0')
    return `${m}:${s}`
  })
  function startTimer() {
    stopTimer()
    seconds.value = 0
    timer = setInterval(() => seconds.value++, 1000)
  }
  function stopTimer() {
    if (timer) clearInterval(timer)
    timer = null
  }
  
  // 心跳
  let pingTimer = null
  function startPing() {
    stopPing()
    // 每 25 秒发一次 ping（你后端有 PING/PONG）
    pingTimer = setInterval(() => {
      if (connected.value) send('ping', 'system', null)
    }, 25000)
  }
  function stopPing() {
    if (pingTimer) clearInterval(pingTimer)
    pingTimer = null
  }
  
  function log(...args) {
    const line = args.map(v => (typeof v === 'string' ? v : JSON.stringify(v))).join(' ')
    logText.value += `[${new Date().toLocaleTimeString()}] ${line}\n`
    console.log(...args)
  }
  
  /**
   * ✅ 严格按后端 ChatMessage 字段发：
   * { type, from, to, payload, timestamp }
   * 注意：后端会用 session 的 userId 覆盖 from，但我们带上也没坏处
   */
  function send(type, to, payload) {
    if (!type) return
    if (!ws || ws.readyState !== WebSocket.OPEN) return
  
    const msg = {
      type,                 // "call/accept/busy/offer/answer/candidate/hangup/ping"
      from: String(uid.value),
      to: String(to),
      payload: payload ?? null,
      timestamp: Date.now(),
    }
    ws.send(JSON.stringify(msg))
  }
  
  /* ---------------- WebRTC ---------------- */
  
  function createPC() {
    pc = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
    })
  
    pc.onicecandidate = (e) => {
      if (e.candidate) {
        send('candidate', peerUid.value, { candidate: e.candidate.toJSON ? e.candidate.toJSON() : e.candidate })
      }
    }
  
    pc.ontrack = (e) => {
      log('✅ 收到远端音频流')
      const stream = e.streams[0]
      if (remoteAudio.value) {
        remoteAudio.value.srcObject = stream
        remoteAudio.value.play().catch(() => {})
      }
    }
  
    pc.onconnectionstatechange = () => {
      log('pc.connectionState =', pc.connectionState)
    }
  }
  
  async function getLocalAudio() {
    if (localStream) return localStream
  
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      log('❌ 当前环境不支持 getUserMedia：请使用 https 或 localhost 打开页面')
      throw new Error('getUserMedia not available')
    }
  
    try {
      localStream = await navigator.mediaDevices.getUserMedia({ audio: true })
      log('✅ 已获取本地麦克风')
      return localStream
    } catch (e) {
      log('❌ 获取麦克风失败：', String(e))
      throw e
    }
  }
  
  /** ✅ 关键：只 addTrack 一次，避免 “sender already exists” */
  async function ensureLocalTracksAdded() {
    if (!pc) createPC()
    const stream = await getLocalAudio()
  
    const existingTrackIds = new Set(
      pc.getSenders().map(s => (s.track ? s.track.id : null)).filter(Boolean)
    )
  
    stream.getTracks().forEach(track => {
      if (!existingTrackIds.has(track.id)) {
        pc.addTrack(track, stream)
        log('addTrack ok:', track.id)
      } else {
        // log('skip addTrack:', track.id)
      }
    })
  
    return stream
  }
  
  async function flushCandidates() {
    if (!pc || !pc.remoteDescription) return
    while (pendingCandidates.length) {
      const c = pendingCandidates.shift()
      try {
        await pc.addIceCandidate(new RTCIceCandidate(c))
      } catch (e) {
        log('addIceCandidate failed:', String(e))
      }
    }
  }
  
  /* ---------------- 信令处理 ---------------- */
  
  async function onSignal(msg) {
    if (!msg) return
    const t = (msg.type || '').toString()
  
    // ✅ 忽略后端回显给自己的消息（你的后端会回显 sender）
    if (msg.from && String(msg.from) === String(uid.value)) {
      return
    }
  
    // system 消息：login/pong/busy 仅记录
    if (msg.from === 'system') {
      log('system msg:', msg)
      return
    }
  
    if (!t) return
  
    if (t === 'call') {
      // 收到来电：弹接听按钮
      incomingFrom = String(msg.from)
      peerUid.value = incomingFrom
      acceptedByMe = false
      offeredByPeer = false
  
      state.value = 'ringing'
      log('📞 收到来电 call，来自', incomingFrom)
      return
    }
  
    if (t === 'accept') {
      // 主叫收到 accept：开始 offer
      log('✅ 对方接听 accept，开始建立连接（offer）')
      await startOffer()
      return
    }
  
    if (t === 'busy') {
      log('❌ 对方忙线/拒绝')
      cleanup(false)
      return
    }
  
    if (t === 'offer') {
      // 被叫收到 offer：只有点击接听后才真正应答（你要求“先点接听”）
      offeredByPeer = true
      incomingFrom = String(msg.from)
      peerUid.value = incomingFrom
  
      if (!acceptedByMe) {
        state.value = 'ringing'
        log('📩 收到 offer（但未接听），已等待用户点击接听')
        // 暂存 offer 到一个变量
        lastOfferSdp = msg.payload?.sdp
        return
      }
  
      // 已接听：直接 answer
      await answerOffer(msg.payload?.sdp, incomingFrom)
      return
    }
  
    if (t === 'answer') {
      log('✅ 收到 answer，通话建立')
      if (!pc) createPC()
      await pc.setRemoteDescription(new RTCSessionDescription(msg.payload?.sdp))
      await flushCandidates()
  
      state.value = 'in-call'
      startTimer()
      return
    }
  
    if (t === 'candidate') {
      const c = msg.payload?.candidate
      if (!c) return
      if (pc && pc.remoteDescription) {
        await pc.addIceCandidate(new RTCIceCandidate(c))
      } else {
        pendingCandidates.push(c)
      }
      return
    }
  
    if (t === 'hangup') {
      log('📴 对方挂断')
      cleanup(false)
      return
    }
  
    if (t === 'pong') {
      // 心跳响应
      // log('pong')
      return
    }
  }
  
  // 暂存 offer（用于“先点接听再 answer”）
  let lastOfferSdp = null
  
  /* ---------------- 业务操作 ---------------- */
  
  function connectWS() {
    if (ws) ws.close()
  
    ws = new WebSocket(WS_BASE + encodeURIComponent(uid.value))
  
    ws.onopen = () => {
      connected.value = true
      log('WS 已连接 userId=', uid.value)
      startPing()
    }
  
    ws.onclose = () => {
      connected.value = false
      log('WS 已关闭')
      stopPing()
    }
  
    ws.onerror = (e) => log('WS error', e)
  
    ws.onmessage = (e) => {
      const msg = JSON.parse(e.data)
      log('收到信令', msg)
      onSignal(msg)
    }
  }
  
  function requestCall() {
    state.value = 'calling'
    incomingFrom = null
    acceptedByMe = false
    offeredByPeer = false
    lastOfferSdp = null
  
    send('call', peerUid.value, null)
    log('➡️ 发起呼叫 call 给', peerUid.value)
  }
  
  function acceptCall() {
    if (!incomingFrom) return
    acceptedByMe = true
  
    // 先告诉对方我接听了（后端会把双方置忙）
    send('accept', incomingFrom, null)
    log('✅ 已点击接听，发送 accept 给', incomingFrom)
  
    state.value = 'calling'
  
    // 如果 offer 已经提前到达（我们暂存了），立刻 answer
    if (lastOfferSdp) {
      answerOffer(lastOfferSdp, incomingFrom)
      lastOfferSdp = null
    }
  }
  
  function rejectCall() {
    if (!incomingFrom) return
  
    // 你后端没有 reject，用 busy 表示拒绝/不可接听
    send('busy', incomingFrom, null)
    log('❌ 已拒绝来电，发送 busy 给', incomingFrom)
  
    incomingFrom = null
    acceptedByMe = false
    offeredByPeer = false
    lastOfferSdp = null
    state.value = 'idle'
  }
  
  async function startOffer() {
    if (!pc) createPC()
  
    // ✅ 不会重复 addTrack
    await ensureLocalTracksAdded()
  
    const offer = await pc.createOffer()
    await pc.setLocalDescription(offer)
  
    send('offer', peerUid.value, { sdp: pc.localDescription })
    log('➡️ 已发送 offer 给', peerUid.value)
  }
  
  async function answerOffer(offerSdp, from) {
    if (!offerSdp) {
      log('❌ offer sdp 为空，无法接听')
      return
    }
    if (!pc) createPC()
  
    await pc.setRemoteDescription(new RTCSessionDescription(offerSdp))
    await flushCandidates()
  
    await ensureLocalTracksAdded()
  
    const answer = await pc.createAnswer()
    await pc.setLocalDescription(answer)
  
    send('answer', from, { sdp: pc.localDescription })
    log('⬅️ 已发送 answer 给', from)
  
    state.value = 'in-call'
    startTimer()
  }
  
  function hangup() {
    cleanup(true)
  }
  
  /* ---------------- 清理 ---------------- */
  
  function cleanup(sendToPeer) {
    try {
      if (sendToPeer) send('hangup', peerUid.value, null)
    } catch {}
  
    stopTimer()
  
    if (pc) {
      pc.getSenders().forEach(s => s.track && s.track.stop())
      pc.close()
    }
    if (localStream) {
      localStream.getTracks().forEach(t => t.stop())
    }
  
    pc = null
    localStream = null
    pendingCandidates.length = 0
  
    incomingFrom = null
    acceptedByMe = false
    offeredByPeer = false
    lastOfferSdp = null
  
    state.value = 'idle'
  }
  
  onBeforeUnmount(() => {
    cleanup(false)
    stopPing()
    if (ws) ws.close()
  })
  </script>