Creating real-time communication and streaming apps with WebRTC

WebRTC is a popular choice for creating real-time communication and streaming applications. Especially in recent years with an increase in remote collaboration, voice and video call functionality is becoming an increasingly important aspect of web and mobile apps. This article provides an overview of applications and functionality that can be realised with WebRTC as well as looking at possible alternatives. We also want to provide some guideline on how to get started with WebRTC development and how to outsource development to experienced WebRTC developers.

Examples of streaming and real-time communication apps

The most common use case for WebRTC is voice and video call applications. This means that you can build software that allows your users to talk to each other optionally sharing a video stream from the camera. The difference to other call software such as Skype for instance is that the application can run in the browser or directly in your mobile app, meaning that your users don't need to install any additional software. Calls could be one to one or also in groups.
Of course additional data can be shared such as screen sharing, messaging, file sharing or any data that might come from a mobile sensor (e.g. location, accelerator, Bluetooth-paired devices and the like).

Another use-case for WebRTC is the creation of a webinar-like software. This is very similar to a group call with screen sharing functionality. However, several restrictions might occur such as limiting the permissions of participants whilst the organiser has full control over who can share the screen, speak, share video or write messages in a chat.

The last example would be a broadcasting-style application. Here only one entity, namely the broadcaster has the functionality to speak or share data whilst the functionality of the other users is heavily restricted on consuming the content.

What is WebRTC

WebRTC is a open-source project that allows you to add real-time communication to your app via a set of APIs. All major browsers are supported along with mobile platforms such as Android and iOS, meaning that communication between various devices can be established (Browse on PC, Smartphones, IoT devices). It does not only support voice and video calls but also allows for sharing of generic data to include, for instance, sharing of location, screen sharing, or file sharing.

Using WebRTC in a web app

When thinking about the functionality required to enable real-time communication most likely user-facing elements will come to mind: The frontend needs to allow for initiating of calls or meetings as well as having the functionality to accept a call or join a meeting. During the call, participants would need to turn on and off data streams such as voice or video. If custom data is shared during the call such as location, screens or files, this also needs to be reflected in the UI and implemented on the frontend part.

The most tangible part that needs to be added to is always the user interface (UI) which needs to reflect calling functionality such as starting a call / session, buttons to share additional data (video, screen, messages, files) and of course the ability to end a call.

In addition to the functionality on the client side, backend-related functionality along with the creation of servers are required for the creation of a WebRTC-based solution. In terms of backend functionality a form of signaling needs to be included which allows clients to establish peer-to-peer connections. A popular tech choice for signaling is the WebSocket protocol which allows for full-duplex communication channels. The calling intent along with the accepting of a call can be transmitted via WebSocket along with the required information to establish the direct connection between the clients. Hence you might need to extend your current backend stack with running WebSockets or similar technology.

Another aspect of WebRTC is the usage of STUN/TURN servers to improve call reliability. Hence setting up such server along with maintenance is another aspect that needs to be considered when creating a WebRTC-based solution.

Integrating WebRTC into mobile apps

For mobile platforms there are various WebRTC-related packages available that can be integrated into smartphone apps to add real-time communication capabilities. Especially for Android and iOS platform, mobile frameworks such as React-Native or Expo offer an easy way of integration. With the react-native-webrtc package (https://github.com/react-native-webrtc/react-native-webrtc) for instance, you can easily use a set of APIs in your mobile app that is very similar to the client side setup in a browser.

Costs of developing a WebRTC application

When looking at the costs or time required to implement real-time communication via WebRTC the simple answer is "it depends". The requirements for a simple prototype or minimum viable product (MVP) are typically way less than for a fully-fledged streaming app. Hence also the cost is very different.

A skilled WebRTC developer might be able to put together a simple prototype within hours or days, especially with prior experience and when building on top of existing WebRTC open source solutions. This is especially helpful for startups or companies that would like to demonstrate a real-time communication prototype to raise money or to validate a use-case. At this stage call reliability and the like is probably not much of a concern so that setting up STUN/TURN server could be postponed until the implementation of a production ready setup. The cost for adding communication functionality as a very simple prototype or MVP might start in the low four figure dollar range, depending on the requirements.

For the setup of production ready system or for the implementation of a feature rich real-time communication solutions costs will be significant higher and again depend on the app requirements.

Hiring a WebRTC developer

There are varous freelancing marketplaces such as fiver or upwork where you can find a WebRTC developer. Especially for smaller projects such as creating an initial setup or fixing issues with an existing WebRTC application this might be a good starting point. For larger or ongoing projects you might consider hiring a software developer with WebRTC knwoledge full-time.

An important aspect when hiring a WebRTC developer is prior experience. Of course any developer could learn the internals of WebRTC but this takes some time and there is a risk that a less experienced developer causes a delay for your project. When working on WebRTC apps a rather broad skill set is required which involves development tasks on the frontend (UI), backend (Websockets for signaling, STUN/TURN server) and possible mobile app development. Hiring an experienced WebRTC developer will ensure that your project is fully functional and delivered on time.

Please do not hesitate to contact us in case you are looking for support with creating or maintaining a WebRTC-based communication app. Over the past years we have worked on a couple of WebRTC-related services including integration of real-time communication in on of our own apps.

Alternatives

There are companies that offer real time communication software as a service: twilio or agora for instance offer ready to use APIs that you could integrate into your product so that you don't need to reinvent the wheel. Especially for a communication app without any specific or custom build features this might be a viable solution. On the other hand, if you need to share very specific data or have bespoke requirements then most likely you will not be able to use a out of the box solution but need rather custom development to include real-time communication in your app.