Client

Getting Started

1. Get the Huddle01 React Native SDK

$ npm install --save react-native-huddle-client

OR

$ yarn add react-native-huddle-client

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 modules & instantiate Huddle Client.

import HuddleClient, { emitter } from "react-native-huddle-client";

The infrastructure mandates a schema on the URL of the type https://domain.com/room?roomId=C132

Initialize a new huddle client instance

const huddle = new HuddleClient(config);

An example config object can be given as

//write this as it is -- used to check for the recorder
const isRecorderBot = localStorage.getItem("bot_password") === "huddle01";

const config: HuddleClientConfig = {
  apiKey: "<API Key>",          // API KEY (issued on the dashboard)
  hostname: "domain.com:4443",  // Domain name with 4443 port
  roomId: "C132",               // Room ID
  peerId: "rick254",            // Peer ID (needs to be unique for every peer)
  displayName: "Rick Sanchez",  // Display Name
  window,                       // Your browser's window object
  isBot,                        // bot flag
};

By this step, you should be connected to the Huddle servers.

Setting up event listeners

The emitter that we imported in the 1st step is used to emit events by Huddle about your application. Please refer to the demo app for application references

The various types of events are:

roomState

Trigger: on room status changes Return value: room status of the type string

emitter.on("roomState", (state) => {
    //do whatever (ideally switch-case between all state types)
});

Please refer to the demo app for application references

Different state types:

connecting	waiting_for_admission	connected	failed	disconnected
trying to connect to the room	waiting admission to join room from host in lobby	successfully connected to the room	failure in connection to the room	successfully disconnected from the room

error

addPeer

addProducer

addConsumer

removePeer

removeProducer

removeConsumer

newLobbyPeer

updatedPeersArray

All the data/states received by events need to be maintained by you in your app. Can be achieved using React states/redux or any similar implementations.

Please refer to the demo app where we use local React states to handle these data.

Methods Available:

• huddle.join()

const joinRoom = async () => {
  if (!huddle) return;
  try {
    setupEventListeners();
    await huddle.join();
  } catch (error: any) {
    alert(error);
  }
};

• huddle.close()

close() can only be called after join() is successful

const leaveRoom = async () => {
  if (!huddle) return;
  try {
    await huddle.close();
    setRoomState(false);
  } catch (error: any) {
    alert(error);
  }
};

• huddle.enableCamera()

• huddle.enableMic()

• huddle.unmuteMic()

• huddle.enableShare()

const enableWebcam = async () => {
    if (!huddle) return;
    try {
      await huddle.enableWebcam();
      setWebcamState(true);
    } catch (error) {
      alert(error);
    }
  };

• huddle.disableCamera()

• huddle.disableShare()

• huddle.disableMic()

• huddle.muteMic()

  const disableWebcam = async () => {
    if (!huddle) return;
    try {
      await huddle.disableWebcam();
      setWebcamState(false);
    } catch (error) {
      alert(error);
    }
  };

enable() functions need to be called and have returned success first before calling any of the disable()counterparts

• huddle.changeCamera()

const changeCamera = async () => {
  if (!huddle) return;
  try {
    await huddle.changeCamera();
  } catch (error: any) {
    alert(error);
  }
};

For any help, reach out to us on Slack. We are available 24*7 at: Huddle01 Community.