How to attach audio using Jssip?

Question

i'm trying to use Jssip and I haven't find a working solution for listening the remote audio stream (i.e. attaching the audio stream to the dom).

I've found this js fiddle (https://jsfiddle.net/msqenm70/2/) that worked for me, however when I put the code outside jsfiddle, it doesn't work. Indeed it seems that the addstream event is no longer fired. I've also tried to replace "addstream" event by "track" event.

Asterisk logs show that audio is sent, and when I used directly the js fiddle i can hear it. Does anyone has an example that works in 2023 of how attaching audio when using jssip ?

Have a good day :)

var socket = new JsSIP.WebSocketInterface('wss://voip.myserver.ch/ws'); // FILL WSS SERVER

var configuration = {
  sockets: [socket],
  'uri': 'sip:[email protected]', // FILL SIP URI HERE like sip:[email protected]
  'password': 'password', // FILL PASSWORD HERE,
  'username': '', // FILL USERNAME HERE
  'register': true
};

var incomingCallAudio = new window.Audio('https://code.bandwidth.com/media/incoming_alert.mp3');
incomingCallAudio.loop = true;
incomingCallAudio.crossOrigin = "anonymous";
var remoteAudio = new window.Audio();

remoteAudio.autoplay = true;
remoteAudio.crossOrigin = "anonymous";

var callOptions = {
  mediaConstraints: {
    audio: true,
    video: false
  }
};

var phone;
if (configuration.uri && configuration.password) {
  JsSIP.debug.enable('JsSIP:*'); // more detailed debug output
  phone = new JsSIP.UA(configuration);
  phone.on('registrationFailed', function(ev) {
    alert('Registering on SIP server failed with error: ' + ev.cause);
    configuration.uri = null;
    configuration.password = null;
    updateUI();
  });
  phone.on('newRTCSession', function(ev) {
    var newSession = ev.session;
    if (session) { // hangup any existing call
      session.terminate();
    }
    session = newSession;
    var completeSession = function() {
      session = null;
      updateUI();
    };
    session.on('ended', completeSession);
    session.on('failed', completeSession);
    session.on('accepted', updateUI);
    session.on('confirmed', function() {
      var localStream = session.connection.getLocalStreams()[0];
      var dtmfSender = session.connection.createDTMFSender(localStream.getAudioTracks()[0])
      session.sendDTMF = function(tone) {
        dtmfSender.insertDTMF(tone);
      };
      updateUI();
    });
    session.on('peerconnection', (e) => {
      console.log('peerconnection', e);
      let logError = '';
      const peerconnection = e.peerconnection;

      peerconnection.onaddstream = function(e) {
        console.log('addstream', e);
        // set remote audio stream (to listen to remote audio)
        // remoteAudio is <audio> element on pag
        //remoteAudio.srcObject = e.stream;
        //remoteAudio.play();
      };

      var remoteStream = new MediaStream();
      console.log(peerconnection.getReceivers());
      peerconnection.getReceivers().forEach(function(receiver) {
        console.log(receiver);
        remoteStream.addTrack(receiver.track);
      });
    });

    if (session.direction === 'incoming') {
      incomingCallAudio.play();
    } else {
      console.log("step 1")
      console.log('con', session.connection)
      session.connection.addEventListener('track', function(e) {
        console.log("step 2")
        incomingCallAudio.pause();
        remoteAudio.srcObject = e.stream;
        window.document.body.appendChild(remoteAudio);
      });
    }
    updateUI();
  });
  phone.start();
}