WebRTC报错Current signalingState(stable)无效，求解决直播连接问题

问题原因 #

Current signalingState (stable) is not valid for receiving response 错误的核心是：观众端的PeerConnection处于stable状态（无活跃信令交互）时，收到了针对旧会话的信令响应（或新会话的信令但未重置连接），导致状态不匹配。主播刷新页面后会生成新的WebRTC会话，但观众端仍在使用旧的PeerConnection实例处理新信令，引发状态冲突。

核心修复方案 #

1. 观众端：PeerConnection生命周期管理 #

维护全局PeerConnection实例，收到主播新直播通知时，主动销毁旧连接并初始化新实例：

let peerConnection = null;
const videoElement = document.getElementById('liveVideo');

// 初始化PeerConnection的通用方法
function createPeerConnection() {
  const pc = new RTCPeerConnection({
    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
  });

  // 接收视频流并渲染
  pc.ontrack = (event) => {
    videoElement.srcObject = event.streams[0];
  };

  // 发送ICE候选到SignalR
  pc.onicecandidate = (event) => {
    if (event.candidate) {
      hubConnection.invoke('SendIceCandidate', event.candidate);
    }
  };

  return pc;
}

// 监听主播新直播通知
hubConnection.on('NewLiveInitiated', () => {
  // 销毁旧连接
  if (peerConnection) {
    peerConnection.close();
    peerConnection = null;
  }
  // 创建新连接
  peerConnection = createPeerConnection();
});

2. 优化信令处理逻辑，增加错误容错 #

处理Offer/Answer时，捕获状态错误并自动重置连接重试：

// 处理主播发送的Offer
hubConnection.on('ReceiveLiveOffer', async (offer) => {
  try {
    // 确保有可用的PeerConnection
    if (!peerConnection) {
      peerConnection = createPeerConnection();
    }
    await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    // 发送Answer给主播
    await hubConnection.invoke('SendLiveAnswer', answer);
  } catch (error) {
    // 捕获状态不匹配错误，重置连接后重试
    if (error.message.includes('Current signalingState (stable)')) {
      peerConnection.close();
      peerConnection = createPeerConnection();
      // 重新处理Offer
      await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
      const answer = await peerConnection.createAnswer();
      await peerConnection.setLocalDescription(answer);
      await hubConnection.invoke('SendLiveAnswer', answer);
    } else {
      console.error('信令处理失败:', error);
    }
  }
});

3. 主播端：刷新后主动通知观众并发送新会话信令 #

主播页面加载完成后，先通过SignalR广播新直播启动通知，再创建新的PeerConnection并发送Offer：

async function startLiveStream() {
  try {
    // 获取摄像头/麦克风流
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    // 通知所有观众新直播启动
    await hubConnection.invoke('BroadcastNewLive');
    // 创建新的PeerConnection并添加轨道
    const pc = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    });
    stream.getTracks().forEach(track => pc.addTrack(track, stream));
    // 创建并广播Offer
    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
    await hubConnection.invoke('BroadcastLiveOffer', offer);
    // 处理ICE候选发送
    pc.onicecandidate = (event) => {
      if (event.candidate) {
        hubConnection.invoke('BroadcastIceCandidate', event.candidate);
      }
    };
  } catch (error) {
    console.error('直播启动失败:', error);
  }
}

// 页面加载时启动直播
window.addEventListener('load', startLiveStream);

4. SignalR Hub端：新增广播通知方法 #

在SignalR Hub中添加广播新直播和信令的方法：

public class LiveHub : Hub
{
    // 广播新直播启动通知
    public async Task BroadcastNewLive()
    {
        await Clients.All.SendAsync("NewLiveInitiated");
    }

    // 广播直播Offer
    public async Task BroadcastLiveOffer(object offer)
    {
        await Clients.Others.SendAsync("ReceiveLiveOffer", offer);
    }

    // 广播ICE候选
    public async Task BroadcastIceCandidate(object candidate)
    {
        await Clients.Others.SendAsync("ReceiveIceCandidate", candidate);
    }

    // 转发Answer给主播
    public async Task SendLiveAnswer(object answer)
    {
        await Clients.Caller.SendAsync("ReceiveLiveAnswer", answer);
    }
}

关键注意事项 #

• 避免复用旧PeerConnection处理新会话：主播刷新后生成的是全新的WebRTC会话，观众端必须用新的PeerConnection实例匹配。
• 信令消息要与会话绑定：如果需要支持多主播或多会话，可以给信令消息添加会话ID，观众端根据ID管理不同的PeerConnection。
• 处理ICE候选的过期问题：旧会话的ICE候选在新会话中无效，收到新直播通知时要清空旧的ICE候选缓存。

内容的提问来源于stack exchange，提问作者Chim Di Tru