Client
Using the Huddle 01 Flutter plugin you can build and get started with a simple p2p video chat application in minutes! Follow along this guide to know how:

Getting started

1. Installation

1
$ flutter pub add huddle01_flutter_sdk
Copied!
OR
add this in your project's pubspec.yaml
1
dependencies:
2
flutter:
3
sdk: flutter
4
huddle01_flutter_sdk: ^0.1.0
Copied!
and then run
1
$ flutter pub get
Copied!

2. Get your API Key

You can get your access keys in the Developer section of the Huddle01 Dashboard.

3. Importing into your application

1
import 'package:huddle01_flutter/huddle01_flutter.dart';
Copied!
In this documentation we use flutter_bloc package for state management.

4. Setup event listeners

Here we setup event emitters that are triggered at certain specific events from the package. These help with the global state management of the application.
1
_setupEventListeners({
2
required ConsumersBloc consumersBloc,
3
required ProducersBloc producersBloc,
4
required PeersBloc peersBloc,
5
required MeBloc meBloc,
6
}) {
7
// on adding a new consumer
8
emitter.on('addConsumer', (consumer) {
9
consumersBloc.add(ConsumerAdd(consumer: consumer));
10
});
11
// on removing an existing consumer
12
emitter.on('removeConsumer', (consumerId) {
13
consumersBloc.add(ConsumerRemove(consumerId: consumerId));
14
});
15
// adding a new producer
16
emitter.on('addProducer', (producer) {
17
producersBloc.add(ProducerAdd(producer: producer));
18
if (producer.source == 'webcam') {
19
meBloc.add(MeSetWebcamInProgress(progress: true));
20
}
21
});
22
// disable and remove an existing producer
23
emitter.on('removeProducer', (source) {
24
producersBloc.add(ProducerRemove(source: source));
25
if (source == 'webcam') {
26
meBloc.add(MeSetWebcamInProgress(progress: false));
27
}
28
});
29
// adding a new peer
30
emitter.on('addPeer', (peer) {
31
peersBloc.add(PeerAdd(newPeer: peer));
32
});
33
// removing an existing peer
34
emitter.on('removePeer', (peerId) {
35
peersBloc.add(PeerRemove(peerId: peerId));
36
});
37
// adding new consumer of the selected peer
38
emitter.on('addPeerConsumer', (consumer) {
39
peersBloc.add(
40
PeerAddConsumer(peerId: consumer.peerId, consumerId: consumer.id));
41
});
42
// removing an existing consumer of a selected peer
43
emitter.on('removePeerConsumer', (peerId, consumerId) {
44
peersBloc.add(PeerRemoveConsumer(peerId: peerId, consumerId: consumerId));
45
});
46
}
Copied!

5. Initialising Client repository and using available methods:

Client repository initialisation using RepositoryProvider and using join() to join the room.
1
child: RepositoryProvider<HuddleClientRepository>(
2
// provider to provide room client as an object to all the child widgets of this
3
lazy: false,
4
create: (context) {
5
// setup event listeners
6
_setupEventListeners(
7
consumersBloc: context.read<ConsumersBloc>(),
8
producersBloc: context.read<ProducersBloc>(),
9
peersBloc: context.read<PeersBloc>(),
10
meBloc: context.read<MeBloc>(),
11
);
12
// initialise blocs
13
MediaDevicesBloc mediaDevicesBloc =
14
context.read<MediaDevicesBloc>();
15
String audioInputDeviceId =
16
mediaDevicesBloc.state.selectedAudioInput!.deviceId;
17
String videoInputDeviceId =
18
mediaDevicesBloc.state.selectedVideoInput!.deviceId;
19
final meState = context.read<MeBloc>().state;
20
String displayName = meState.displayName;
21
String id = meState.id;
22
final roomState = context.read<RoomBloc>().state;
23
// url for connection, uses Huddle 01's alpha server link in room state
24
String url = roomState.url!;
25
26
Uri uri = Uri.parse(url);
27
28
return HuddleClientRepository(
29
peerId: id,
30
displayName: displayName,
31
url: url != null
32
? 'wss://${uri.host}:4443'
33
: 'wss://alpha.huddle01.com:4443',
34
roomId: uri.queryParameters['roomId'] ??
35
uri.queryParameters['roomid'] ??
36
randomAlpha(8).toLowerCase(),
37
audioInputDeviceId: audioInputDeviceId,
38
videoInputDeviceId: videoInputDeviceId,
39
)..join();
40
// using join() to join room with the given config
41
},
42
// Room is the route of the application where the video chat takes place
43
child: Room(),
44
)
Copied!

Other methods available:

    close()
1
context.read<HuddleClientRepository>().close();
Copied!
    enableWebcam()
    disableWebcam()
1
// enable webcam while initialising room to ask permission
2
context.read<HuddleClientRepository>().enableWebcam();
Copied!
    enableMic()
    disableMic()
    muteMic()
    unmuteMic()
1
// enable mic while initialising room room to ask permission
2
context.read<HuddleClientRepository>().enableMic();
3
4
// mute and unmute mic
5
context.read<HuddleClientRepository>().unmuteMic();
Copied!
For any help, reach out to us on Slack. We are available 24*7 at: https://bit.ly/3AsIsT7.
Last modified 1mo ago