角8 WebRTC不能使它在两个标签上工作

Question

我有一个任务，创建一个音频聊天室之间的两个用户。

我使用了应用程序示例：同侪连接:仅限音频

我已经将代码更改为TypeScript，它运行如下：

斯塔克布利茨

但是我无法使它在两个用户之间工作(不是在一个选项卡中，而是打开两个firefox窗口)。我对角只有非常基本的知识。老实说，我不是一个优秀的开发人员，通常我会编写桌面应用程序，但我需要用Angular开发这个应用程序。

我需要发送一个报价事件到一个交流平台(到一个房间与另一个用户-它总是有两个用户在房间里)。它需要一种类型：offer和sdp。

其他用户以应答事件的方式响应同一个平台，同一个房间。它还需要sdp，并将类型设置为answer。

我们使用matrix.org。这是VOIP规范

我已经实现了把这些事件发送到一个交流平台，我从房间里读取事件，如果有呼叫提供事件，我可以用应答事件来回答，但我无法使它工作。

我已经试着让它发挥作用，所以我不得不在上周末工作，但总有一些问题，如DOMException: "Cannot set remote answer in state stable"等。

当然，我不需要一个工作代码(我知道这是几天的工作)，但我希望有任何建议来帮助我实现它，使它更容易和可能的人有非常基本的知识角和webRTC。

哦，我也不知道为什么，但是这个堆栈闪电式的例子对我来说并不适用于Chrome，但是它在firefox中是有效的。

//编辑

我还在努力寻找解决办法。我现在试着做这样的事：

placeCall() {
    this.turnServer();
    this.uuid = this.createUuid();
    this.initCall();
}

 initCall(){
    this.pc1 = new RTCPeerConnection(PEER_CONNECTION_CONFIG);
    navigator.mediaDevices
      .getUserMedia({
        audio: true,
        video: false
      })
      .then(stream => this.gotStreamSetOffer(stream))
      .catch(e => {
        console.log('error');
        alert(`getUserMedia() error: ${e.name}`);
      });
  }


 gotStreamSetOffer(stream) {
    this.hangupButton.nativeElement.disabled = false;
    this.localStream = stream;
    let audioTracks = this.localStream.getAudioTracks();
    console.log(audioTracks);
    if (audioTracks.length > 0) {
      console.log(`Using Audio device: ${audioTracks[0].label}`);
    }
    
    this.localStream.getTracks().forEach(track => this.pc1.addTrack(track, this.localStream));
    this.pc1.createOffer(this.offerOptions)
      .then(v => {
        this.pc1.setLocalDescription(v);
        this.sdp = v.sdp;
        this.localOfferSDP = v;
        this.messageService.callInvite(JSON.stringify(new CallInviteModel(this.uuid, 0, 30000, new OfferModel("offer", v.sdp))), this.roomId).subscribe(res => {
            this.candidates();
        });
      });
    this.pc1.onicecandidate = e => {
      if (e.candidate) return;
    };
       // Wait for answer in room and sanve answer to v

     this.hangupButton.nativeElement.disabled = false;
     this.callId = v.content.call_id;
     this.remoteOfferSDP = v.content.answer;
     this.pc1.setRemoteDescription(new RTCSessionDescription(this.remoteOfferSDP));

  }

 answer() {
    this.pc1 = new RTCPeerConnection(PEER_CONNECTION_CONFIG);
    let answer = new AnswerModel("answer", this.localOfferSDP.sdp); // localOfferSDP is an offer object with fields type and sdp. It's assigned when call event is detected
    let callAnswer = new CallAnswerModel(this.callId, 0, answer);
    let json = JSON.stringify(callAnswer);
    this.messageService.callAnswer(json, this.roomId).subscribe(res => {

    });
    this.remoteOfferSDP = this.localOfferSDP;
    this.remoteOfferSDP.type = 'answer';
    this.pc1.setRemoteDescription(new RTCSessionDescription(this.localOfferSDP))
      .then((a) => this.pc1.createAnswer())
      .then(d => {
        this.pc1.setLocalDescription(this.remoteOfferSDP)
      }).catch(e => console.log(e));
    this.pc1.onicecandidate = e => {
      if (e.candidate) return;

      };  

  }

但是现在我又收到了一个错误：DOMException: "Cannot set remote answer in state stable"

//EDIT2 2现在我得到了一个例外：DOMException: "Answer contains illegal setup attribute "actpass" at level 0"。actpass在sdp中，它是自动生成的。我在FF中收到了这个错误。

Answer 1

好吧，我做了这些事情：

1. 添加了adapter.js，所以现在它可以在不同的浏览器中工作。
2. 我添加了ontrack使音频工作
3. 我创建一个报价，然后设置编解码器和本地描述(在将事件发送到矩阵室之前，我需要这样做，以发送候选人)
4. 当没有更多的候选人时，我会把报盘事件发到矩阵室。
5. 当我看到报价事件时，我将远程描述设置为远程报价。
6. 我创建一个答案，设置编解码器，然后进行本地描述，然后将一个应答事件发送到房间。
7. 当房间里有应答事件时，我将远程描述设置为该事件

我知道这份清单不是很有帮助，但也许它会对某人有帮助。