Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Discussion: Making jsSIP work with React Native #526

Open
danjenkins opened this issue Aug 10, 2018 · 54 comments
Open

Discussion: Making jsSIP work with React Native #526

danjenkins opened this issue Aug 10, 2018 · 54 comments

Comments

@danjenkins
Copy link
Contributor

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
Copy link

glocore commented Nov 30, 2018

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
Copy link

namnm commented Dec 3, 2018

Hi guys, any news?

@danjenkins
Copy link
Contributor Author

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
Copy link
Member

ibc commented Dec 3, 2018

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
Copy link
Contributor Author

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

@namnm
Copy link

namnm commented Feb 27, 2019

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
Copy link
Member

ibc commented Mar 14, 2019

Super thanks, @namnm

@krishnapsarthi
Copy link

krishnapsarthi commented Jul 16, 2019

@namnm
Copy link

namnm commented Jul 16, 2019

@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
Copy link

krishnapsarthi commented Jul 16, 2019

@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
Copy link

namnm commented Jul 16, 2019

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
Copy link

krishnapsarthi commented Jul 16, 2019

@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
Copy link

markgrin commented Aug 30, 2019

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
Copy link
Contributor Author

danjenkins commented Aug 30, 2019 via email

@pietrozp13
Copy link

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
Copy link

bolambaoz commented Apr 27, 2020

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
Copy link
Contributor Author

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
Copy link

namnm commented Apr 28, 2020

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
Copy link

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
Copy link

bolambaoz commented May 5, 2020

``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
Copy link
Contributor Author

danjenkins commented May 6, 2020 via email

@yunusaydinonline
Copy link

``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
Copy link

Farhadkm commented Jan 7, 2021

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

@namnm
Copy link

namnm commented Jan 8, 2021

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
Copy link
Contributor Author

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
Copy link

namnm commented Jan 8, 2021

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
Copy link

Farhadkm commented Jan 8, 2021

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

@namnm
Copy link

namnm commented Jan 9, 2021

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

@nguyentuanit97
Copy link

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
Copy link
Contributor Author

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
Copy link

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

@Farhadkm
Copy link

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
Copy link

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.
master...Richtervn:master

@men3malgmatti
Copy link

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
Copy link
Contributor Author

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
Copy link

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
Copy link

Zus-ndung commented Jan 14, 2022

@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
Copy link

rcidt commented Jan 18, 2022

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

@danjenkins
Copy link
Contributor Author

@margrudniak
Copy link

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
Copy link

jikseyres16 commented Sep 16, 2022

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
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor Author

@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
Copy link

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
Copy link
Contributor Author

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
Copy link

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

@easyscripter
Copy link

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
Copy link

Hiii guys any update?

@apple811
Copy link

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

@maynor96
Copy link

maynor96 commented Mar 4, 2024

Hello everyone!,

I would like to know what things or tasks are needed for the pull request to be accepted and added to the JsSip project?

I want to contribute to the code or in the necessary tests.

Regards,

@danjenkins
Copy link
Contributor Author

@maynor96 Honestly no idea any more.... in theory RN-WebRTC follows the standards much better now so I'd suggest just giving it a go and seeing what happens. I still have clients using my fork or a version of that fork in their own repos.... so maybe its still required... I haven't done a jssip based softphone on React Native for a little while now.

@maynor96
Copy link

maynor96 commented Mar 4, 2024

Thank you very much for your response! The work you have done on your fork is really good; thank you so much for that great contribution!

I am going to attempt to set up a simple project for testing.

It would be fantastic if the main JsSip team could give their approval to the pull request!

Regards!

@danjenkins
Copy link
Contributor Author

danjenkins commented Mar 4, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests