React Native Video Calling App – Part 4

Welcome to React Native Video Calling App Tutorial part 4. In the previous tutorial we add login and disconnect feature. When any user login, other users were getting notified about new user. Similarly. when any user got disconnected, other users were getting notified about user leaving the chat.

In this part of tutorial, we will add feature of calling. So now, one user will be able to call another user in chat room. Also will put a check, if a user is busy or available for call. So let get going.

First we will change our web client code and our new code will look something like this :

In the above code we have added another text box and a button named ‘Call User’. So, when the user will enter any other user’s username and click the button beside it, then ‘call_user’ function will be called. In the call user function we check if user is not clicking the button with blank text box. Then we are setting busy variable is true so that if another user tries to call, they get notification user busy. Next, we are saving the username of user to whom call is being made in ‘incallwith’ variable. Finally, we are sending ‘call_user’ type message to the server so that server can pass it to the user we are calling.

Once the server passes the ‘call_user’ message to another user, control comes to the switch statement ‘answer’ case and ‘onAnswer’ function is called. In onAnswer function the calling users info is passed. In onAnswer function we first check if user is not busy with another user. Then we notify the user that user with username ‘data.callername’ is calling. Now, user can accept or reject the call.

Now lets see what new stuffs are going on in the server side. Following is the updated server side code :

In the above code we have added ‘call_user’ case. In this new case we are first checking if the user being called exist in chat room. If the user exist, then we simply pass the ‘answer’ type message to the user being called. If user is not in chat room, then we simple notify the calling user that user being called is offline.

So, in this way we have implemented the calling feature. In next part we will implement user receiving the call and rejecting the call (,  definitely not both at the same time 😉 ). Subscribe to our news-letter to stay tuned for the latest happenings about React Native.

Video Tutorial 

Demo