> 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/react-native/client.md).

# Client

### Getting Started

**1. Get the Huddle01 React Native SDK**

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

OR

```bash
$ 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.

```javascript
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

```javascript
const huddle = new HuddleClient(config);
```

An example `config` object can be given as

```javascript
//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:**

{% tabs %}
{% tab title="roomState" %}
**Trigger:** on room status changes\
**Return value:** room status of the type `string`

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

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}

**Different state types:**

| **connecting**                | waiting\_fo&#x72;*\_*&#x61;dmission               | 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 |
| {% endtab %}                  |                                                   |                                    |                                   |                                         |

{% tab title="error" %}
**Trigger:** an error event on client/server side\
**Return value:** the error object

```javascript
emitter.on("error", (error) => {
    //do whatever
});
```

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}
{% endtab %}

{% tab title="addPeer" %}
**Trigger:** new peer joins the room\
**Return value:** an entire peer object with all the details

```javascript
emitter.on("addPeer", (peer) => {
    //do whatever
});
```

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}
{% endtab %}

{% tab title="addProducer" %}
**Trigger:** you have a new producer producing to the Huddle servers\
**Return value:** an producer object with details like your production media track (eg. camera/mic/screenshare)

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

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}

**Different state types:**

`producer.type:`

| camera                   | mic                   | screenshare                   |
| ------------------------ | --------------------- | ----------------------------- |
| a camera stream producer | a mic stream producer | a screenshare stream producer |
| {% endtab %}             |                       |                               |

{% tab title="addConsumer" %}
**Trigger:** you have a new consumer consuming from the Huddle servers\
**Return value:** a consumer object with details like your consumption media track (eg. camera/mic/screenshare)

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

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}

**Different state types:**

`consumer.type:`

| camera                   | mic                   | screenshare                   |
| ------------------------ | --------------------- | ----------------------------- |
| a camera stream consumer | a mic stream consumer | a screenshare stream consumer |
| {% endtab %}             |                       |                               |

{% tab title="removePeer" %}
**Trigger:** one of the existing peers disconnects from the room\
**Return value:** an entire peer object with all the details about the peer(same as the object received on the "add" event)

```javascript
emitter.on("removePeer", (peer) => {
    //do whatever
});
```

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}
{% endtab %}

{% tab title="removeProducer" %}
**Trigger:** you have closed the production of your existing producer to the Huddle servers\
**Return value:** a producer object with details like your production media track (eg. camera/mic/screenshare) peer(same as the object received on the "add" event)

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

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}

**Different state types:**

`producer.type:`

| camera                   | mic                   | screenshare                   |
| ------------------------ | --------------------- | ----------------------------- |
| a camera stream producer | a mic stream producer | a screenshare stream producer |
| {% endtab %}             |                       |                               |

{% tab title="removeConsumer" %}
**Trigger:** you have closed the production of your existing producer to the Huddle servers\
**Return value:** a consumer object with details like your consumption media track (eg. camera/mic/screenshare) peer (same as the object received on the "add" event)

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

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}

**Different state types:**

`consumer.type:`

| camera                   | mic                   | screenshare                   |
| ------------------------ | --------------------- | ----------------------------- |
| a camera stream consumer | a mic stream consumer | a screenshare stream consumer |
| {% endtab %}             |                       |                               |

{% tab title="newLobbyPeer" %}
**Trigger:** new peer try to join room and waiting admission in lobby\
**Return value:** an entire peers in lobby(waiting room)

```javascript
emitter.on("newLobbyPeer", (peers) => {
   //do whatever
 });
```

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}
{% endtab %}

{% tab title="updatedPeersArray" %}
**Trigger:** one of peer in lobby is admitted, denied or exit lobby\
**Return value:** an entire peers in lobby(waiting room)

```javascript
emitter.on("updatedPeersArray", (peers) => {
   //do whatever
 });
```

{% hint style="info" %}
Please refer to the demo app for application references
{% endhint %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
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.
{% endhint %}

#### Methods Available:

* **huddle.join()**

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

* **huddle.close()**

{% hint style="info" %}
`close()` can only be called after `join()` is successful
{% endhint %}

```typescript
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()**

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

* **huddle.disableCamera()**
* **huddle.disableShare()**
* **huddle.disableMic()**
* **huddle.muteMic()**

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

{% hint style="info" %}
`enable()` functions need to be called and have returned success first before calling any of the `disable()`counterparts
{% endhint %}

* **huddle.changeCamera()**

```javascript
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](https://bit.ly/3AsIsT7).