JSSIP and React audio issue

So I am using jssip 3.2.10 to make calls on a React project.

The server is setup on Asterisk and CentOS.

I can make calls where the call receiver hears me well, but I can't hear their audio, nor the waiting (traditional) beep noises it should make until the call is picked up.

It does work with some sipml5/asterisk udp online tests so I feel it's on my clients side issue. I tested it on Chrome and Firefox (both latest, with the same results).

My setup

I have a helper to connect called sip.js:

const JsSIP = require('jssip')
const GLOBAL = require('../globals')

function register(user, pass, cb) {
  console.log('Registering to SIP')
  JsSIP.debug.disable('JsSIP:*')
  const address = GLOBAL.jssip_server + ':' + GLOBAL.jssip_port
  let socket = new JsSIP.WebSocketInterface('ws://' + address + '/ws')

  const configuration = {
    sockets: [socket],
    uri: 'sip:' + user + '@' + GLOBAL.jssip_server,
    authorization_user: user,
    password: pass,
    connection_recovery_min_interval: 3,
    register: true
  }
  let ua = new JsSIP.UA(configuration)
  ua.start()
  cb(ua)
}

export {
  register
}

Then on my main component I do the following:

  componentDidMount() {
    if(GLOBAL.jssip) {
      this.props.dispatch(connecting(true))
      register('***', '***', (ua) => {
        this.setState({ua: ua}, () => {
          this.state.ua.on("registered", () => {
            this.props.dispatch(connecting(false))
            this.setState({critical: false})
          })
          this.state.ua.on("registrationFailed", () => {
            this.props.dispatch(connecting(false))
            this.setState({critical: true})
          })
        })
      })
    }
  }

And when I try to make a call I do the following:

  doCall(number) {
    this.props.dispatch(placeCall(call))
      if(GLOBAL.jssip) {
        let eventHandlers = {
          'connecting': (e) => {
            console.log('call is in progress')
            this.setState({sipStatus: "connecting"})
          },
          'progress': (e) => {
            console.log('call is in progress')
            this.setState({sipStatus: "progress"})
          },
          'failed': (e) => {
            console.log('call failed with cause: ', e)
            this.setState({sipStatus: "failed"})
          },
          'ended': (e) => {
            console.log('call ended with cause: ', e)
            this.setState({sipStatus: "ended"})
          },
          'confirmed': (e) => {
            this.setState({sipStatus: "confirmed"})
          }
        }
        let options = {
          eventHandlers: eventHandlers,
          mediaConstraints: { 'audio': true, 'video': false }
        }
        let session = this.state.ua.call('sip:'+number+'@'+GLOBAL.jssip_server, options)

      }
  }

Anyone has a clue on how to fix this?

Solution

Thanks to the answer here: How to handle audio stream in JsSIP?

I found the solution, I needed to add to the file rendering the call:

<audio ref={(audio) => {this.audioElement = audio}} id="audio-element"></audio>

And changed doCall last bit to this:

this.setState({session: this.state.ua.call('sip:'+number+'@'+GLOBAL.jssip_server, options)}, () =>{
  this.state.session.connection.addEventListener('addstream', (event: any) => {
    this.audioElement.srcObject = event.stream
    this.audioElement.play()
  })
})