Discussion: Making jsSIP work with React Native

[danjenkins]

I've been building a couple of "native" apps with jssip using React Native and React Native WebRTC.

I've pushed all the changes required to make jssip work within that environment.

https://github.com/versatica/JsSIP/compare/master...nimbleape:react-native?expand=1

This isn't PR quality at all. And I definitely don't want to run a fork forever. So I'd love to get these changes put into core jssip. I think its mostly do-able with some basic if statements, taking debug require into a new file, and have that decide what to bring in etc.

Wanted to raise the issue - see if this is something JsSIP core contributors would want added etc.

[glocore]

Any updates around this? I need to use react-native-webrtc with SIP, and I can't use this library or SIP.js, as they both default to the browser's API

[namnm]

Hi guys, any news?

[danjenkins]

My branch isn't anywhere near ready to merge into jssip - and there are changes coming in react-native-webrtc which should make things work smoother by itself so for now, just use my branch which is in the original comment

[ibc]

there are changes coming in react-native-webrtc which should make things work smoother by itself

Didn't know about those news. Which changes do you mean? May be make it WebRTC 1.0 API compatible instead of using the API of 2013?

[danjenkins]

Not perfect but better APIs, promise based, etc etc - https://github.com/oney/react-native-webrtc/pull/527

[namnm]

If anyone still interest with this.

Based on the discussion here: https://github.com/oney/react-native-webrtc/issues/242 I made a fix to make it work in react native: https://github.com/brekekesoftware/jssip/commit/1e8446f930647bf9ebb1c2e642a38684db5729fd

Hope it helps.

[ibc]

Super thanks, @namnm

[krishnapsarthi]

Hello @namnm,

I have tried your solution integrating in our react-native app, we are using react-native-webrtc.

I am getting error as :- NOT_SUPPORTED_ERROR: WebRTC not supported at RTCSession.connect (blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:139052:17) at UA.call (blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:134338:17) at Meeting._this2._call (blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:99227:39) at UA. (blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:99249:18) at UA.emit (blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:135047:7) at UA.onTransportConnect (blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:134861:10) at Transport._onConnect (blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:143587:14) at WebSocketInterface._onOpen (blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:144616:14) at WebSocket.dispatchEvent (blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:23832:27) at blob:http://localhost:8081/d10bfd10-5a3d-4eb5-b6c6-27c463ce743e:24983:18

[namnm]

@krishnapsarthi May be you need to add WebRTC to the global window object as following:

import {
  mediaDevices,
  MediaStream,
  MediaStreamTrack,
  RTCIceCandidate,
  RTCPeerConnection,
  RTCSessionDescription,
} from 'react-native-webrtc';

window.RTCPeerConnection = window.RTCPeerConnection || RTCPeerConnection;
window.RTCIceCandidate = window.RTCIceCandidate || RTCIceCandidate;
window.RTCSessionDescription =
  window.RTCSessionDescription || RTCSessionDescription;
window.MediaStream = window.MediaStream || MediaStream;
window.MediaStreamTrack = window.MediaStreamTrack || MediaStreamTrack;
window.navigator.mediaDevices = window.navigator.mediaDevices || mediaDevices;
window.navigator.getUserMedia =
  window.navigator.getUserMedia || mediaDevices.getUserMedia;

Try to put it where before any other import.

[krishnapsarthi]

@namnm,,

I have tried that and that issue is gone, But is it mandatory that i have to upgrade react-native-webrtc to latest version as currently i have"react-native-webrtc": "^1.67.1",

[namnm]

You should update it to the latest, If you need that specific version then you should see the API of that version to see what are exported.

[krishnapsarthi]

@namnm ,

I have tried with updating react-native-webrtc to latest version, As they have updated the api mediaDevices.enumerateDevices().then(sourceInfos => { instead of MediaStreamTrack.getSources(sourceInfos => {

In new version promise never get resolved and i didn't received any response in sourceInfos using mediaDevices.enumerateDevices()

Thanks

[markgrin]

Hello, how can I contribute to add support for jssip in react-native?

Currently this https://github.com/versatica/JsSIP/compare/master...nimbleape:react-native?expand=1 @danjenkins with react-natve : 0.59.4 react : 16.8.3 react-native-webrtc : 1.69.2 works.

[danjenkins]

Ah you're using my fork! I really need to sit down with the jssip team to see how we can shove these changes back in. The bigger issues include dealing with answer Vs pranswer. Maybe this is a non issue if you're running rn-webrtc 1.75 (master)

On Fri, 30 Aug 2019, 15:45 Lev Melnikov, [email protected] wrote:

Hello, how can I contribute to add support for jssip in react-native?

Currently this https://github.com/versatica/JsSIP/compare/master...nimbleape:react-native?expand=1 http://url with react-natve : 0.59.4 react : 16.8.3 react-native-webrtc : 1.69.2 works.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/versatica/JsSIP/issues/526?email_source=notifications&email_token=AAB3LLIYGGTD7PUY22ARRILQHEQA5A5CNFSM4FO7ZU62YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5RWIGI#issuecomment-526607385, or mute the thread https://github.com/notifications/unsubscribe-auth/AAB3LLLAABMEPSIFQOC6NUTQHEQA5ANCNFSM4FO7ZU6Q .

[pietrozp13]

hey guys, i'm trying to find a simple example of this implementation with this fork created by @danjenkins. Does anyone have a demo ?

[bolambaoz]

hello guys, i'm also trying to learn about jssip for my project if anyone can give simple example that would be a great help.

[danjenkins]

No example app I'm afraid :) Theres so much to consider when building a webrtc softphone using react native now that a "simple" example just doesn't exist. Just know that if you write javascript that would work with jssip in the browser, use my temporary fork and it should work fine

[namnm]

We do have a fully open source webrtc soft phone here using jssip: https://github.com/brekekesoftware/brekekephone I'm the main contributor of that repo and also we have a fork of jssip here to work with our repo: https://github.com/brekekesoftware/jssip/tree/brekeke

[bolambaoz]

my temporary fork and it should work

We do have a fully open source webrtc soft phone here using jssip: https://github.com/brekekesoftware/brekekephone I'm the main contributor of that repo and also we have a fork of jssip here to work with our repo: https://github.com/brekekesoftware/jssip/tree/brekeke

thanks for this... ill try this.

[bolambaoz]

``Hi guys you know about this issue? I tried running the call function and it give me this error. My code works in the web but in react native app gives me this.

Wed May 06 2020 03:26:59.125] LOG JsSIP:UA call() +0ms [Wed May 06 2020 03:26:59.129] LOG JsSIP:RTCSession new +0ms [Wed May 06 2020 03:26:59.131] LOG JsSIP:RTCSession connect() +9ms [Wed May 06 2020 03:26:59.141] LOG JsSIP:RTCSession emit "peerconnection" +11ms [Wed May 06 2020 03:26:59.161] LOG JsSIP:RTCSession newRTCSession() +2ms [Wed May 06 2020 03:26:59.178] WARN JsSIP:ERROR:RTCSession http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:154938:43 forEach@[native code] http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:154937:39 tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28858:16 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28959:27 _callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32398:17 _callImmediatesPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32434:19 callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32652:33 callImmediates@[native code] callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2717:35 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2503:34 guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2700:15 flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2502:21 flushedQueue@[native code] invokeCallbackAndReturnFlushedQueue@[native code] +0ms

[danjenkins]

Jssip is catching an error in your code - debug your code amthat happens as a result of newRTCSession

On Tue, 5 May 2020, 22:34 ZeboBravo, [email protected] wrote:

``Hi guys you know about this issue? I tried to running the call function and it give me this error. My code works in the web but in react native app gives me this.

Wed May 06 2020 03:26:59.125] LOG JsSIP:UA call() +0ms [Wed May 06 2020 03:26:59.129] LOG JsSIP:RTCSession new +0ms [Wed May 06 2020 03:26:59.131] LOG JsSIP:RTCSession connect() +9ms [Wed May 06 2020 03:26:59.141] LOG JsSIP:RTCSession emit "peerconnection" +11ms [Wed May 06 2020 03:26:59.161] LOG JsSIP:RTCSession newRTCSession() +2ms [Wed May 06 2020 03:26:59.178] WARN JsSIP:ERROR:RTCSession http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:154938:43 forEach@[native code]

http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:154937:39 tryCallOne@ http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28858:16

http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28959:27 _callTimer@ http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32398:17 _callImmediatesPass@ http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32434:19 callImmediates@ http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32652:33 callImmediates@[native code] callImmediates@ http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2717:35

http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2503:34 guard@ http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2700:15 flushedQueue@ http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2502:21 flushedQueue@[native code] invokeCallbackAndReturnFlushedQueue@[native code] +0ms

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/versatica/JsSIP/issues/526#issuecomment-624318794, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB3LLOAGF65T6BDF5FL5H3RQCA7FANCNFSM4FO7ZU6Q .

[yunusaydinonline]

``Hi guys you know about this issue? I tried running the call function and it give me this error. My code works in the web but in react native app gives me this.

Wed May 06 2020 03:26:59.125] LOG JsSIP:UA call() +0ms [Wed May 06 2020 03:26:59.129] LOG JsSIP:RTCSession new +0ms [Wed May 06 2020 03:26:59.131] LOG JsSIP:RTCSession connect() +9ms [Wed May 06 2020 03:26:59.141] LOG JsSIP:RTCSession emit "peerconnection" +11ms [Wed May 06 2020 03:26:59.161] LOG JsSIP:RTCSession newRTCSession() +2ms [Wed May 06 2020 03:26:59.178] WARN JsSIP:ERROR:RTCSession http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:154938:43 forEach@[native code] http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:154937:39 tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28858:16 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28959:27 _callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32398:17 _callImmediatesPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32434:19 callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32652:33 callImmediates@[native code] callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2717:35 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2503:34 guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2700:15 flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2502:21 flushedQueue@[native code] invokeCallbackAndReturnFlushedQueue@[native code] +0ms

Hi, I'm having the same issue in my react native project. Did you notice what was that ?

[Farhadkm]

Any news around this? I think there will be more need for compatibility with react native.

[namnm]

We do have a fully open source webrtc soft phone here using jssip: https://github.com/brekekesoftware/brekekephone

It's working very well with react-native now. We only need to add documentation about how to use it: polyfill from react-native-webrtc, some tweaks...

[danjenkins]

I'd disagree, as soon as you add in support for hold etc there are changes needed - I still have my fork for a reason.

[namnm]

Hi, for the detail we are currently using jssip version 3.2.15 For the modification, we didnt use any fork, but the official version from npm. We have another team who wrote some internal libs which those libs will call jssip, Im not sure if those internal libs have any hack/trick. But Im sure we are not using any fork.

For the hold you mentioned, come to think of it, I think we are currently using only INVITE and some other protocols to initialize the call. We are using another custom web socket connection to implement some features.

[Farhadkm]

@namnm What version should be used for react native right now then?

[namnm]

@Farhadkm I think you should try with the latest first.

[nguyentuanit97]

sendDTMF not work in mobile. I call like this: this.call.sendDTMF(1, { 'transportType': 'RFC2833' }); but not work. Import lib to web and call sendDTMF that work fine.

[danjenkins]

RFC2833 isnt implemented into r-n-webrtc (theres a pull request open but it doesnt follow the spec - I wrote it... I just havent found the time to alter it to make it follow the spec)