javascript - Hur hanterar man ljudström i JsSIP?

Jag skapar en React-applikation som använder JsSIP-biblioteket för att besvara samtal gjorda via VoIP SIP-leverantör.

Jag har redan skapat en sida som har två knappar (Acceptera och Avvisa). Den registrerar framgångsrikt SIP-klienten på SIP-servern. Den tar också emot samtal framgångsrikt och jag kan svara på det. Men jag hör ingenting när jag svarar på samtalet.

Registrerar JsSIP-klient (i willReceiveProps eftersom jag har information för anslutning efter att props ändrats):

const socketHost = 'wss://' + contactCenter.host + ':' + contactCenter.port
const socket = new JsSIP.WebSocketInterface(socketHost)
const configuration = {
    sockets: [socket],
    uri: 'sip:' + contactCenter.login + '@' + contactCenter.host,
    password: contactCenter.password,
    socketHost: socketHost,
}

const coolPhone = new JsSIP.UA(configuration)

coolPhone.on('connected', (e: any) => {
    const messages = ServiceContainer.get<MessageManagerInterface>(ServiceTypes.Messages)
    messages.addSuccess('SIP connected')
})

coolPhone.on('newRTCSession', (e: any) => {
    const messages = ServiceContainer.get<MessageManagerInterface>(ServiceTypes.Messages)
    messages.addAlert('New call')

    const session = e.session

    session.on('failed', this.resetLocalState)
    session.on('ended', this.resetLocalState)

    const numberRegexp = /\"(\d+)\"/
    const fromNumber = (numberRegexp.exec(e.request.headers.From[0].raw))[1]
    const toNumber = (numberRegexp.exec(e.request.headers.Contact[0].raw))[1].slice(1)

    this.setState({
        callReceived: true,
        callSession: session,
        fromNumber: fromNumber,
        toNumber: toNumber,
    })
})

coolPhone.start()

Metod som hanterar klick på svarsknappen:

private answerCall = () => {
    const messages = ServiceContainer.get<MessageManagerInterface>(ServiceTypes.Messages)
    messages.addSuccess('Call answered')

    const callOptions = {
        mediaConstraints: {
            audio: true, // only audio calls
            video: false
        },
        pcConfig: {
            iceServers: [
                { urls: ["stun:stun.l.google.com:19302"] }
            ],
            iceTransportPolicy: "all",
            rtcpMuxPolicy: "negotiate"
        }
    }

    this.state.callSession.answer(callOptions)

    this.state.callSession.connection.addEventListener('addstream', (event: any) => {
        console.log(event)
        this.audioElement.srcObject = event.stream
    })

    this.audioElement.play()

    this.setState({
        callAnswered: true,
        callReceived: false,
    })
}

Vad gjorde jag fel?

Svar #1

Jag löste problemet.

Problemet var i positionen av raden this.audioElement.play().

Jag flyttade det till callbacken på addstream-händelsen:

this.state.callSession.connection.addEventListener('addstream', (event: any) => {
    console.log(event)
    this.audioElement.srcObject = event.stream
    this.audioElement.play()
})

Nu fungerar det bra. Hoppas att du också tycker det är användbart.

Relaterade artiklar