WebRTC Control is an add-on that brings you control over WebRTC API in your browser. Toolbar icon serves as a toggle button that enables you to quickly disable or enable the add-on (note: the icon will change color once you click on it). This add-on does not have a toolbar popup UI. Microsoft Edge now supports both WebRTC plus its own proprietary version, dubbed ORTC. Unfortunately, Edge does not allow you to disable either. You merely get the option to hide your local IP address over WebRTC connections, but not your public IP address.

1. Introduction

In this codelab, you'll learn how to build a simple video chat application usingthe WebRTC API in your browser and Cloud Firestore for signaling. Theapplication is called FirebaseRTC and works as a simple example that will teachyou the basics of building WebRTC enabled applications.

Note: Another option for signaling could be Firebase Cloud Messaging. However,that is currently only supported in Chrome and in this codelab we will focuson a solution that works across all browsers supporting WebRTC.

What you'll learn

• Initiating a video call in a web application using WebRTC
• Signaling to the remote party using Cloud Firestore

What you'll need

Before starting this codelab, make sure that you've installed:

• npm which typically comes with Node.js - Node LTS is recommended

2. Create and set up a Firebase project

Create a Firebase project

1. In the Firebase console, click Addproject, then name the Firebase project FirebaseRTC.

Remember the Project ID for your Firebase project.

Note: If you go to the home page of your project, you can see it in Settings >Project Settings (or look at the URL!)

1. Click Create project.

The application that you're going to build uses two Firebase services availableon the web:

• Cloud Firestore to save structured data on the Cloud and get instantnotification when the data is updated
• Firebase Hosting to host and serve your static assets

For this specific codelab, you've already configured Firebase Hosting in theproject you'll be cloning. However, for Cloud Firestore, we'll walk you throughthe configuration and enabling of the services using the Firebase console.

Enable Cloud Firestore

The app uses Cloud Firestore to save the chat messages and receive new chatmessages.

You'll need to enable Cloud Firestore:

1. In the Firebase console menu's Develop section, click Database.
2. Click Create database in the Cloud Firestore pane.
3. Select the Start in test mode option, then click Enable after reading thedisclaimer about the security rules.

Test mode ensures that you can freely write to the database during development.We'll make our database more secure later on in this codelab.

3. Get the sample code

Clone the GitHub repository from the command line:

The sample code should have been cloned into the FirebaseRTC directory.Make sure your command line is run from this directory from now on:

Import the starter app

Open the files in FirebaseRTC in your editor and change them according tothe instructions below. This directory contains the starting code for thecodelab which consists of a not-yet functional WebRTC app. We'll make itfunctional throughout this codelab.

4. Install the Firebase Command Line Interface

The Firebase Command Line Interface (CLI) allows you to serve your web applocally and deploy your web app to Firebase Hosting.

Note: To install the CLI, you need to install npm which typically comes withNode.js.

1. Install the CLI by running the following npm command:shnpm -g install firebase-tools

Note: Doesn't work? You may need to run the command using sudo instead.

1. Verify that the CLI has been installed correctly by running the followingcommand:shfirebase --version

Make sure the version of the Firebase CLI is v6.7.1 or later.

1. Authorize the Firebase CLI by running the following command:shfirebase login

You've set up the web app template to pull your app's configuration for FirebaseHosting from your app's local directory and files. But to do this, you need toassociate your app with your Firebase project.

1. Associate your app with your Firebase project by running the followingcommand:shfirebase use --add

2. When prompted, select your Project ID, then give your Firebase project analias.

An alias is useful if you have multiple environments (production, staging, etc).However, for this codelab, let's just use the alias of default.

1. Follow the remaining instructions in your command line.

5. Run the local server

You're ready to actually start work on our app! Let's run the app locally!

1. Run the following Firebase CLI command:shfirebase serve --only hosting

2. Your command line should display the following response:hosting: Local server: http://localhost:5000

Webrtc Edge Android

We're using the Firebase Hosting emulator to serve our app locally. The web appshould now be available from http://localhost:5000.

1. Open your app at http://localhost:5000.

You should see your copy of FirebaseRTC which has been connected to yourFirebase project.

The app has automatically connected to your Firebase project.

6. Creating a new room

In this application, each video chat session is called a room. A user can createa new room by clicking a button in their application. This will generate an IDthat the remote party can use to join the same room. The ID is used as the keyin Cloud Firestore for each room.

Each room will contain the RTCSessionDescriptions for both the offer and theanswer, as well as two separate collections with ICE candidates from each party.

Your first task is to implement the missing code for creating a new room withthe initial offer from the caller. Open public/app.js and find the comment //Add code for creating a room here and add the following code:

The first line creates an RTCSessionDescription that will represent the offerfrom the caller. This is then set as the local description, and finally writtento the new room object in Cloud Firestore.

Next, we will listen for changes to the database and detect when an answer fromthe callee has been added.

This will wait until the callee writes the RTCSessionDescription for theanswer, and set that as the remote description on the callerRTCPeerConnection.

Webrtc Edge Chromium

7. Joining a room

The next step is to implement the logic for joining an existing room. The userdoes this by clicking the Join room button and entering the ID for the roomto join. Your task here is to implement the creation of theRTCSessionDescription for the answer and update the room in the databaseaccordingly.

In the code above, we start by extracting the offer from the caller and creatinga RTCSessionDescription that we set as the remote description. Next, we createthe answer, set it as the local description, and update the database. The updateof the database will trigger the onSnapshot callback on the caller side, whichin turn will set the remote description based on the answer from the callee.This completes the exchange of the RTCSessionDescription objects between thecaller and the callee.

8. Collect ICE candidates

Before the caller and callee can connect to each other, they also need toexchange ICE candidates that tell WebRTC how to connect to the remote peer.Your next task is to implement the code that listens for ICE candidates and addsthem to a collection in the database. Find the function collectIceCandidatesand add the following code:

This function does two things. It collects ICE candidates from the WebRTC API andadds them to the database, and listens for added ICE candidates from the remotepeer and adds them to its RTCPeerConnection instance. It is important whenlistening to database changes to filter out anything that isn't a new addition,since we otherwise would have added the same set of ICE candidates over and overagain.

Webrtc Edge Disable

9. Conclusion

In this codelab you learned how to implement signaling for WebRTC using CloudFirestore, as well as how to use that for creating a simple video chatapplication.

To learn more, visit the following resources: