React Native Video Call App Free | Webrtc | From Scratch
Source code available in patreon: https://www.patreon.com/posts/54626774
This video show to create a React native video call app using webrtc and firestore from scratch. This video includes complete step by step process to create this app.
Timestamp:
0:00 Demo
0:18 Creating Project
0:43 Setup for react native webrtc
1:46 Firebase setup
3:02 Creating simple components.
11:31 Webrtc Video call code
1. Creating the project:
Project uses expo bare workflow, The firebase native modules are only supported in expo bare workflow.
Build commands: (All the dependencies)
---------------------------------------------------------------------
expo init videoCall
cd videoCall
npm add @react-native-firebase/app @react-native-firebase/firestore @react-navigation/native @types/react-native-vector-icons react-native-webrtc react-native-vector-icons
---------------------------------------------------------------------
2. Setup for react native webrtc library:
We will be using react native webrtc for creating the video call app.
Link:
---------------------------------------------------------------------
https://github.com/react-native-webrtc/react-native-webrtc
---------------------------------------------------------------------
IOS: Please complete steps given in the repo. You will be able to follow along.
3. Firebase setup:
If you already don’t have a Firebase project, Please create as show. Otherwise you can use the existing project for this step. Copy the google-services.json file downloaded from firebase to Project-location/android/apps folder.
If the firestore database is not created, create it in test mode ( If you created in production mode, check the rules tab in firestore database)
**** MAKE SURE RULES ALLOW YOU TO ACCESS FIRESTORE ****
Code for Firebase setup:
-------------------------------------------------------------------------------
classpath'com.google.gms:google-services:4.3.4'
apply plugin: 'com.google.gms.google-services'
-------------------------------------------------------------------------------
As show in the video, Use the version that will be provided during the app creation.
• IOS setup:
-------------------------------------------------------------------------------
https://rnfirebase.io/#3-ios-setup
-------------------------------------------------------------------------------
Complete this steps, you will be able to follow along.
3.Creating simple components:
This step builds all the components required by the app.
• Buttons: Simple circle button component. Used to show call pick up and hang up.
• Video: Used to display local stream and remote stream. (camera views)
• Getting call: Used to display a caller image with option to pick up or hang up.
*All the dependency for this step is installed above.
4. Webrtc Video call code:
We will write the code for making call using webrtc in this step.
- We will exchange the ICE candidate from caller to callee through fireabse. ( we can use any real time update method for this step)
- There is no server involved for making this call. Caller and callee will directly communicate with each other
The flow: (Simple)
- We create an offer on click of call button.
- We send it to firestore. other party is registered for an event for offer.
- Once the app receives offer, it will display getting call component( I have used static image here ) with option to answer or decline. If you answer the call. We will create the answer object for the call and send it to caller through firestore.
- Once caller receives the answer, we will start the call.
Things used:
Visual studio, React native, expo, Firebase, react navigation.
Audio:
The Life and Death of a Certain K. Zabriskie, Patriarch by Chris Zabriskie is licensed under a Creative Commons Attribution 4.0 license. https://creativecommons.org/licenses/by/4.0/
Source: http://chriszabriskie.com/vendaface/
Artist: http://chriszabriskie.com/
TAGS:
react native
react native firebase
react native firebase tutorial
react native
react native firebase
react native fcm
react native firebase storage
react native firebase tutorial
firebase with react native
react native with firebase
react native video call
react native video chat
video call react native
react native webrtc video call example
react native video chat app
react native webrtc video call
react native video calling app
react native video conference
react native expo video call
react native video call
react native video
video react native react native video call react native video chat video call react native react native webrtc video call example react native video chat app react native webrtc video call react native video calling app react native video calling app react native video call sdk video call app video call react native react native firebase react native firebase storage react native firebase tutorial
andriajah