Video Chat using WebRTC and Firestore

In this article, you will be explained how a video chat app operate that using WebRTC and realtime database Firestore.

If you have not known about WebRTC yet then this is a sum up from Mozilla Developers Network:

WebRTC (Web Real-Time Communications) is a technology which enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary. The set of standards that comprise WebRTC makes it possible to share data and perform teleconferencing peer-to-peer, without requiring that the user installs plug-ins or any other third-party software.

WebRTC have some terms that you need to know such as ICE, TURN, STUN, NAT, SDP, PeerConnection, ICECandidate, Signal Channel, Offer SDP, Answer SDP, DataChannel…Pls read this document and this document to have a look about them.

Now you need to know the flow to connect two devices together. Assume device A want to transfer media to device B and vice versa then what two devices need to do?

The flow

1. Two devices create a peer connection with configurations about STUN servers, TURN servers, input sources such as input audio, input video.
2. Device A and device B send a request to STUN server to get its public IP address.
3. Device A send offer SDP and ICE candidates to device B thru signaling server.
4. Device B also send answer SDP and ICE candidates to device A thru signaling server.
5. At this time, two devices could talk together thru a peer connection.

It is enough for theory, now you can download my project and test it.

Note: this project mainly based on WebRTC-iOS project of statel, but I edited it to use Firestore instead of nodejs server and added a feature for reset peer connection, so you can start over again that no need to restart the app.

Steps to run the project

1. Clone the project at: https://github.com/quangtqag/ChatVideo
2. Create an app on Firebase Console and config type of database is Firestore and test mode. If you have not known yet about Firestore then I recommend you experiment with this codelab.
3. Download GoogleService-Info.plist and import it into the project.
4. Run the app on two devices.

Note: you can test this app using a device and a simulator, but video feature will not operate on simulator. So if you have two devices then you are good to go.

After you run the app you will see the screen as folllow:

Steps to test

1. At first, you need to choose you are Tom or Jerry, if device A choose Tom then device B you need to choose Jerry
2. Device A press Send Offer button to send offer SDP to device B.
3. Device B press Send Answer button to send answer SDP to device A.
4. After that you will see WebRTC status changed into connected.
5. You try to say something on device A and that voice will be emitted on device B. That’s great :]
6. To see video, both devices just press Video button. That’s so cool. Press back button to come back.
7. Press End Call button to close peer connection and create a new one.
8. You can try it again by go to step 2.

Some code need to know

Here I will specify some important codes that you need to know

Create and config peer connection

To create a peer connection you need to pass a configuration that contains STUN and TURN servers and some other infos.

After that you create audio track, video track and add them into peer connection as follow:

Create local offer SDP and send it to the other person thru Firestore

Send local candidates to the other person thru Firestore

After that peer connection auto generate local candidates. You also need to send them to the other person.

Listen remote SDP and Candidates

Device B listen SDP and Candidate data and add it into the peer connection

Send answer SDP to device A

Device B create answer SDP and send it along with Candidates to device A thru Firestore

Close peer connection

Close peer connection, clear Firestore, reset variables and re-create new peer connection, so it ready for new session.

That’s all about how video chap apps operate.

Additional, you can research more about PushKit framework, CallKit framework to create robust video chat apps as Facebook Messenger, Whatsapp, Skype…

Please Support Me!

If this post is useful, please support me by trying my free Unimal app. Thanks for your support!