Integrating Video SDK in Flutter: Step-by-Step Guide

Debangan Ganguli -

In today's digital age, video communication has become an essential part of our daily lives. Whether it's for business meetings, online education, or social interactions, reliable and seamless video communication is crucial. This is where Dyte Video SDK comes into play, offering a powerful solution for integrating real-time video capabilities into your Flutter application. In this blog, we'll walk you through the process of integrating the Dyte Video SDK with Flutter, enabling you to build feature-rich video applications.

Here's a quick read on must-have features in a Video SDK.

What is the Dyte Video SDK?

Dyte Video SDK is a developer-friendly tool that allows you to embed real-time video and audio communication features into your web and mobile applications. It offers a set of APIs and components that make it easy to create interactive and engaging video applications.

Prerequisites

Before we dive into the integration process, make sure you have the following prerequisites in place:

  • Flutter Environment: You should have a working Flutter environment set up on your development machine. If you haven't already, follow the official Flutter documentation to get started.
  • Dyte Account: Sign up for a Dyte account on the Dyte website if you haven't already. You'll need a mechanism to retrieve the authToken from your server side, which you would have obtained as part of the Add Participant call.

Steps to Integrate Dyte Video SDK with Flutter

Step 1: Install the SDK

Install the SDK from pub.dev:

dartCopy code
flutter pub add dyte_uikit

Step 2: Configure permissions for Android and iOS

For Android:

  • Set compileSdkVersion to 33 and minSdkVersion to 23 inside the build.gradle file located at <project root>/android/app/build.gradle:
gradleCopy code
defaultConfig {
    ...
    compileSdkVersion 33
    minSdkVersion 23
    ...
}

For iOS:

  • Set the minimum deployment target for your Flutter app to 13.0 or higher.
  • Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist, to request camera and microphone permissions:
xmlCopy code
<key>NSCameraUsageDescription</key>
<string>For people to see you during meetings, we need access to your camera.</string>
<key>NSMicrophoneUsageDescription</key>
<string>For people to hear you during meetings, we need access to your microphone.</string>

Step 3: Configure a Dyte Video meeting

To initiate a Dyte Meeting for any participant, you only need to pass the authToken as an argument. This token can be obtained via the Add Participant API. After obtaining the authToken, create the DyteMeetingInfoV2 object:

dartCopy code
final meetingInfo = DyteMeetingInfoV2(authToken: '<auth_token>');

Step 4: Initialize the SDK

DyteUIKit is the main class of the SDK. It is the entry point and the only class required to initialize Dyte UI Kit SDK. To initialize it, pass the DyteUIKitInfo object as an argument:

dartCopy code
final uikitInfo = DyteUIKitInfo(
    meetingInfo,
    // Optional: Pass the DyteDesignTokens object to customize the UI
    designToken: DyteDesignTokens(
        colorToken: DyteColorToken(
            brandColor: Colors.purple,
            backgroundColor: Colors.black,
            textOnBackground: Colors.white,
            textOnBrand: Colors.white,
        ),
    ),
);
final uiKit = DyteUIKitBuilder.build(uiKitInfo: uikitInfo);

You can learn more about the customization of the UI Kit in the Design System section.

Step 5: Launch the meeting UI

To launch the meeting UI, simply call the loadUI() method of the DyteUIKit object, which returns a Widget. You can then push this widget as a page to initiate the flow of the prebuilt Flutter UI Kit:

dartCopy code
import 'package:dyte_uikit/dyte_uikit.dart';
import 'package:flutter/material.dart';

class DyteMeetingPage extends StatelessWidget {
  const DyteMeetingPage({super.key});

  @override
  Widget build(BuildContext context) {
    ...
    return uiKit.loadUI();
  }
}

Voila! You're all done. Here is the pictorial representation of all the configuration options passed.

Conclusion

Integrating Dyte Video SDK with Flutter enables you to build powerful and interactive video communication applications. By following the steps outlined in this guide, you can get started quickly and take advantage of Dyte's robust video capabilities to create feature-rich applications tailored to your needs.

Further resources and reading

Happy coding!