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 inyour_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.
Sign up now for ZEGOZEGOCLOUD’seo Conferencing and get 10,000 free minutes to start.
Talk to Expert
Learn more about our solutions and get your question answered.