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

$ flutter pub add huddle01_flutter_sdk

OR

add this in your project's pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  huddle01_flutter_sdk: ^0.1.0

and then run

$ 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

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.

_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.

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()

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

• enableWebcam()

• disableWebcam()

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

• enableMic()

• disableMic()

• muteMic()

• unmuteMic()

// 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.