Uncaught DOMException: Failed to set local answer sdp: Called in wrong state: STATE_INPROGRESS

I am getting this error (and others) when trying to re-initialize a video chat component. I have tried all manner of clearing the peer connection and reloading it.

Everything works fine on first attempt. Any subsequent attempts fail to load and get errors.

I am also getting errors: Cannot set remote answer in state stable Error: cannot signal after peer is destroyed

My code is as follows (angular 2).

@Component(
  {
    selector: 'vidcall',
    inputs: ['chattingWith'],
    template: `
    <div id="vidiv" #vidiv>
      <video #youvid></video>
      <video #othvid></video>
    </div>  
  `,
    styles: [`
    #vidiv{
      display: flex;     
      justify-content:space-around;
    }
  `]
  })
export class VideoComponent implements OnDestroy {
  @ViewChild('youvid') youvid: any;
  @ViewChild('othvid') othvid: any;
  private chattingWith: UserModel;
  private peer: any;
  private mediaStream: any;

  constructor(private srsvc: SRSvc) { }

  private sizeVid() {
    let w = Math.trunc(window.innerWidth / 3);
    console.log('width ', w);
    this.youvid.nativeElement.width = w;
    this.othvid.nativeElement.width = w;
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.sizeVid();
  }

  onVideoInit(init: boolean) { //
    this.sizeVid();
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: false
    })
      .then(mediaStream => {
        this.mediaStream = mediaStream;

        console.log('create new peer');
        this.peer = new window.SimplePeer(
          {
            initiator: init,
            stream: mediaStream,
            trickle: true
          });

        this.youvid.nativeElement.srcObject = mediaStream;
        this.youvid.nativeElement.play();

        // exchage peer data
        this.peer.on('signal', data => {
          console.log('on signal - initiator:', init);
          this.srsvc.sendPeerData(this.chattingWith.fbid, data); // signalr websocket
        })

        this.peer.on('stream', data => {
          console.log('on stream - initiator:', init);
          this.othvid.nativeElement.srcObject = data;
          this.othvid.nativeElement.play();
        })
        this.peer.on('close', () => {
          console.log('on close - initiator:', init);
          this.peer.destroy();
          this.peer = null;
          this.othvid.nativeElement.srcObject = null;
        })


        this.srsvc.recvPeerObservable.subscribe(resp => {
          console.log('recv peer data siglr - initiator:', init);
          if (this.peer) {
            this.peer.signal(resp.peerData)
          }
        })
      })
      .catch(err => {
        console.log('Simple Peer Error', err.name + ": " + err.message);
      });

  }
  destroy() {
    console.log('destroying peer', this.peer);
    if (this.peer) {
      this.peer.destroy();
      this.peer = null;
    }
    if (this.mediaStream) {
      for (let track of this.mediaStream.getTracks()) {
        track.stop();
      }
    }
    if (this.youvid.nativeElement.srcObject) {
      this.youvid.nativeElement.srcObject = null;
    }
    if (this.othvid.nativeElement.srcObject) {
      this.othvid.nativeElement.srcObject = null;
    }
  }
  ngOnDestroy() {
    this.destroy();
  }
}

I am trying to clear the peer/connection via the “destroy()” method, and it is being run each time this component closes.
Please tell me what I am doing wrong in terms of closing and re-initializing the peer connection. Thanks.

[popkinj]

I’m struggling with this same issue and haven’t found a solution yet.

I have a test page which is similar to this example but I’ve added two buttons. One starts and streams audio. The other stops it.

If I click start, audio streams successfully. Clicking stop does exactly that. Then when I click start again I get the same error listed above.

Uncaught Error: cannot signal after peer is destroyed

It almost seems that the p.destroy() function is not shutting the connection down completely.

broadcast = function (stream) {
  p = new SimplePeer({
    initiator: true, stream: stream, trickle: false
  });
  p.on("error", function (err) {console.error(err);});
  p.on("signal", function (conn) {
    document.querySelector("#outgoing-connection-string")
      .textContent = JSON.stringify(conn)
  });
  
  document.querySelector("form#stop-sending-audio").
    .addEventListener("submit", function(event) {
      stream.getAudioTracks()[0].stop() // Stop the microphone
      p.destroy() # Stop the WebRTC connection
  });
};

document.querySelector("form#send-audio").
  .addEventListener("submit", function(event) {
    conditions = {video: false, audio: true}; 
    navigator.getUserMedia(conditions,broadcast,function(){});
}); 

Any thoughts or tips would be greatly appreciated. ☺ And thanks for the library @feross .

[karuppiah7890]

👍