Integrating SIP.js with React Native

[Robert N]

Is there a way to integrate SIP.js (both audio and video calling are needed) with React Native? Importing the library itself is easy enough, but the issues I'm running into are:

- WebRTC support: instead of using the browser's WebRTC functionality (which isn't present in a react native app), I included react-native-webrtc ( https://github.com/oney/react-native-webrtc ), and modified SIP.js source code to use those. I got past WebRTC support errors, but I don't know if it actually works, because of the following issue.
- Attaching media: SIP.js expects to attach the call audio and video to <audio> and <video> elements in the browser (https://sipjs.com/guides/attach-media). Is there an existing implementation of a bridge or similar solution to use react native components with SIP.js call media?

(This is also posted on Stack Overflow at https://stackoverflow.com/questions/50569000/integrate-sip-js-with-react-native )

Thanks!

[Eric Green]

You will need to create your own session description handler. The intention of the session description handler included with SIP.js is that it will only work in web environments and when people would like to use it in other environments they will create their own. If you do create your own handler that works in a react native environment, we would certainly take it as a PR to SIP.js.

-Eric Green

[Francisco Valentin]

Hi,

We just started a prototype with SIP.JS and React Native and we are facing the same compatibility issues with mobiles. Was this submitted as a PR ? 

Robert, did you solve the attach media issues with a custom Session Description Handler? 

If there is some interest we could collaborate in the implementation.

Thanks, Francisco.

[rsn...@gmail.com]

Hi Francisco,

Unfortunately we never did create a custom session description handler or continue our attempt to use SIP.js with React Native.

As an interim solution, we used Voximplant, since they have a good react native module: https://github.com/voximplant/react-native-voximplant Their module is updated regularly, and I've had positive experiences with their responsive support team.

For the long term so that we can use our own servers, we're looking at using PJSIP with React Native. There is an existing module ( https://github.com/datso/react-native-pjsip ), but its video support is lacking, and it doesn't seem to be actively developed right now.

Do you think you will implement a custom SIP.js session description handler for use with React Native?

Thanks,
Robert

[Francisco Valentin]

Hello,

We need something to work with our own server infrastructure, so we will evaluate several options being the modified Session Description Handler one of them. 

PJSIP with React Native does not look that bad but I don't know how it will be maintained in the long term, while SIP.js looks more stable and well maintained.

Thanks, Francisco.

[rsn...@gmail.com]

Francisco,

If you do decide to pursue a SIP.js + React Native solution, let me know. I think that an RN Session Description Handler could benefit the community at large as well, since the current React Native PJSIP module is not actively maintained.

Thanks,
Robert

[Eric Green]

We would take this as a PR, but the maintenance for it would have to fall on the community.

[Francisco Valentin]

Is there any alternative in the roadmap for mobiles? I have seen that the mobile guides are no longer supported.

--
You received this message because you are subscribed to a topic in the Google Groups "SIP.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/sip_js/ZUP0FEZpz44/unsubscribe.
To unsubscribe from this group and all its topics, send an email to sip_js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/sip_js/b1addd98-acbf-4d8a-9194-e551606ec38b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Eric Green]

We are targeting support for Chrome on Android and Safari on iOS.

To unsubscribe from this group and all its topics, send an email to sip_js+unsubscribe@googlegroups.com.

[Mehdi Nourollah]

You can use this repo for sip integration https://github.com/telefon-one/react-native-sip2
I tried it with React Native and it's working out of the box ! 

To unsubscribe from this group and all its topics, send an email to sip_js+un...@googlegroups.com.

[anshk...@gmail.com]

It's not a difficult to integrate SIP.js with React Native. You'll just need react-native-webrtc along with sip.js any version and it'll does your job. Also, you won't need to use custom SDH to enable support of audio/video, SIP.js 0.16.x is supports by default with React Native.

[mbiriki koussai]

Hello guys, 

We are currently tryring both sip.js v0.16 and v0.20, on react-native with react-native-webrtc, and it doesn't work out of box...

Do you have a sample code for a simple invite ? We have some problem on SessionDescriptionHandler and peerconnection seems to be not implemented.

Which version of react-native-webrtc are you using ?

Thank you very much.  

[panzer dev]

Did you have sample code?

[Lobsang]

Integrating SIP.js with React Native for VoIP (Voice over Internet Protocol) applications requires a bit of work because SIP.js is primarily designed for web applications using WebRTC for real-time communication. React Native, on the other hand, is a framework for building native apps using JavaScript. To integrate SIP.js with React Native, you'll need to bridge the gap between web technologies and native mobile functionalities. Here's a step-by-step guide to help you get started:

1. Understand the Basics

SIP.js: A JavaScript library that enables developers to build SIP-based web applications. It primarily works in browsers that support WebRTC.
React Native : A framework for building native apps using JavaScript and React.

2. Use a WebRTC Library Compatible with React Native

Since SIP.js relies on WebRTC, you'll need a WebRTC library compatible with React Native. `react-native-webrtc` is a popular choice that provides WebRTC support for React Native apps.

Install react-native-webrtc : Add WebRTC support to your React Native app by installing `react-native-webrtc`.
 
 bash
  npm install react-native-webrtc
  ```

3. Bridge SIP.js with React Native

- Create a SIP.js Wrapper: You need to create a wrapper around SIP.js that utilizes `react-native-webrtc` for handling the media streams. This involves initializing SIP.js with the `react-native-webrtc` media stream objects.

- Initialization Example:
 
  ```javascript
  import { UA } from 'sip.js';
  import { mediaDevices } from 'react-native-webrtc';

  const configuration = {
    // Your SIP.js configuration here
  };

  const ua = new UA(configuration);

  ua.on('invite', (session) => {
    // Handle incoming calls
  });

  mediaDevices.getUserMedia({
    audio: true,
    video: false,
  }).then((stream) => {
    // Use the stream with SIP.js
  }).catch((error) => {
    // Handle errors
  });
  ```

4. Handling Audio and Video Sessions

Integrate your application logic to handle audio and video sessions. This involves using React Native components and state management to create UI components for making and receiving calls, handling call controls, and managing session states.

 5. Resources

- SIP.js Documentation**: Review the SIP.js documentation for in-depth understanding and advanced configurations.
- react-native-webrtc GitHub Repository: Check out the `react-native-webrtc` repository for documentation, issues, and community support.

Integrating SIP.js with React Native is a complex but rewarding process, enabling you to build powerful VoIP applications that leverage both web and native capabilities.

[SLUG_GUNNER]

Hey all, the last post on this thread is an AI generated response that doesn't even work so I'll share w/ you all the sauce to getting things working with react-native-webrtc and sip.js

Before getting into it, I got this working with the following package versions:
react-native: 0.68.2,
react-native-webrtc: ^124.0.0,

sip.js: ^0.21.2

If your setup looks different, you may run into some issues that are not covered on this post. More specifically, if you're running anything that looks older than those numbers, consider upgrading the packages.

On to it:
First, you'll need to setup react-native-webrtc. There's a well documented guide on the github repository to get it working. For Android, it's very important you read this carefully so you don't run into any issues. However these are the errors I experienced which are NOT documented on the guide:

1. On android, you might get a compile time error: .setForegroundServiceBehavior(NotificationCompat.FOREGROUND_SERVICE_IMMEDIATE); in MediaProjectionNotification.java. If you get this error, you'll have to edit that line out in the file MediaProjectionNotification.java. This is probably an issue caused because SDK version is too old and doesn't support that feature.
2. On android, you might not be able to compile due to this errror > Task :react-native-webrtc:mergeDebugShaders FAILED. This probably has something to do with npm. Deleting the node_modules/ directory and deleting the package-lock.json didn't resolve this issue, but using yarn did. In my experience, I've run into much less problems working on react native projects using yarn vs npm so simply use yarn (its a much better, faster package manager anyways).
3. On android, I was unable to get the microphone working on the emulator. This is not a problem with the library and its probably just an emulator setting but Consider running the debug app on a physical device if you can't get it working.

Second, install sip.js. As documented here, you'll have to import 'registerGlobals()' then call this function before attmepting to create a UserAgent. I prefer to do this in the index.js file, before registering the app entry point.

That's all you need to know about setting it up. From here, getting a phonecall working is specific to what kind of server you're running. In my experience, it worked with an Asterisk server. There's an official guide for getting that working.

Here is a working example of a context which tracks the state of the UserAgent the stream:

import React, {useState, useEffect} from 'react';

import {UserAgent, Registerer, SessionState, Invitation} from 'sip.js';

const SipClientContext = React.createContext();

const SipClientProvider = ({children}) => {

  const [userAgent, setUserAgent] = useState(null);

  const [registered, setRegistered] = useState(false);

  const [session, setSession] = useState(null);

  /**

   * Invitation is a Session

   * @param {Invitation} invitation

   */

  function onInvite(invitation) {

    // An Invitation is a Session

    const incomingSession = invitation;

    incomingSession.stateChange.addListener(newState => {

      switch (newState) {

        case SessionState.Establishing:

    // Implement a loader here

          break;

        case SessionState.Established:

          setSession(incomingSession);

          /**

           * incomingSession is the stream. So you can set this as a state and pass the stream to the RTCView to get video and audio.

           *

           * Example:

           * ```

            if (session !== null && !session.sessionDescriptionHandler)

            {

                setStream(session.sessionDescriptionHandler.remoteMediaStream);

            }

            ```

            then in the component:

            ```

                <RTCView

                  streamURL={stream.toURL()}

                  style={styles.stream} />

            ```

           */

          break;

        case SessionState.Terminated:

          setSession(null);

          break;

        default:

          break;

      }

    });

    let constrainsDefault = {

      audio: true,

      video: true,

    };

    const options = {

      sessionDescriptionHandlerOptions: {

        constraints: constrainsDefault,

      },

    };

    incomingSession.accept(options);

  }

  useEffect(() => {

    const userAgentOptions = {

      /**

       * credentials go here

       */

      delegate: {

        onInvite: onInvite,

      },

      transportOptions,

      uri,

    };

    const ua = new UserAgent(userAgentOptions);

    const registerer = new Registerer(ua);

    ua.start()

      .then(() => {

        registerer.register();

        setUserAgent(ua);

        setRegistered(true);

      })

      .catch(error => {

        console.error('Error registering with Asterisk server:', error);

        setRegistered(false);

      });

    return () => {

      if (userAgent) {

        userAgent.stop();

      }

      if (session) {

        session.bye();

      }

    };

  }, []);

  return (

    <SipClientContext.Provider value={{userAgent, registered, session}}>

      {children}

    </SipClientContext.Provider>

  );

};

export {SipClientContext, SipClientProvider};

tl;dr, read the documentation. If it doesn't work, upgrade your packages.

[Habtamu Asefa]

I don't think this is working.

setStream(session.sessionDescriptionHandler.remoteMediaStream);

throwns an error: Property 'remoteMediaStream' does not exist on type 'SessionDescriptionHandler'.

[SLUG_GUNNER]

I don't think this is working.

setStream(session.sessionDescriptionHandler.remoteMediaStream);

throwns an error: Property 'remoteMediaStream' does not exist on type 'SessionDescriptionHandler'.

Hi, sorry for the late reply. This is likely an issue with the type of stream the server is serving your client. I would log the object session.sessionDescriptionHandler to see what properties you need to work with. That being said, I decided it was a better solution to scrap the react-native-webrtc with sipjs, callkeep, push notifications, etc and simply just use the linphone-SDK (liblinphone). It's more manual work but you escape dependency hell and things just work.

[Yhenew Kassie]

Hi @SLUG_GUNNER,  any code samples / documentation on how you did it with linphone-SDK? I'm developing a react native app and looks like integrating SIP/Webrtc with freeswitch is a lot of mess.