> For the complete documentation index, see [llms.txt](https://huddle01-2.gitbook.io/huddle01/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huddle01-2.gitbook.io/huddle01/flutter-sdk/flutter-plugin-integration.md).

# Client

## Getting started

### 1. Installation

```
$ flutter pub add huddle01_flutter_sdk
```

OR

add this in your project's `pubspec.yaml`

```yaml
dependencies:
  flutter:
    sdk: flutter
  huddle01_flutter_sdk: ^0.1.0
```

and then run

```bash
$ flutter pub get
```

### 2. **Get your API Key**

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

### 3. Importing into your application 

```dart
import 'package:huddle01_flutter/huddle01_flutter.dart';
```

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.

```dart
_setupEventListeners({
    required ConsumersBloc consumersBloc,
    required ProducersBloc producersBloc,
    required PeersBloc peersBloc,
    required MeBloc meBloc,
  }) {
    // on adding a new consumer
    emitter.on('addConsumer', (consumer) {
      consumersBloc.add(ConsumerAdd(consumer: consumer));
    });
    // on removing an existing consumer
    emitter.on('removeConsumer', (consumerId) {
      consumersBloc.add(ConsumerRemove(consumerId: consumerId));
    });
    // adding a new producer 
    emitter.on('addProducer', (producer) {
      producersBloc.add(ProducerAdd(producer: producer));
      if (producer.source == 'webcam') {
        meBloc.add(MeSetWebcamInProgress(progress: true));
      }
    });
    // disable and remove an existing producer
    emitter.on('removeProducer', (source) {
      producersBloc.add(ProducerRemove(source: source));
      if (source == 'webcam') {
        meBloc.add(MeSetWebcamInProgress(progress: false));
      }
    });
    // adding a new peer
    emitter.on('addPeer', (peer) {
      peersBloc.add(PeerAdd(newPeer: peer));
    });
    // removing an existing peer
    emitter.on('removePeer', (peerId) {
      peersBloc.add(PeerRemove(peerId: peerId));
    });
    // adding new consumer of the selected peer
    emitter.on('addPeerConsumer', (consumer) {
      peersBloc.add(
          PeerAddConsumer(peerId: consumer.peerId, consumerId: consumer.id));
    });
    // removing an existing consumer of a selected peer
    emitter.on('removePeerConsumer', (peerId, consumerId) {
      peersBloc.add(PeerRemoveConsumer(peerId: peerId, consumerId: consumerId));
    });
  }
```

### 5. Initialising Client repository and using available methods:

Client repository initialisation using `RepositoryProvider` and using `join()` to join the room.

```dart
child: RepositoryProvider<HuddleClientRepository>(
  // provider to provide room client as an object to all the child widgets of this
  lazy: false,
  create: (context) {
    // setup event listeners
    _setupEventListeners(
      consumersBloc: context.read<ConsumersBloc>(),
      producersBloc: context.read<ProducersBloc>(),
      peersBloc: context.read<PeersBloc>(),
      meBloc: context.read<MeBloc>(),
    );
    // initialise blocs
    MediaDevicesBloc mediaDevicesBloc =
        context.read<MediaDevicesBloc>();
    String audioInputDeviceId =
        mediaDevicesBloc.state.selectedAudioInput!.deviceId;
    String videoInputDeviceId =
        mediaDevicesBloc.state.selectedVideoInput!.deviceId;
    final meState = context.read<MeBloc>().state;
    String displayName = meState.displayName;
    String id = meState.id;
    final roomState = context.read<RoomBloc>().state;
    // url for connection, uses Huddle 01's alpha server link in room state
    String url = roomState.url!;

    Uri uri = Uri.parse(url);

    return HuddleClientRepository(
      peerId: id,
      displayName: displayName,
      url: url != null
          ? 'wss://${uri.host}:4443'
          : 'wss://alpha.huddle01.com:4443',
      roomId: uri.queryParameters['roomId'] ??
          uri.queryParameters['roomid'] ??
          randomAlpha(8).toLowerCase(),
      audioInputDeviceId: audioInputDeviceId,
      videoInputDeviceId: videoInputDeviceId,
    )..join();
    // using join() to join room with the given config
  },
  // Room is the route of the application where the video chat takes place
  child: Room(),
)
```

#### Other methods available:

* **close()**

```dart
context.read<HuddleClientRepository>().close();
```

* **enableWebcam()**
* **disableWebcam()**

```dart
// enable webcam while initialising room to ask permission
context.read<HuddleClientRepository>().enableWebcam();
```

* **enableMic()**
* **disableMic()**
* **muteMic()**
* **unmuteMic()**

```dart
// enable mic while initialising room room to ask permission
context.read<HuddleClientRepository>().enableMic();

// mute and unmute mic
context.read<HuddleClientRepository>().unmuteMic();
```

For any help, reach out to us on Slack. We are available 24\*7 at: <https://bit.ly/3AsIsT7>.