I’m trying to build a simple React Native app (Jssip and WebRTC) that will receive and answer a call from a SIP door station (Akuvox).

The overall solution is intended for use on the local network only.

The local network sip server is Routr with RTPengine.

So far the door station initiates a call, the React Native Android client is able to answer the call, SDP offer and answer are exchanged, ontrack is event is emitted, the Jssip confirmed event is emitted, the peerconnection is showing as connected but I’m unable to display Video or play audio on the client. The door station is receiving audio from the clients microphone. Not sure which step I’m missing?

“react-native”: “0.74.1”
“react-native-jssip”: “3.7.6”
“react-native-webrtc”: “^118.0.7”

SDP Offer From Door Station

v=0
o=1101 5000 5000 IN IP4 172.18.0.3
s=Talk
c=IN IP4 172.18.0.3
b=AS:4000
t=0 0
m=audio 25614 UDP/TLS/RTP/SAVPF 8 0 9 101
a=mid:1
a=rtpmap:8 PCMA/8000
a=rtpmap:0 PCMU/8000
a=rtpmap:9 G722/8000
a=rtpmap:101 telephone-event/8000
a=fmtp:101 0-15
a=sendrecv
a=rtcp:25614
a=rtcp-mux
a=setup:actpass
a=fingerprint:sha-256 F1:0A:15:B0:36:66:DA:5D:61:A5:C9:A8:5E:72:24:4B:E5:26:3E:0E:B0:4A:E2:08:A8:95:0B:EE:07:C7:0F:2D
a=tls-id:65c686948f15c085408a7242c0c60246
a=ptime:20
a=ice-ufrag:nK9WTPof
a=ice-pwd:Cv8ALuBGGxFfyj0GvVd2hkAIBA
a=candidate:mrzwf4XLvFEvyPHC 1 UDP 2130706431 172.18.0.3 25614 typ host
m=video 32555 UDP/TLS/RTP/SAVPF 96
a=mid:2
a=rtpmap:96 H264/90000
a=fmtp:96 profile-level-id=42e01f;packetization-mode=1;max-br=512;max-mbps=40500
a=sendrecv
a=rtcp:32555
a=rtcp-mux
a=setup:actpass
a=fingerprint:sha-256 F1:0A:15:B0:36:66:DA:5D:61:A5:C9:A8:5E:72:24:4B:E5:26:3E:0E:B0:4A:E2:08:A8:95:0B:EE:07:C7:0F:2D
a=tls-id:842f7759383cdec3efbcbd7c1440ad77
a=ptime:20
a=ice-ufrag:Xs8w1N0l
a=ice-pwd:ilQ4EtLhw13mc1jtfw6M6dICxl
a=candidate:mrzwf4XLvFEvyPHC 1 UDP 2130706431 172.18.0.3 32555 typ host

SDP Answer

v=0
o=- 949635043982078924 2 IN IP4 127.0.0.1
s=-
t=0 0
a=msid-semantic: WMS 6677aff8-db93-400c-89ae-bfe1e92e4c0c
m=audio 42489 UDP/TLS/RTP/SAVPF 8 0 9 101
c=IN IP4 192.168.61.242
a=rtcp:9 IN IP4 0.0.0.0
a=candidate:370454302 1 udp 2122260223 192.168.61.242 42489 typ host generation 0 network-id 3 network-cost 10
a=ice-ufrag:KUE+
a=ice-pwd:+SYB8TMYatUez3K47PwIVH3m
a=ice-options:trickle renomination
a=fingerprint:sha-256 E4:09:B4:E4:4B:19:B8:75:39:54:00:AE:BF:35:C1:B4:22:B0:92:64:F0:3D:D2:F2:9E:EF:62:67:6B:34:24:85
a=setup:active
a=mid:1
a=sendrecv
a=msid:6677aff8-db93-400c-89ae-bfe1e92e4c0c 4475b5a0-8f2c-4cc9-9111-877c5c31bfce
a=rtcp-mux
a=rtpmap:8 PCMA/8000
a=rtpmap:0 PCMU/8000
a=rtpmap:9 G722/8000
a=rtpmap:101 telephone-event/8000
a=ssrc:251028228 cname:EUjhx7RyFwKLwQi4
a=ssrc:251028228 msid:6677aff8-db93-400c-89ae-bfe1e92e4c0c 4475b5a0-8f2c-4cc9-9111-877c5c31bfce
m=video 41096 UDP/TLS/RTP/SAVPF 96
c=IN IP4 192.168.61.242
a=rtcp:9 IN IP4 0.0.0.0
a=candidate:370454302 1 udp 2122260223 192.168.61.242 41096 typ host generation 0 network-id 3 network-cost 10
a=ice-ufrag:PIXO
a=ice-pwd:GFHcL+KIjarDtgiQeHpRneP5
a=ice-options:trickle renomination
a=fingerprint:sha-256 E4:09:B4:E4:4B:19:B8:75:39:54:00:AE:BF:35:C1:B4:22:B0:92:64:F0:3D:D2:F2:9E:EF:62:67:6B:34:24:85
a=setup:active
a=mid:2
a=sendrecv
a=msid:6677aff8-db93-400c-89ae-bfe1e92e4c0c 074bfb5c-cbbb-44a1-8b87-7e19cba6f3e7
a=rtcp-mux
a=rtpmap:96 H264/90000
a=fmtp:96 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f
a=ssrc:3709015175 cname:EUjhx7RyFwKLwQi4
a=ssrc:3709015175 msid:6677aff8-db93-400c-89ae-bfe1e92e4c0c 074bfb5c-cbbb-44a1-8b87-7e19cba6f3e7

peerConnection Status after call confirmed event emitted
“signalingState”: “stable”,
“iceGatheringState”: “complete”,
“connectionState”: “connected”,
“iceConnectionState”: “connected”,

React Native Client Example

import { useEffect, useRef, useState } from 'react';
import {StyleSheet, View} from 'react-native';
import { WebSocketInterface, UA, debug } from 'react-native-jssip'
import { RTCPeerConnection, RTCIceCandidate, RTCSessionDescription, mediaDevices, RTCView, MediaStream, MediaStreamTrack } from 'react-native-webrtc';

global.RTCPeerConnection = RTCPeerConnection;
global.RTCIceCandidate = RTCIceCandidate;
global.RTCSessionDescription = RTCSessionDescription;
global.navigator.mediaDevices = mediaDevices;

// debug.enable('JsSIP:*')

export  function IntercomHome({navigation, route}) {
  const [setRemoteMedia, setsetRemoteMedia] = useState(null)
  const remoteMedia = useRef({})

  const myUa = useRef(null)
  const myUaCurrentRtcSession = useRef(null)
  
  const processNewRtcSession = (newRtc) => {
    myUaCurrentRtcSession.current = newRtc.session
    
    newRtc.session.on('confirmed',           async(e) => {
        console.log('nn connections status')
        console.log(JSON.stringify(myUaCurrentRtcSession.current.connection))
    })
    
    newRtc.session.on('sdp', (e) => {
        console.log(e.type)
        console.log(e.sdp)
    })
    
    if(newRtc.originator === 'remote'){
      setTimeout(() => {
        answerIncomingCall()
      },2000)
    }
  }

  const answerIncomingCall = () => {
    let options = {
      mediaConstraints: {
        audio: true, 
        video: true
      },
      pcConfig: {
          iceServers: [],
          iceTransportPolicy: "all",
          rtcpMuxPolicy: "negotiate"
      },
    }
    myUaCurrentRtcSession.current.answer(options)
    myUaCurrentRtcSession.current.connection.ontrack = async function(track){
      if(track.track.kind === 'video'){
        console.log('Video Track')
        try{
            setRemoteMedia(track.streams[0])
        }catch(e){
          console.log(e)
        }
      }
    }
  }
  
  const createJsSipInstance = async() => {
    console.log('Creating JsSip Instance')
    await getUserMedia()
    let socket = new WebSocketInterface('ws://***.***.**.**:5062');

    let configuration = {
        sockets: [socket],
        uri          : 'sip:****@***.*****',
        password     : "*****",
        session_timers: true,
        session_timers_force_refresher: true,
    };

    const ua = new UA(configuration);
    myUa.current = ua
    myUa.current.on('newRTCSession', processNewRtcSession)
    
  
  useEffect(() => {
    if (!myUa.current) {
      createJsSipInstance()
    }
    return () => {
        
    }
  })

 return(
    <View style={{...styles.mainView, backgroundColor:'yellow'}}>
      {remoteUrl ? 
        <RTCView 
          style={{flex:0.5, backgroundColor:'pink'}}
          streamURL={remoteUrl.toURL()}
          objectFit={'contain'}
          zOrder={10}
        />
        
        :
        null
      }
    </View>
  )
}