A Comprehensive Guide to Flutter-WebRTC
Tags: flutter, webrtc, dart, tutorial
Published: 2022-03-21 11:10:08

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hdz9nuz69ziwnfun15h.png)



**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:
```bash
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.](https://www.100ms.live/blog/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](https://github.com/adityathakurxd/webrtc_flutter).
 
![Flutter web-app demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iidjgjv2bv7qjs37zhur.png) 

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

![P2P Flutter WebRTC demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elx4zynaynnec681ncos.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozbhgfkbrmykzq5m7yva.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrbzpdcw3lptm2vecy9e.png)

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

![Sharing a candidate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjtnbp55rfhzzj9f1tg2.png)
 
This should create the WebRTC connection, and the remote video should show up as seen below: 

![P2P done using WebRTC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pm85sfqu5iuhgxgn8woj.png)
 
**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.