Building a Flutter App with Huddle01

Walkthrough

The following guide explains how you can integrate audio/video into your Flutter mobile-app seamlessly using the Huddle01 Flutter SDK.

Installation

Install huddle01_flutter_client in your flutter app

To power your Flutter dApp with audio communication using Huddle01 install the following:

  flutter pub add huddle01_flutter_client

Handling Permissions

Before you can start using the Huddle01 SDK, you need to enable your app to handle some permissions required for audio/video communication.

Android

Add the following permissions to your AndroidManifest.xml file:

<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<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.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

iOS

Add the following permissions to your Info.plist file:

<key>NSMicrophoneUsageDescription</key>
<string>{YOUR_SDK_APP} wants to use your microphone</string>
<key>NSCameraUsageDescription</key>
<string>{YOUR_SDK_APP} wants to use your camera</string>
<key>NSLocalNetworkUsageDescription</key>
<string>{YOUR_SDK_APP} App wants to use your local network</string>
<key>NSBluetoothAlwaysUsageDescription</key>
<string>{YOUR_SDK_APP} needs access to bluetooth to connect to nearby devices.</string>

Initialization of project

Head over to API Keys Page and connect your wallet to get your project credentials:

API Key
projectId

Once done, you can initialize your project with the HuddleClient class by passing in your projectId.

app.dart

import 'package:huddle01_flutter_client/huddle01_flutter_client.dart';
 
String projectId = 'YOUR-PROJECT-ID';
String roomId = 'YOUR-ROOM-ID';
 
// Initialize your huddleClient
HuddleClient huddleClient = HuddleClient(projectId);

Joining and leaving the room

Once you initialise huddleClient you can access various methods such as joinRoom. You can generate roomId using this API (opens in a new tab) and an access token to join that particular room using our Server SDK (opens in a new tab). The access token should always be generated on a backend server.

Add the joinRoom() and leaveRoom() methods for joining and leaving functionalities.

app.dart

  import 'package:flutter/material.dart';
  import 'package:huddle01_flutter_client/huddle01_flutter_client.dart';
 
  class MeetingScreen extends StatefulWidget {
    const MeetingScreen({super.key});
 
    @override
    State<MeetingScreen> createState() => _MeetingScreenState();
  }
 
  class _MeetingScreenState extends State<MeetingScreen> {
    String projectId = 'YOUR-PROJECT-ID';
    String roomId = 'YOUR-ROOM-ID';
    String accessToken = 'YOUR-ACCESS-TOKEN';
 
    HuddleClient huddleClient = HuddleClient(projectId);
 
 
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text("My Meeting App"),
        ),
        body: Column(children: [
          TextButton(
            child: const Text('JOIN_ROOM'),
            onPressed: () {
                huddleClient.joinRoom(roomId, token);
            },
          ),
          TextButton(
            child: const Text('LEAVE_ROOM'),
            onPressed: () {
                huddleClient.leaveRoom();
            },
          ),
        ]),
      );
    }
  }

Clicking on the JOIN_ROOM button, will make the user join the room and will allow them to send/receive media with other participants.

Enabling and Disabling Audio and Video

Here, we are using a term PRODUCE which means sending your audio/video stream across to the other peer who will CONSUME (or receive) the streams.

Audio

The enableAudio method enables the local microphone and starts producing the audio stream with the label audio. The disableAudio method stops the local audio stream and also stops producing the audio stream with remote peers.

Video

The enableVideo method enables the local microphone and starts producing the video stream with the label video. The disableVideo method stops the local video stream and also stops producing the video stream with remote peers.

These functions are available on the huddleClient.localPeer object.

app.dart

    import 'package:flutter/material.dart';
    import 'package:huddle01_flutter_client/huddle01_flutter_client.dart';
 
    class MeetingScreen extends StatefulWidget {
      const MeetingScreen({super.key});
 
      @override
      State<MeetingScreen> createState() => _MeetingScreenState();
    }
 
    class _MeetingScreenState extends State<MeetingScreen> {
      String projectId = 'YOUR-PROJECT-ID';
      String roomId = 'YOUR-ROOM-ID';
      String accessToken = 'YOUR-ACCESS-TOKEN';
 
      HuddleClient huddleClient = HuddleClient(projectId);
 
 
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("My Meeting App"),
          ),
          body: Column(children: [
            TextButton(
              child: const Text('JOIN_ROOM'),
              onPressed: () {
                  huddleClient.joinRoom(roomId, token);
              },
            ),
            TextButton(
              child: const Text('LEAVE_ROOM'),
              onPressed: () {
                  huddleClient.leaveRoom();
              },
            ),
            TextButton(
              child: const Text('ENABLE_AUDIO'),
              onPressed: () {
                  huddleClient.localPeer.enableAudio();
              },
            ),
            TextButton(
              child: const Text('DISABLE_AUDIO'),
              onPressed: () {
                  huddleClient.localPeer.disableAudio();
              },
            ),
            TextButton(
              child: const Text('ENABLE_VIDEO'),
              onPressed: () {
                  huddleClient.localPeer.enableVideo();
              },
            ),
            TextButton(
              child: const Text('DISABLE_VIDEO'),
              onPressed: () {
                  huddleClient.localPeer.disableVideo();
              },
            ),
          ]),
        );
      }
    }

Show remote peers in the room

Remote peers are peers who are present in the room. It doesn't include local peer.

    import 'package:flutter/material.dart';
    import 'package:huddle01_flutter_client/huddle01_flutter_client.dart';
 
    class MeetingScreen extends StatefulWidget {
      const MeetingScreen({super.key});
 
      @override
      State<MeetingScreen> createState() => _MeetingScreenState();
    }
 
    class _MeetingScreenState extends State<MeetingScreen> {
      String projectId = 'YOUR-PROJECT-ID';
      String roomId = 'YOUR-ROOM-ID';
      String accessToken = 'YOUR-ACCESS-TOKEN';
 
      HuddleClient huddleClient = HuddleClient(projectId);
 
      RemotePeer getRemotePeerId(String peerId) {
        return huddleClient.room.getRemotePeerById(peerId);
      }
 
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("My Meeting App"),
          ),
          body: Column(children: [
            TextButton(
              child: const Text('RemotePeer Role'),
              onPressed: () {
                  print(getRemotePeerId("PEER-ID").role);
              },
            ),
            TextButton(
              child: const Text('RemotePeer Labels'),
              onPressed: () {
                  print(getRemotePeerId("PEER-ID").labels);
              },
            ),
          ]),
        );
      }
    }

You're all set! Happy Hacking! 🎉

For more information, please refer to the SDK Reference.

Quickstart Start from an example