The second call hold don't get incoming audio on unhold

[dsalasjanda]

Describe the bug
We have a small Angular application to receive and make SIP calls through our app. With a single call, the 'hold' and 'unhold' functions work fine. If we receive a second call, the 'hold' and 'unhold' functions also work well. However, when we receive a second call and put it on hold (having the first one on hold previously) and try to put the first call on un-hold, the first call sends audio to the caller but this does not receive audio. We've been reviewing traces from Asterisk and 'chrome://webrtc-internals/' and it seems that the WebRTC packets are arriving, but we are unable to play them.

We tested this service whit a similar app of jssip and it look work find so we supouse that it is not a network or Asterix problem but a sip.js bug

To Reproduce (if possible)
This is our service code :

import { Injectable } from "@angular/core";
import { Session } from "sip.js";
import {
SessionManager,
SessionManagerDelegate,
SessionManagerOptions,
} from "sip.js/lib/platform/web";
import { CallData } from "./CallData";
import { BehaviorSubject, Observable, Subject } from "rxjs";
import { SipCallEventEnum, SipCallNotification } from "./SipCallNotification";

//https://github.com/onsip/SIP.js/blob/main/docs/session-manager/sip.js.sessionmanager.md
@Injectable({
providedIn: "root",
})
export class SipSessionService {
private sessionManager: SessionManager;
private notifications = new Subject();
private connectionStatus = new BehaviorSubject(false);
private activeUser: any;
public callList: SipCallNotification[];
public domain: string;

constructor() {}

connect(
server: string,
username: string,
password: string,
displayName: string,
domain: string
) {
/* const server = 'wss://10.22.45.116:8089/asterisk/ws';
const username = '3002';
const password = '3002';
const displayName = '3002';
*/
this.activeUser = username;
this.domain = domain
// Session manager delegate
const sessionManagerDelegate: SessionManagerDelegate = {
onCallReceived: (session: any) => {
let callData: CallData = {};
console.log(
[${displayName}] Call onCallReceived from + session._id
);
callData.id = session._id;
callData.session = session;
callData.date = new Date();
this.loadCallData(session,callData,username);
if (session.outgoingRequestMessage) {
console.log([${displayName}] Call dial);
this.notifications.next(
new SipCallNotification(SipCallEventEnum.DIAL, callData)
);
} else {
this.notifications.next(
new SipCallNotification(SipCallEventEnum.DIAL, callData)
);
}

    this.notifications.next(
      new SipCallNotification(SipCallEventEnum.INCOMING_CALL, callData)
    );
  },
  onCallCreated: (session: any): void => {
    console.log(this.sessionManager.managedSessions);
    console.log(`[${displayName}] Call created`);

    if (session.outgoingRequestMessage) {
      console.log(`[${displayName}] Call dial`);
      let callData: CallData = {};
      callData.id = session._id;
      callData.session = session;
      callData.date = new Date();
      this.loadCallData(session,callData,username);
      this.notifications.next(
        new SipCallNotification(SipCallEventEnum.DIAL, callData)
      );
    }
  },
  onCallAnswered: (session: any): void => {
    let callData: CallData = {};
    callData.id = session._id;
    callData.session = session;
    this.loadCallData(session,callData,username);
    this.notifications.next(
      new SipCallNotification(SipCallEventEnum.ANSWERED, callData)
    );

    console.log(`[${displayName}] Call answered`);
  },
  onCallHangup: (session: any): void => {
    let callData: CallData = {};
    callData.id = session._id;
    callData.session = session;
    this.loadCallData(session,callData,username);
    console.log(`[${displayName}] Call hangup`);
    this.notifications.next(
      new SipCallNotification(SipCallEventEnum.HANGUP, callData)
    );
  },
  onCallHold: (session: any, held: boolean): void => {
    let callData: CallData = {};
    callData.id = session._id;
    callData.session = session;
    this.loadCallData(session,callData,username);
    if (held) {
      this.notifications.next(
        new SipCallNotification(SipCallEventEnum.HOLDED, callData)
      );
    } else {
      this.notifications.next(
        new SipCallNotification(SipCallEventEnum.UNHOLDED, callData)
      );
    }
    console.log(`[${displayName}] Call hold ${held}`);
  },
};
const audioElement = this.getAudio("remoteAudio");
const sessionManagerOptions: SessionManagerOptions = {
  delegate: sessionManagerDelegate,
  maxSimultaneousSessions: 30,
  media: {
    remote: {
      audio: audioElement,
    },
  },
  aor: `sip:${username}@${domain}`,
  userAgentOptions: {
    authorizationPassword: password,
    authorizationUsername: username,
    displayName,
  },
};

this.sessionManager = new SessionManager(server, sessionManagerOptions);
this.sessionManager
  .connect()
  .then(() => {
    console.log("CONECTED");
  })
  .catch((error: Error) => {
    console.error("failed to connect");
    console.error(error);
    this.connectionStatus.next(false);
    alert("Failed to connect.\n" + error);
  });

  console.log(this.sessionManager);
this.sessionManager.register({
  // An example of how to get access to a SIP response message for custom handling
  requestDelegate: {
    onReject: (response) => {
      console.info(`REGISTER rejected`);
      let message = `Registration  rejected.\n`;
      message += `Reason: ${response.message.reasonPhrase}\n`;
      this.connectionStatus.next(false);
      alert(message);
    },
    /**
     * Received a 2xx positive final response to this request.
     * @param response - Incoming response.
     */
    onAccept: (response) => {
      console.info(`REGISTER onAccept`);
      this.connectionStatus.next(true);
    },
    /**
     * Received a 1xx provisional response to this request. Excluding 100 responses.
     * @param response - Incoming response.
     */
    onProgress: (response) => {
      // console.info(`[${this.user.id}] REGISTER onProgress`);
    },
  },
});

}

private loadCallData(session : any, callData : CallData, username : string){
if (session.outgoingRequestMessage) {
const CALLED = session.outgoingRequestMessage.toURI.normal?.user;
callData.local = true;
callData.id = session.id;
callData.date = new Date();
callData.called = CALLED;
callData.calling = username;
} else {
const CALLED = session.incomingInviteRequest.message?.from?.uri?.user;
callData.local = false;
callData.called = username;
callData.calling = CALLED;
}
}

public getCallByExtensionAndActiveUser(extension: string): CallData{
for (const value of this.callList.values()) {
if (value.data['called'] === extension && value.data['calling'] === this.activeUser ||
value.data['calling'] === extension && value.data['called'] === this.activeUser) {
return value.data;
}
}
}

makeCall(target: string): void {
this.sessionManager
.call(target, {
inviteWithoutSdp: false,
})
.catch((error: Error) => {
// console.error([${this.user.id}] failed to place call);
console.error(error);
alert("Failed to place call.\n" + error);
});

// Agrega más eventos y lógica según tus necesidades

}

onCall(extension: string): void {
const target="sip:" + extension + "@" + this.domain;
this.sessionManager
.call(target, {
inviteWithoutSdp: false,
})
.catch((error: Error) => {
// console.error([${this.user.id}] failed to place call);
console.error(error);
alert("Failed to place call.\n" + error);
});

// Agrega más eventos y lógica según tus necesidades

}

hangup(session: Session) {
this.sessionManager.hangup(session).catch((error: Error) => {
// console.error([${this.user.id}] failed to hangup call);
console.error(error);
alert("Failed to hangup call.\n" + error);
});
}

answer(session: Session) {
this.sessionManager.answer(session);
}

hold(session: Session) {
this.sessionManager.hold(session);
}

unhold(session: Session) {
this.sessionManager.unhold(session);
}
getAudio(id: string): HTMLAudioElement {
const el = document.getElementById(id);
if (!(el instanceof HTMLAudioElement)) {
throw new Error(Element "${id}" not found or not an audio element.);
}
return el;
}

public getNotificationsCalls(): Observable {
return this.notifications.asObservable();
}
public getConnectionStatus(): Observable {
return this.connectionStatus.asObservable();
}

setCallData(data : SipCallNotification[]){
this.callList = data;
}
}

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Observed behavior
A clear and concise description of what actually happened

Environment Information

• Backend Server and version
• Browser and version

Additional context
Add any other context about the problem here.

[dsalasjanda]

I find a Hack to solve the problem but It loock a litle diry:
I add setupRemoteMedia after unhold.

  unhold(session: Session) {
    this.sessionManager.unhold(session);
    **(this.sessionManager as any).setupRemoteMedia(session)**

  }

As I Said I think that is only a hack and this bug sould be solved some other way.

[bogdanteodoru]

I find a Hack to solve the problem but It loock a litle diry: I add setupRemoteMedia after unhold.

  unhold(session: Session) {
    this.sessionManager.unhold(session);
    **(this.sessionManager as any).setupRemoteMedia(session)**

  }

As I Said I think that is only a hack and this bug sould be solved some other way.

Hey man, thanks for this! I've been struggling to find a solution and this saved my life. Even if it's not that pretty it does do the job!