DEV Community

Cover image for A Comprehensive Guide to Flutter-WebRTC
Aditya Thakur
Aditya Thakur

Posted on

A Comprehensive Guide to Flutter-WebRTC

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.

Image description

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
Enter fullscreen mode Exit fullscreen mode

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.

Flutter web-app demo

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

P2P Flutter WebRTC demo

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.

Sharing the offer

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.

Sharing the answer

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

Sharing a candidate

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

P2P done using WebRTC

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.

Discussion (1)

Collapse
hamitdemir profile image
Hamit Demir

Thanks for this great post. Ant Media Server announced the new WebRTC Flutter SDK for free. You may want to check out.