server/web/src/hooks/useUDPDetection.js

import { useState, useEffect } from 'react'

const ICE_SERVERS = [
  { urls: 'stun:stun.l.google.com:19302' },
  { urls: 'stun:stun1.l.google.com:19302' },
  {
    urls: 'turn:openrelay.metered.ca:80',
    username: 'openrelayproject',
    credential: 'openrelayproject'
  },
  {
    urls: 'turn:openrelay.metered.ca:443?transport=tcp',
    username: 'openrelayproject',
    credential: 'openrelayproject'
  }
]

export function useUDPDetection() {
  const [udpAvailable, setUdpAvailable] = useState(false)
  const [detecting, setDetecting] = useState(true)

  useEffect(() => {
    async function detectUDP() {
      return new Promise((resolve) => {
        const testPc = new RTCPeerConnection({ iceServers: ICE_SERVERS })
        let hasUdp = false
        let timeout = null

        testPc.onicecandidate = (e) => {
          if (e.candidate) {
            const candidate = e.candidate.candidate
            console.log('[UDP Test] Candidate:', candidate)
            if (candidate.includes('udp') && candidate.includes('srflx')) {
              hasUdp = true
            }
          }
        }

        testPc.onicegatheringstatechange = () => {
          if (testPc.iceGatheringState === 'complete') {
            clearTimeout(timeout)
            testPc.close()
            resolve(hasUdp)
          }
        }

        testPc.createDataChannel('test')
        testPc.createOffer().then(offer => testPc.setLocalDescription(offer))

        timeout = setTimeout(() => {
          testPc.close()
          resolve(hasUdp)
        }, 5000)
      })
    }

    detectUDP().then(result => {
      setUdpAvailable(result)
      setDetecting(false)
    })
  }, [])

  return { udpAvailable, detecting }
}

export { ICE_SERVERS }