How to Build Flutter WebRTC Apps [2023 Updated]

Flutter WebRTC is a powerful technology that allows developers to create real-time communication apps. This guide’lwe’lllore the step-by-step process of building WebRTC apps using Flutter with ZEGOCLOUD, from setup to implementation.

What is WebRTC?

WebRTC (Web Real-Time Communications) is a real-time communication technology that allows network applications or sites to establish a peer-to-peer (Peer-to-Peer) connection between browsers without intermediaries to achieve video streaming and/or the transmission of audio streams or other arbitrary data.

WebRTC is not just for building desktop apps; it can be used to create iOS and Android apps too. The main difference between WebRTC for desktop and mobile apps is that you need to use a third-party library for the browser on mobile devices to access the camera and microphone.

Build Flutter WebRTC Apps with Video Conference Kit

Creating a flutter WebRTC video call application from scratch can be challenging, time-consuming, and require much technical knowledge. Fortunately, ZEGOZEGOCLOUD’sits provide prebuilt components that allow developers to build robust and scalable applications quickly and easily.

One of ZEGOZEGOCLOUD’st popular UIKits is the Video Conference Kit, designed to help developers build video conferencing applications using Flutter WebRTC. This UIKit is a set of customizable components that enable developers to create high-quality video conferencing apps without worrying about technical details.

The Video Conference Kit has many features that make it a reliable and efficient toolkit for building Flutter Webrtc video call applications. Some of these features include:

1. One-to-One Video Calls

This feature allows users to have private video conversations with other individuals and offers high-quality video and audio with low latency, making the video call experience smooth and seamless. The Video Conference Kit also provides noise suppression and echo cancellation features, ensuring that the audio quality remains clear even in noisy environments.

2. Group Video Calls

The Video Conference Kit allows users to have multiple participant group video calls. It supports up to 100 participants per video call, making it ideal for large meetings or webinars. This Video Conferencing API also provides features such as speaker identification and active speaker tracking, which allows participants to know who is speaking and helps them focus on the conversation.

3. Customizable UI Components

The Video Conference Kit provides developers with customizable UI components that they can use to create a unique user experience for their applications. Developers can customize the appearance of the video call screen, the buttons, the chat interface, and more.

4. Scalable Infrastructure

ZEGOZEGOCLOUD’srastructure is designed to be scalable, enabling developers to build applications that can handle any number of users. The infrastructure also offers global coverage, ensuring users can access the video conferencing application from anywhere globally with low latency and high reliability. Additionally, the infrastructure provides advanced security features such as end-to-end encryption, ensuring that the video call data remains secure and private.

Steps to Build WebRTC Apps with Flutter

Follow the steps below to create your WebRTC video conference app using ZEGOZEGOCLOUD’seo Conference Kit:

1. Add `ZegoUIKitPrebuiltVideoConference` as dependencies

Execute this code in your projproject’st directory to add the dependency.

flutter pub add zego_uikit_prebuilt_video_conference

2. Import the SDK

Import the prebuilt Video Conference Kit SDK into your Dart code.

import 'package:zego_uikit_prebuilt_video_conference/zego_uikit_prebuilt_video_conference';

3. Utilize ZegoUIKitPrebuiltVideoConference in your project.

Retrieve your projproject’snd appSign from ZEGOCLOUD Admin Console. Specify userID and userName for Video Conference Kit connection. Generate or create a conferenceID for the desired video conference.

class VideoConferencePage extends StatelessWidget {
  final String conferenceID;

  const VideoConferencePage({
    Key? key,
    required this.conferenceID,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(

      child: ZegoUIKitPrebuiltVideoConference(
        appID: YourAppID, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
        appSign: YourAppSign, // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
        userID: 'user_id',
        userName: 'user_name',
        conferenceID: conferenceID,
        config: ZegoUIKitPrebuiltVideoConferenceConfig(),
      ),

    );
  }
}

Initiate a video conference by accessing. VideoConferencePage.

4. Configure your project

For seamless integration with your app, configuration of your setup is required. Follow the steps below to do so:

Android

For Flutter 2. x.x projects, adjust the compileSdkVersion to 33 in your_project/android/app/build.gradle file.
Include app permissions by opening your_project/app/src/main/AndroidManifest.xml file and adding the following code:

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

Prevent code obfuscation.

To avoid obfuscation of SDK public class names, perform the following steps:

a. Create a proguard-rules.pro file <strong>in</strong> your_project > android > app folder with the following content:

-keep class .zego. { *; }

b. Add the following configuration code to the release section of your_project/android/app/build.gradle file:

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

iOS

To grant permissions, access your_project/ios/Runner/Info.plist and add the following code to the dict section:

<key>NSCameraUsageDescription</key>
<string>Access permission to camera is required.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Access permission to microphone is required.</string>

Conclusion

Building a Flutter WebRTC app can be made easier using ZEGOZEGOCLOUD’sits, particularly the Video Conference Kit. By following this step-by-step Flutter WebRTC tutorial and utilizing this kit’kit’stures, developers can easily create robust and scalable video conferencing applications.