WebRTC视频流故障咨询：使用Scaledrone报DOMException错误

这个错误是WebRTC PeerConnection状态机的典型问题——你在PeerConnection处于kStable（稳定）状态时尝试调用setLocalAnswer()，但这个方法只能在PeerConnection收到远程offer并进入kHaveRemoteOffer状态后执行。

为什么之前正常现在突然出错？ #

大概率是浏览器对WebRTC状态检查的逻辑更严格了（近两个月Chrome/Firefox都有WebRTC相关的小更新，比如对状态机的校验更严谨），或者你的信令流程中出现了状态复用/重复触发的问题。结合你用的Scaledrone信令和教程背景，我给你几个具体的排查和修复方向：

1. 确保异步操作的顺序和等待逻辑正确 #

WebRTC的setRemoteDescription()、createAnswer()都是异步Promise操作，如果你没有正确等待这些操作完成就调用setLocalAnswer()，很可能PeerConnection还停留在kStable状态。

错误示例（可能是你代码的问题）：

// 没有等待setRemoteDescription完成就执行后续操作
pc.setRemoteDescription(new RTCSessionDescription(offer));
const answer = pc.createAnswer();
pc.setLocalAnswer(answer);

正确的异步处理方式：

async function handleIncomingOffer(offer) {
  // 确保每次新连接都创建全新的PeerConnection实例，不要复用旧的
  const pc = new RTCPeerConnection(yourConfig);
  
  try {
    // 先等待远程offer设置完成
    await pc.setRemoteDescription(new RTCSessionDescription(offer));
    // 此时可以查看状态，应该是kHaveRemoteOffer
    console.log("Current signaling state:", pc.signalingState);
    
    // 创建answer并等待完成
    const answer = await pc.createAnswer();
    // 设置本地answer
    await pc.setLocalAnswer(answer);
    
    // 把answer发送到Scaledrone信令服务器
    scaledrone.publish('your-room', {type: 'answer', payload: answer});
  } catch (err) {
    console.error("Error handling offer:", err);
  }
}

2. 检查是否复用了旧的PeerConnection实例 #

如果你的代码在断开连接后没有销毁旧的PeerConnection，而是尝试复用它发起新连接，旧实例可能已经处于kStable状态，这时候再处理新的offer就会触发错误。

修复方式：

• 在连接断开（比如用户离开、通话结束）时，调用pc.close()并将实例置为null，确保下次连接创建全新的PeerConnection。

3. 排查信令消息的重复触发 #

Scaledrone的消息推送可能存在重复发送的情况（比如网络波动导致重发），如果你的代码没有处理重复的offer消息，就可能在PeerConnection已经稳定后再次尝试设置answer，触发状态错误。

修复方式：

• 在处理offer时，先检查当前PeerConnection的状态，如果已经是kStable或者kHaveLocalOffer，就忽略重复的offer。
• 可以给每个信令消息添加唯一ID，记录已经处理过的消息ID，避免重复处理。

4. 对比教程的最新代码 #

你提到的教程演示地址还能正常运行，说明教程的代码已经适配了最新的WebRTC行为。建议你把自己的代码和教程的最新代码做对比，重点看PeerConnection的创建、信令消息处理的异步逻辑部分，可能你还在使用旧的回调式写法，而教程已经更新为async/await。

按照上面的步骤排查后，应该能解决这个状态错误。如果还是有问题，可以在控制台打印pc.signalingState的变化，追踪每个步骤的状态，定位到底是哪一步导致状态异常。

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