A Comprehensive Guide to Flutter-WebRTC

#flutter #webrtc #dart #tutorial

Through the pandemic, we saw the rise in audio/video calling apps. A lot of people wanted to communicate with their loved ones around the globe and, video conferencing apps like Zoom, Google Meet stepped in to make that possible. Twitter introduced Spaces and Discord added Stages. Even audio-only apps like Clubhouse became a rage.

Naturally, developers have been asking the same question these days: How do I establish real-time audio and video in my Flutter app? If you’re curious about how to build a simple app using Flutter WebRTC, you’re in the right place.

This article will discuss WebRTC is and how can it be integrated with Flutter. It will also explore the options available to you in order to scale your operations.

WebRTC enables real-time, audio-video communication between websites and devices. It is an open-source project that allows direct P2P communication without installing additional programs or plugins. It is supported by all modern browsers and can also be embedded into native applications using available libraries.

To use WebRTC in Flutter, there’s a package available called the flutter_webrtc

Run the following command to add the package to project dependencies:

flutter pub add flutter_webrtc

The entire process of integration with Flutter is fairly easy but not very well documented. For a detailed, step-by-step tutorial on the same, have a look at this comprehensive guide to Flutter WebRTC.

WebRTC Flutter Demo

If you follow the steps in the linked article, you’ll be able to build a simple video conferencing app with Flutter that uses WebRTC to connect two peers for video communication and audio enabled.

You can find the complete code here.

Copy the URL and paste it into a new browser window to create two peers.

Click on the ‘Offer’ button in window 1 to generate an offer. It will output the offer to the console accessible using developer tools on Chrome.

Copy-paste this offer into the TextField of window 2 and click on the ‘Set Remote Description’ button. That should set the remote description by calling the underlying function.
Now, click on ‘Answer’ to generate an answer and copy-paste it in the TextField of window 1.

Lastly, copy a candidate from window 2, paste it in the window 1 TextField, and click on the ‘Set Candidate’ button.

This should create the WebRTC connection, and the remote video should show up as seen below:

And, that’s it. 🎉

As you can see, the process of building up a Flutter WebRTC app may seem a little complicated, but once you get the hang of it, it’s not too difficult to accomplish.