Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native - Show incoming video call screen in Android (VOIP app) [closed]

I am trying to implement video calling feature in react native app. I have used React native twilio video webrtc. I have implemented the same and got it working.

I don't exactly know the flow of Video calling in mobile apps. The flow which I am using for video calling is as follows:

  1. User 1 taps to call User 2
  2. Your app generates a unique name for a Room. Perhaps a combination of the two user's IDs.
  3. User 1 connects to Room with generated unique name
  4. Using FCM, send message of high priority with the unique name of the Room and token to User 2
  5. User 2 to receives notification and you display a ringing UI(even when the app is killed and phone is locked)
  6. User 2 accepts and connects to the same Room

Now I am stuck on point 5. I am sending the FCM notification(which shows up in tray (edit: now using voip notif) to user2 and now I need to show ringing UI on user2's mobile even if the app is killed and phone is locked. How can I achieve this?

I guess there is a package called react-native-callkit, which I should be using along with PushKit for the same. But the problem is with android flow. PushKit and CallKit is not supported in android. So, when app is in killed state the notification appears I need to grab the control and display ringing UI and wake the screen if the phone is locked and app is killed.

Some Confusions

Is there any special type of push notification which doesn't get displayed in the tray? (edit: data messages and VOIP notif I guess)

Is there any other package than react-native-callkit(for displaying ringing UI) which can be used for both android and ios?

like image 749
Shivam Avatar asked Oct 26 '18 10:10

Shivam


People also ask

What is React Native callkeep for Android?

On android, native code was written so that answering the app from the lockscreen would start the react native app and navigate you to the correct screen. After these adjustments the React Native callkeep library ended up being a great fit for this project, performing all the required functionality.

How do I use Android bridging with React Native?

The android bridging documentation from React Native ( Found here) has all of the necessary steps required to set up the java module and call it from within your app. Below is an example of the java module I created to start the app activity and request the user to unlock their phone.

How to access the camera and microphone in React Native?

In our React Native project, we need to set up the packages manually as well as configure permissions to access the camera and microphone for both Android and iOS platforms. But first, we need to install the necessary packages, which are react-navigation and react-native-twilio-video-webrtc, by running the following command in our project terminal:

How to play a video in React Native?

To play a video in React Native we are going to use Video and MediaControls components from react-native-video and react-native-media-controls libraries. For this example, We are going to play a simple video with MediaControls.


1 Answers

Twilio developer evangelist here.

Android doesn't have CallKit, but it does provide the ConnectionService to allow you to build incoming call screen notifications. There's not a lot I can find that connects ConnectionService with React Native, so you may have to check out the Android examples and build this yourself.

Sorry I can't be of more help.

like image 85
philnash Avatar answered Oct 12 '22 21:10

philnash