Discussion: Making jsSIP work with React Native

danjenkins commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Hi guys, any news?

danjenkins commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

namnm commented 5 years ago

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 commented 5 years ago

Super thanks, @namnm

krishnapsarthi commented 5 years ago

Hello @namnm,

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

namnm commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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, notifications@github.com 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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

``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.

danjenkins commented 4 years ago

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, notifications@github.com 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 commented 3 years ago

``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 commented 3 years ago

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

namnm commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

namnm commented 3 years ago

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

nguyentuanit97 commented 3 years ago

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 commented 3 years ago

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)

nguyentuanit97 commented 3 years ago

Thanks you, I have another question. Can I implement video call with react-native JsSIP?

Farhadkm commented 3 years ago

Hi Tuannvitt, Here is our experience. It can be done, but we had to change the library and do some tweaks. You are going to hit some issues and you need to do some debugging inside the lib itself.

Richtervn commented 3 years ago

In case someone still want to use it with react-native, here is my fork from JsSIP 3.7.4. It's working great with react-native-webrtc 1.89.1 without sendDTMF. Just pass with_react_native: true to your UA configuration. https://github.com/versatica/JsSIP/compare/master...Richtervn:master

men3malgmatti commented 3 years ago

Hi guys, i am using https://github.com/versatica/JsSIP/compare/master...nimbleape:react-native?expand=1 fork in my react-native app, everything is working fine except for hold, it causes the RTC session to end with cause "webRTC Error". has someone encountered the same issue?

danjenkins commented 3 years ago

Hi guys, i am using https://github.com/versatica/JsSIP/compare/master...nimbleape:react-native?expand=1 fork in my react-native app, everything is working fine except for hold, it causes the RTC session to end with cause "webRTC Error". has someone encountered the same issue?

strange - i use this fork (im the maintainer) in a lot of projects and dont have issues.... if youve got a actual log message saying what the error is I'd be interested in looking at it

men3malgmatti commented 3 years ago

Thanks a lot @danjenkin, this problem happens when using react-native-webrtc 1.89.3 with the branch react-native-webrtc-89.3 in your fork (https://github.com/nimbleape/JsSIP/tree/react-native-webrtc-89.3), when i tried your branch (https://github.com/versatica/JsSIP/compare/master...nimbleape:react-native?expand=1) with react-native-webrtc 1.75.1, it's working fine.

Zus-ndung commented 2 years ago

@yunusaydinonline @bolambaoZebo Hi, I'm having the same issue in my react native project. Have you fixed it?

``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 ?

rcidt commented 2 years ago

Hi @danjenkins, do you have a link to the fork to allow RFC2833 DTMF in react-native app?

danjenkins commented 2 years ago

@rcidt https://github.com/nimbleape/react-native-webrtc/tree/94.1-plus-dtmf-plus-field-trial

margrudniak commented 2 years ago

Hey @danjenkins, i can't see any logs from your's fork https://github.com/nimbleape/JsSIP/tree/react-native should I do something to enable them? After changing all debug commands to console.log on the reworked version of the library, all logs appear. In the plain new react native app, react-native-debug shows all logs properly.

jikseyres16 commented 2 years ago

Hey @danjenkins , may I know branch of yours has a working sendDTMF functionality?

I'm using this as webRTC: https://github.com/nimbleape/react-native-webrtc/tree/94.1-plus-dtmf-plus-field-trial , and this as JsSIP library: https://github.com/nimbleape/JsSIP/tree/react-native-3.7

But I'm getting an error:

ERROR TypeError: this._connection.getSenders is not a function. (In 'this._connection.getSenders()', 'This._connection.getSenders' is undefined)

That error shows when I use the RFC2833 transportType option on sendDTMF().

or your webRTC fork is only working on callKit keypad UI only?

danjenkins commented 2 years ago

Sorry @jikseyres16 - I missed this! I should have deleted the react-native-3.7 branch as its broken - hopefully with the new branch of rn-webrtc we'll be able to upgrade to latest jssip (it supports senders/recievers) - you want the react-native-rn-100 branch :)

jikseyres16 commented 2 years ago

Thanks @danjenkins , yeah hope the new rn-webrtc we can use latest JsSip builds. does react-native-rn-100 support RFC2833? I'm gonna play on it later :)

danjenkins commented 2 years ago

@jikseyres16 yes it does but you have to use the extra method in the jssip fork for sending "webrtc" DTMF. I can't remember what the method is named though :)

mikkeldanielsen commented 2 years ago

Hey @danjenkins & @jikseyres16. Sorry to bother you. I tried your jssip fork react-native-rn-100 with your webrtc fork https://github.com/nimbleape/react-native-webrtc/tree/1.100.0-plus-dtmf-plus-field-trial, but I don't see any extra method in jssip for sending "webrtc" DTMF - I only find sendDTMF method. I'm trying to make RFC2833 DTMF. Could you perhaps point me in the right direction? :)

danjenkins commented 2 years ago

Ah yes so in the webrtc lib you link to... it is indeed sendDtmf (because the webrtc lib has no concept of sending dtmf any other way)

In jssip you can send dtmf the "sip" way or "the webrtc way" - so you can do.... rtcSession._connection.sendDTMF(tone); for example instead of rtcSession.sendDTMF()

mikkeldanielsen commented 2 years ago

Thanks alot @danjenkins. it makes sense & it worked :)

easyscripter commented 2 years ago

hi, guys. I have a trouble with streams in react native jssip. When I make an outgoing call, I get an error and the call is dropped Error is : outgoing failed, error: {"cause": "Bad Media Description"

vegulla001 commented 9 months ago

Hiii guys any update?

apple811 commented 9 months ago

@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.

where to put it any idea?

versatica / JsSIP

Discussion: Making jsSIP work with React Native #526