Javascript WebRTC 无法设置远程应答 sdp : Called in wrong state: kHaveRemoteOffer and Called in wrong state: kStable-6ren

Javascript WebRTC 无法设置远程应答 sdp : Called in wrong state: kHaveRemoteOffer and Called in wrong state: kStable

转载作者：行者123 更新时间：2023-12-03 07:20:44

我无法让我的 WebRTC 代码正常工作。我相信我所做的一切都是正确的，但它仍然无法正常工作。为什么 ontrack 这么早就被调用有些奇怪，也许它应该是那样的。

该网站使用 javascript 代码，服务器代码我没有发布，但 WebSockets 连接的地方只是一个交换器，您发送到服务器的内容也会将相同的信息发送回您连接的其他合作伙伴(陌生人)。

服务器代码看起来像这个小示例

    private void writeStranger(UserProfile you, String msg) {
        UserProfile stranger = you.stranger;
        if(stranger != null)
            sendMessage(stranger.getWebSocket(), msg);
    }

    public void sendMessage(WebSocket websocket, String msg) {
        try {
            websocket.send(msg);
        } catch ( WebsocketNotConnectedException e ) {
            disconnnectClient(websocket);
        }
    }

   //...

        case "ice_candidate":
            JSONObject candidatePackage = (JSONObject) packet.get(1);
            JSONObject candidate = (JSONObject) candidatePackage.get("candidate");

            obj = new JSONObject();
            list = new JSONArray();

            list.put("iceCandidate");
            obj.put("candidate", candidate);
            list.put(obj);

            System.out.println("Sent = " + list.toString());

            writeStranger(you, list.toString()); //send ice candidate to stranger

            break;
        case "send_answer":
            JSONObject sendAnswerPackage = (JSONObject) packet.get(1);
            JSONObject answer = (JSONObject) sendAnswerPackage.get("answer");

            obj = new JSONObject();
            list = new JSONArray();

            list.put("getAnswer");
            obj.put("answer", answer);
            list.put(obj);

            System.out.println("Sent = " + list.toString());

            writeStranger(you, list.toString()); //send answer to stranger

            break;
        case "send_offer":
            JSONObject offerPackage = (JSONObject) packet.get(1);
            JSONObject offer = (JSONObject) offerPackage.get("offer");

            obj = new JSONObject();
            list = new JSONArray();

            list.put("getOffer");
            obj.put("offer", offer);
            list.put(obj);

            System.out.println("Sent = " + list.toString());

            writeStranger(you, list.toString()); //send ice candidate to stranger

            break;

这是我的输出。
原始文本:https://pastebin.com/raw/FL8g29gG
JSON 彩色:https://pastebin.com/FL8g29gG

下面是我的javascript代码

var ws;

var peerConnection, localStream;    
var rtc_server = {
  iceServers: [
                {urls: "stun:stun.l.google.com:19302"},
                {urls: "stun:stun.services.mozilla.com"},
                {urls: "stun:stun.stunprotocol.org:3478"},
                {url: "stun:stun.l.google.com:19302"},
                {url: "stun:stun.services.mozilla.com"},
                {url: "stun:stun.stunprotocol.org:3478"},
  ]
}

//offer SDP's tells other peers what you would like
var rtc_media_constraints = {
  mandatory: {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
  }
};

var rtc_peer_options = {
  optional: [
              {DtlsSrtpKeyAgreement: true}, //To make Chrome and Firefox to interoperate.
  ]
}

var PeerConnection = RTCPeerConnection || window.PeerConnection || window.webkitPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
var IceCandidate = RTCIceCandidate || window.mozRTCIceCandidate || window.RTCIceCandidate;
var SessionDescription = RTCSessionDescription || window.mozRTCSessionDescription || window.RTCSessionDescription;
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

function hasSupportForVideoChat() {
   return window.RTCPeerConnection && window.RTCIceCandidate && window.RTCSessionDescription && navigator.mediaDevices && navigator.mediaDevices.getUserMedia && (RTCPeerConnection.prototype.addStream || RTCPeerConnection.prototype.addTrack) ? true : false;
}

function loadMyCameraStream() {
    if (getUserMedia) {
      getUserMedia.call(navigator, { video: {facingMode: "user", aspectRatio: 4 / 3/*height: 272, width: 322*/}, audio: { echoCancellation : true } },
        function(localMediaStream) {
          //Add my video
          $("div#videoBox video#you")[0].muted = true;
          $("div#videoBox video#you")[0].autoplay = true;
          $("div#videoBox video#you").attr('playsinline', '');
          $("div#videoBox video#you").attr('webkit-playsinline', '');
          $("div#videoBox video#you")[0].srcObject = localMediaStream;
          localStream = localMediaStream;
        },
        function(e) {
          addStatusMsg("Your Video has error : " + e);
        }
      );
    } else {
      addStatusMsg("Your browser does not support WebRTC (Camera/Voice chat).");
      return;
    }
}

function loadStrangerCameraStream() {
    if(!hasSupportForVideoChat())
      return;

    peerConnection = new PeerConnection(rtc_server, rtc_peer_options);
    if (peerConnection.addTrack !== undefined)
      localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
    else
      peerConnection.addStream(localStream);

    peerConnection.onicecandidate = function(e) {
      if (!e || !e.candidate)
        return;
      ws.send(JSON.stringify(['ice_candidate', {"candidate": e.candidate}]));
    };

    if (peerConnection.addTrack !== undefined) {
      //newer technology
      peerConnection.ontrack = function(e) {
        //e.streams.forEach(stream => doAddStream(stream));
        addStatusMsg("ontrack called");
        //Add stranger video
        $("div#videoBox video#stranger").attr('playsinline', '');
        $("div#videoBox video#stranger").attr('webkit-playsinline', '');
        $('div#videoBox video#stranger')[0].srcObject = e.streams[0];
        $("div#videoBox video#stranger")[0].autoplay = true;
      };
    } else {
      //older technology
      peerConnection.onaddstream = function(e) {
        addStatusMsg("onaddstream called");
        //Add stranger video
        $("div#videoBox video#stranger").attr('playsinline', '');
        $("div#videoBox video#stranger").attr('webkit-playsinline', '');
        $('div#videoBox video#stranger')[0].srcObject = e.stream;
        $("div#videoBox video#stranger")[0].autoplay = true;
      };
    }

    peerConnection.createOffer(
      function(offer) {
        peerConnection.setLocalDescription(offer, function () {
          //both offer and peerConnection.localDescription are the same.
          addStatusMsg('createOffer, localDescription: ' + JSON.stringify(peerConnection.localDescription));
          //addStatusMsg('createOffer, offer: ' + JSON.stringify(offer));
          ws.send(JSON.stringify(['send_offer', {"offer": peerConnection.localDescription}]));
        },
        function(e) {
          addStatusMsg('createOffer, set description error' + e);
        });
      },
      function(e) {
        addStatusMsg("createOffer error: " + e);
      },
      rtc_media_constraints
    );
}

function closeStrangerCameraStream() {
    $('div#videoBox video#stranger')[0].srcObject = null
    if(peerConnection)
      peerConnection.close();
}     

function iceCandidate(candidate) {
  //ICE = Interactive Connectivity Establishment
  if(peerConnection)
    peerConnection.addIceCandidate(new IceCandidate(candidate));
  else
    addStatusMsg("peerConnection not created error");
  addStatusMsg("Peer Ice Candidate = " + JSON.stringify(candidate));
}

function getAnswer(answer) {    
    if(!hasSupportForVideoChat())
      return;

    if(peerConnection) {
  peerConnection.setRemoteDescription(new SessionDescription(answer), function() {
    console.log("get answer ok");
    addStatusMsg("peerConnection, SessionDescription answer is ok");
  },
  function(e) {
    addStatusMsg("peerConnection, SessionDescription fail error: " + e);
  });
    }
}

function getOffer(offer) {
    if(!hasSupportForVideoChat())
      return;
    addStatusMsg("peerConnection, setRemoteDescription offer: " + JSON.stringify(offer));
    if(peerConnection) {
      peerConnection.setRemoteDescription(new SessionDescription(offer), function() {
        peerConnection.createAnswer(
          function(answer) {
            peerConnection.setLocalDescription(answer);
            addStatusMsg("create answer sent: " + JSON.stringify(answer));
            ws.send(JSON.stringify(['send_answer', {"answer": answer}]));
          },
          function(e) {
            addStatusMsg("peerConnection, setRemoteDescription create answer fail: " + e);
          }
        );
      });
    }
}

最佳答案

我使用它的网站:https://www.camspark.com/
修复了我自己，我发现这段代码有 2 个问题。

第一个问题是 createOffer() 只能由一个人发送，不能由两个人发送。您必须随机选择执行 createOffer() 的人。

第二个问题是 ICE Candidate，你必须为双方创建一个队列/数组，它包含所有传入的 ice_candidates。仅在收到对 createOffer() 的响应和来自 createOffer() 的 setRemoteDescription 时执行 peerConnection.addIceCandidate(new IceCandidate(candidate)); > 响应已设置。

getAnswer() 和 getOffer() 使用完全相同的代码，但是一个是为一个客户接收的，另一个是为另一个客户接收的。当其中一个被触发时，两者都需要刷新 IceCandidates 数组。也许如果有人愿意，您可以将这两个函数组合成一个函数，因为代码是相同的。

最终的工作代码如下所示

var ws;

var peerConnection, localStream;  
//STUN = (Session Traversal Utilities for NAT)  
var rtc_server = {
  iceServers: [
                {urls: "stun:stun.l.google.com:19302"},
                {urls: "stun:stun.services.mozilla.com"},
                {urls: "stun:stun.stunprotocol.org:3478"},
                {url: "stun:stun.l.google.com:19302"},
                {url: "stun:stun.services.mozilla.com"},
                {url: "stun:stun.stunprotocol.org:3478"},
  ]
}

//offer SDP = [Session Description Protocol] tells other peers what you would like
var rtc_media_constraints = {
  mandatory: {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
  }
};

var rtc_peer_options = {
  optional: [
              {DtlsSrtpKeyAgreement: true}, //To make Chrome and Firefox to interoperate.
  ]
}
var finishSDPVideoOffer = false;
var isOfferer = false;
var iceCandidates = [];
var PeerConnection = RTCPeerConnection || window.PeerConnection || window.webkitPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
var IceCandidate = RTCIceCandidate || window.mozRTCIceCandidate || window.RTCIceCandidate;
var SessionDescription = RTCSessionDescription || window.mozRTCSessionDescription || window.RTCSessionDescription;
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

function hasSupportForVideoChat() {
   return window.RTCPeerConnection && window.RTCIceCandidate && window.RTCSessionDescription && navigator.mediaDevices && navigator.mediaDevices.getUserMedia && (RTCPeerConnection.prototype.addStream || RTCPeerConnection.prototype.addTrack) ? true : false;
}

function loadMyCameraStream() {
    if (getUserMedia) {
      getUserMedia.call(navigator, { video: {facingMode: "user", aspectRatio: 4 / 3/*height: 272, width: 322*/}, audio: { echoCancellation : true } },
        function(localMediaStream) {
          //Add my video
          $("div#videoBox video#you")[0].muted = true;
          $("div#videoBox video#you")[0].autoplay = true;
          $("div#videoBox video#you").attr('playsinline', '');
          $("div#videoBox video#you").attr('webkit-playsinline', '');
          $("div#videoBox video#you")[0].srcObject = localMediaStream;
          localStream = localMediaStream;
        },
        function(e) {
          addStatusMsg("Your Video has error : " + e);
        }
      );
    } else {
      addStatusMsg("Your browser does not support WebRTC (Camera/Voice chat).");
      return;
    }
}

function loadStrangerCameraStream(isOfferer_) {
    if(!hasSupportForVideoChat())
      return;

    //Only add pending ICE Candidates when getOffer() is finished.
    finishSDPVideoOfferOrAnswer = false;
    iceCandidates = []; //clear ICE Candidates array.
    isOfferer = isOfferer_;

    peerConnection = new PeerConnection(rtc_server, rtc_peer_options);
    if (peerConnection.addTrack !== undefined)
      localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
    else
      peerConnection.addStream(localStream);

    peerConnection.onicecandidate = function(e) {
      if (!e || !e.candidate)
        return;    
      ws.send(JSON.stringify(['ice_candidate', {"candidate": e.candidate}]));
    };

    if (peerConnection.addTrack !== undefined) {
      //newer technology
      peerConnection.ontrack = function(e) {
        //e.streams.forEach(stream => doAddStream(stream));
        addStatusMsg("ontrack called");
        //Add stranger video
        $("div#videoBox video#stranger").attr('playsinline', '');
        $("div#videoBox video#stranger").attr('webkit-playsinline', '');
        $('div#videoBox video#stranger')[0].srcObject = e.streams[0];
        $("div#videoBox video#stranger")[0].autoplay = true;
      };
    } else {
      //older technology
      peerConnection.onaddstream = function(e) {
        addStatusMsg("onaddstream called");
        //Add stranger video
        $("div#videoBox video#stranger").attr('playsinline', '');
        $("div#videoBox video#stranger").attr('webkit-playsinline', '');
        $('div#videoBox video#stranger')[0].srcObject = e.stream;
        $("div#videoBox video#stranger")[0].autoplay = true;
      };
    }

    if(isOfferer) {
      peerConnection.createOffer(
        function(offer) {
          peerConnection.setLocalDescription(offer, function () {
            //both offer and peerConnection.localDescription are the same.
            addStatusMsg('createOffer, localDescription: ' + JSON.stringify(peerConnection.localDescription));
            //addStatusMsg('createOffer, offer: ' + JSON.stringify(offer));
            ws.send(JSON.stringify(['send_offer', {"offer": peerConnection.localDescription}]));
          },
          function(e) {
            addStatusMsg('createOffer, set description error' + e);
          });
        },
        function(e) {
          addStatusMsg("createOffer error: " + e);
        },
        rtc_media_constraints
      );
    }
}

function closeStrangerCameraStream() {
    $('div#videoBox video#stranger')[0].srcObject = null
    if(peerConnection)
      peerConnection.close();
}     

function iceCandidate(candidate) {
  //ICE = Interactive Connectivity Establishment
  if(!finishSDPVideoOfferOrAnswer) {
    iceCandidates.push(candidate);
    addStatusMsg("Queued iceCandidate");
    return;
  }

  if(!peerConnection) {
    addStatusMsg("iceCandidate peerConnection not created error.");
    return;
  }

  peerConnection.addIceCandidate(new IceCandidate(candidate));
  addStatusMsg("Added on time, Peer Ice Candidate = " + JSON.stringify(candidate));
}

function getAnswer(answer) {    
    if(!hasSupportForVideoChat())
      return;

    if(!peerConnection) {
      addStatusMsg("getAnswer peerConnection not created error.");
      return;
    }

    peerConnection.setRemoteDescription(new SessionDescription(answer), function() {
      addStatusMsg("getAnswer SessionDescription answer is ok");
      finishSDPVideoOfferOrAnswer = true;
      while (iceCandidates.length) {
        var candidate = iceCandidates.shift();
        try {
          peerConnection.addIceCandidate(new IceCandidate(candidate));
          addStatusMsg("Adding queued ICE Candidates");
        } catch(e) {
          addStatusMsg("Error adding queued ICE Candidates error:" + e);
        }
      }
      iceCandidates = [];
    },
    function(e) {
      addStatusMsg("getAnswer SessionDescription fail error: " + e);
    });
}

function getOffer(offer) {
    if(!hasSupportForVideoChat())
      return;

    if(!peerConnection) {
      addStatusMsg("getOffer peerConnection not created error.");
      return;
    }

    addStatusMsg("getOffer setRemoteDescription offer: " + JSON.stringify(offer));
    peerConnection.setRemoteDescription(new SessionDescription(offer), function() {
      finishSDPVideoOfferOrAnswer = true;
      while (iceCandidates.length) {
        var candidate = iceCandidates.shift();
        try {
          peerConnection.addIceCandidate(new IceCandidate(candidate));
          addStatusMsg("Adding queued ICE Candidates");
        } catch(e) {
          addStatusMsg("Error adding queued ICE Candidates error:" + e);
        }
      }
      iceCandidates = [];
      if(!isOfferer) {
        peerConnection.createAnswer(
          function(answer) {
            peerConnection.setLocalDescription(answer);
            addStatusMsg("getOffer create answer sent: " + JSON.stringify(answer));
            ws.send(JSON.stringify(['send_answer', {"answer": answer}]));
          },
          function(e) {
            addStatusMsg("getOffer setRemoteDescription create answer fail: " + e);
          }
        );
      }
    });
}

这是我在服务器端 WebSocket (Java) 服务器上打的补丁。

//JSON
 //["connected", {videoChatOfferer: true}]
 //["connected", {videoChatOfferer: false}]
 JSONObject obj = new JSONObject();
 JSONArray list = new JSONArray();
 list.put("loadStrangerCameraStream");
 obj.put("videoChatOfferer", true); //first guy offerer for WebRTC.
 list.put(obj);
 server.sendMessage(websocket, list.toString()); //connected to chat partner
 obj.put("videoChatOfferer", false); //second guy isn't offerer.
 list.put(obj);
 server.sendMessage(stranger.getWebSocket(), list.toString()); //connected to chat partner

关于Javascript WebRTC 无法设置远程应答 sdp : Called in wrong state: kHaveRemoteOffer and Called in wrong state: kStable，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60634946/

文章推荐： javascript - Angular 9 ng新安装程序包卡住

文章推荐： javascript - Node.js 集群示例

文章推荐： javascript - promise 未正确返回

文章推荐： javascript - 是否可以在 next.js api 中运行 Mongoose？

eclipse - 非法参数异常 : The servlets named [WrongServlet2] and [Wrong] are both mapped to the url-pattern [/Wrong] which is not permitted
这个问题在这里已经有了答案: java.lang.IllegalArgumentException: The servlets named [X] and [Y] are both mapped t
Javascript WebRTC 无法设置远程应答 sdp : Called in wrong state: kHaveRemoteOffer and Called in wrong state: kStable
我无法让我的 WebRTC 代码正常工作。我相信我所做的一切都是正确的，但它仍然无法正常工作。为什么 ontrack 这么早就被调用有些奇怪，也许它应该是那样的。该网站使用 javascript 代
ruby-on-rails - rake 数据库 :setup or rake db:create applying wrong username/wrong database
使用 Mac OSX 优胜美地 (10.10.4): rails -v => Rails 4.2.3 ruby -v => ruby 2.2.2p95 遵循这些说明的组合: https://www
c# - 已编译的 lambda 表达式用作属性 getter 和 setter : wrong benchmarking method or wrong lambda expression construction?
您好，我正在尝试使用(缓存的)已编译的 lambda 表达式来访问属性，与使用 PropertyInfo.GetValue()/SetValue() 方法调用相比，我确实得到了更好(即更快)的结果。然
C代码: What am I doing wrong?
我编写此代码是为了获取学生的字母成绩并计算他们的 GPA。当我运行该程序时，我可以正确获取学生的姓名和科目，但无法显示成绩或 GPA。示例输入: Sally 1 A N 示例输出: Enter St
MySQL游标问题: what did i do wrong?
我一直在编写这段代码，根据这本书应该可以做到这一点: Write a script that creates and calls a stored procedure named test. This
JavaScript多维数组语法: what am I doing wrong?
我真的很难创建一个具有以下基本格式的有效多维 JavaScript 数组: var countries = [ { "country": "UK", "properties": {
Python类继承构造函数失败: What am I doing wrong?
我有一个小型 Python OOP 程序，其中 2 个类 Flan 和 Outil 继承自父类(super class) Part。我的问题是，当我调用 Flan 时一切正常，但是当我调用 Outi
Java泛型编译器错误: What's wrong?
我目前正在尝试使用通用监听器来编写事件系统。所有监听器都应添加到单个 EventSource 对象，该对象将为特定事件调用其 receiveEvent() 方法。事件源: public class
我的应用程序发送的电子邮件收到垃圾邮件 : what's wrong with my headers?
我正在通过我的 PHP 应用程序发送电子邮件。但是，它们被 Gmail 标记为垃圾邮件。这是我发送电子邮件的方式(PHP): $headers = "From: test@bookmytakeout.
java - 多个类: What am I doing wrong here?
我已经正式走到了穷途末路的地步。我找不到我做错了什么。我完成的这个程序几乎与我几天前编写的另一个程序一模一样，但我在编译时遇到了问题。我不知道为什么输出线上出现错误。请帮忙: 这是正在运行的文件: p
Java按位运算返回 "wrong"值
---编辑:我不允许使用任何包或预置方法。不用担心，我不想让你做我的“作业”，我只需要一点提示!---我发现these interesting Algorithms 。我想使用按位添加方法。我的问题是
java - 获取小程序OutputStream抛出异常: What is wrong?
我制作了一个小程序，尝试使用 conn.getOutputStream(); 检索 URLConnection 对象输出流。当我尝试执行此操作时，我的小程序抛出异常 java.net.UnknownS
svn 树冲突 : what am i doing wrong?
每当我尝试在 SVN 中合并时，我都会遇到成堆的树冲突。好吧，就此示例脚本而言，只有一个，但仍然如此。 #!/bin/bash svnadmin create repo svn checkout fi
Scala 编译器崩溃 : What's wrong here?
我开始为 Scala 中的 X500PrincipalBuilder 类编写单元测试。这是我的测试代码: import org.junit.runner.RunWith import org.scal
python - Python中的递归: what am I doing wrong?
我正在用 python 编写我的第一个程序，它必须模拟粒子(两种气体)的混合。我不知道我这个功能做错了什么。我不希望颗粒离开某些区域，即容器的壁。我使用 VPython。 def poruszanie
python - 使用python求解三角非线性方程: what am I doing wrong?
我正在尝试求解三角方程组，但我认为 Python 没有生成正确的解。我试图解决的方程: 1 − 2cosθ1 + 2cosθ2 − 2cosθ3 = −0.8 1 − 2cos5θ1 + 2cos5θ
Python 3 : What am I doing wrong here?
这个问题已经有答案了: TypeError: worker() takes 0 positional arguments but 1 was given [duplicate] (11 个回答) 已关
C编程: wrong output?
大家好，我正在努力解决这个问题编写一个 C 程序，计算弹丸在撞击地面之前行进的距离(即射程)、弹丸撞击地面所需的时间以及弹丸飞行中的最大高度(给定角度)它被射向空中，以及发射时的初始速度(速度)。我
快速排序中的计数比较 : Wrong answer
我编写了代码来计算 QuickSort 中完成的比较次数。每当对长度为 m 的数组执行快速排序时，该算法都会将比较次数增加 m-1(因为主元将与除自身以外的所有内容进行比较)。枢轴的选择始终是数组

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript WebRTC 无法设置远程应答 sdp : Called in wrong state: kHaveRemoteOffer and Called in wrong state: kStable