同局域网对称NAT环境下WebRTC能否互通？连接失败求助

问题描述 #

请问当两个Peer处于同一局域网且位于对称NAT路由器后方时，WebRTC是否可以正常建立连接？这种情况下无需ICE服务器，是不是应该没有问题？

我尝试让同一机器上的两个Peer通过WebRTC建立连接，但连接失败。由于这是我首次使用WebRTC，可能是实现存在问题。

提供的代码 #

Go端Offer代码 #

package main

import (
    "fmt"
    "io"
    "net/http"
    "strconv"

    "github.com/pion/webrtc/v4"
)

func main() {
    answerC := HTTPSDPServer(8000) // feeds sdp into

    // Create a new RTCPeerConnection
    peerConnection, err := webrtc.NewPeerConnection(webrtc.Configuration{})
    if err != nil {
        panic(err)
    }
    defer func() {
        if cErr := peerConnection.Close(); cErr != nil {
            fmt.Printf("cannot close peerConnection: %v\n", cErr)
        }
    }()

    peerConnection.OnConnectionStateChange(func(s webrtc.PeerConnectionState) {
        fmt.Printf("Peer Connection State has changed: %s\n", s.String())
    })

    c, err := peerConnection.CreateDataChannel("channel", nil)
    if err != nil {
        panic(err)
    }

    c.OnOpen(func() {
        fmt.Println("Data Channel OPEN")
    })
    c.OnClose(func() {
        fmt.Println("Data Channel CLOSE")
    })

    offer, err := peerConnection.CreateOffer(nil)
    if err != nil {
        panic(err)
    }

    err = peerConnection.SetLocalDescription(offer)
    if err != nil {
        panic(err)
    }

    fmt.Println(strconv.Quote(offer.SDP)) // Copy this to frontend app

    answerStr := <-answerC
    answer := webrtc.SessionDescription{
        Type: webrtc.SDPTypeAnswer,
        SDP:  answerStr,
    }

    err = peerConnection.SetRemoteDescription(answer)
    if err != nil {
        panic(err)
    }

    select {}
}

func HTTPSDPServer(port int) chan string {
    sdpChan := make(chan string)
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        body, _ := io.ReadAll(r.Body)
        fmt.Fprintf(w, "done")
        sdpChan <- string(body)
    })

    go func() {
        // nolint: gosec
        err := http.ListenAndServe(":"+strconv.Itoa(port), nil)
        if err != nil {
            panic(err)
        }
    }()

    return sdpChan
}

Vue前端代码 #

const remoteConnection = new RTCPeerConnection()

remoteConnection.onicecandidate = e => {
    console.log(" NEW ice candidnat!! on localconnection reprinting SDP ")
    console.log(JSON.stringify(remoteConnection.localDescription))
}


remoteConnection.ondatachannel = e => {
    const receiveChannel = e.channel;
    receiveChannel.onmessage = e => console.log("message: " + e.data)
    receiveChannel.onopen = e => console.log("Data Channel OPEN");
    receiveChannel.onclose = e => console.log("Data Channel CLOSED");
    remoteConnection.channel = receiveChannel;

}

var sdp = "PASTE OFFER HERE" // Paste SDP copied from the offering peer
var offer = { "type": "offer", "sdp": sdp }

remoteConnection.setRemoteDescription(offer).then(a => console.log("done"))

//create answer
await remoteConnection.createAnswer().then(a => remoteConnection.setLocalDescription(a)).then(a =>
    console.log(JSON.stringify(remoteConnection.localDescription)))

问题解答与排查 #

局域网对称NAT下的WebRTC连接可能性 #

同一局域网内的对称NAT环境下，WebRTC可以正常建立连接。对称NAT的限制是对外只允许主动发起的连接回包，但局域网内的Peer可以直接交换本地ICE候选地址（比如192.168.x.x这类私有地址），绕过NAT的限制，因此确实不需要STUN/TURN服务器。但前提是双方必须完成ICE候选地址的交换，这是你当前实现缺失的核心环节。

本地测试失败的原因分析 #

你的代码存在几个关键问题：

• 未交换ICE候选地址：WebRTC的连接建立需要SDP（会话描述）和ICE候选（网络地址）两者都完成交换。你只实现了SDP Offer/Answer的传递，但两端生成的ICE候选没有发送给对方，导致Peer无法找到彼此的网络地址。
• Go端PeerConnection配置缺失：初始化时传入空配置，虽然Pion默认会收集本地候选，但显式配置空ICEServers列表可以确保仅收集本地地址，避免不必要的外部请求。
• 前端异步语法错误：await关键字未在异步函数内使用，实际运行时会抛出语法错误，可能影响连接流程。

修复建议 #

1. 添加ICE候选交换逻辑

   • Go端：监听OnICECandidate事件，将候选发送给前端；新增HTTP接口接收前端的ICE候选，调用peerConnection.AddICECandidate添加。

   peerConnection.OnICECandidate(func(c *webrtc.ICECandidate) {
       if c != nil {
           // 发送候选到前端，可通过HTTP接口或其他方式
           fmt.Println("Generated ICE candidate:", c.ToJSON())
       }
   })
   

   • 前端：在onicecandidate事件中，将有效的候选发送给Go端；接收Go端的候选并添加到连接中。

   remoteConnection.onicecandidate = e => {
       if (e.candidate) {
           // 发送候选到Go端HTTP接口
           fetch('/ice-candidate', {
               method: 'POST',
               body: JSON.stringify(e.candidate)
           })
       }
   }
   

2. 修正Go端配置
   显式指定空ICEServers列表，确保仅收集本地候选：

   config := webrtc.Configuration{
       ICEServers: []webrtc.ICEServer{},
   }
   peerConnection, err := webrtc.NewPeerConnection(config)
   

3. 修复前端异步代码
   将代码包裹在异步函数内：

   async function setupConnection() {
       const remoteConnection = new RTCPeerConnection()
       // ... 其余事件监听代码 ...
       await remoteConnection.setRemoteDescription(offer)
       const answer = await remoteConnection.createAnswer()
       await remoteConnection.setLocalDescription(answer)
       // 发送Answer到Go端
       fetch('/', {
           method: 'POST',
           body: answer.sdp
       })
   }
   setupConnection()
   

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