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:
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?
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.
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.
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:
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With