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: brekekesoftware@1e8446f

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, ***@***.***> 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 <#526?email_source=notifications&email_token=AAB3LLIYGGTD7PUY22ARRILQHEQA5A5CNFSM4FO7ZU62YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5RWIGI#issuecomment-526607385>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAB3LLLAABMEPSIFQOC6NUTQHEQA5ANCNFSM4FO7ZU6Q> .