如何在 JsSIP 中处理音频流

Question

我正在创建使用 JsSIP 库来应答通过 VoIP SIP 提供商拨打的呼叫的 React 应用程序。

我已经创建了一个有两个按钮(接受和拒绝(的页面。它成功地在SIP服务器上注册了SIP客户端。它也成功接听电话，我可以接听。但是我在接听电话时什么也听不到。

注册 JsSIP 客户端(willReceiveProps，因为我有 props 更改后的连接信息(：

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()

处理应答按钮单击的方法：

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,
    })
}

我做错了什么？

Answer 1

我解决了这个问题。

问题出在this.audioElement.play()线的位置。

我将其移至addstream事件的回调：

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

现在它工作正常。希望你也觉得它有用。

Answer 2

您可以使用react-sip npm 库来简化 React 应用程序中 jssip 的使用：https://www.npmjs.com/package/react-sip

您只需要将连接设置作为道具传递给 <SipProvider/> ，这将位于 react 树顶部附近的某个地方。这将允许您执行基本的启动/停止/应答操作，并在上下文中观察呼叫的状态！