Client

Getting Started

1. Get the Huddle01 React Native SDK
1
$ npm install --save react-native-huddle-client
Copied!
OR
1
$ yarn add react-native-huddle-client
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: Import modules & instantiate Huddle Client.
1
import HuddleClient, { emitter } from "react-native-huddle-client";
Copied!
The infrastructure mandates a schema on the URL of the type https://domain.com/room?roomId=C132
Initialize a new huddle client instance
1
const huddle = new HuddleClient(config);
Copied!
An example config object can be given as
1
//write this as it is -- used to check for the recorder
2
const isRecorderBot = localStorage.getItem("bot_password") === "huddle01";
3
4
const config: HuddleClientConfig = {
5
apiKey: "<API Key>", // API KEY (issued on the dashboard)
6
hostname: "domain.com:4443", // Domain name with 4443 port
7
roomId: "C132", // Room ID
8
peerId: "rick254", // Peer ID (needs to be unique for every peer)
9
displayName: "Rick Sanchez", // Display Name
10
window, // Your browser's window object
11
isBot, // bot flag
12
};
Copied!
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
error
addPeer
addProducer
addConsumer
removePeer
removeProducer
removeConsumer
newLobbyPeer
updatedPeersArray
Trigger: on room status changes Return value: room status of the type string
1
emitter.on("roomState", (state) => {
2
//do whatever (ideally switch-case between all state types)
3
});
Copied!
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
Trigger: an error event on client/server side Return value: the error object
1
emitter.on("error", (error) => {
2
//do whatever
3
});
Copied!
Please refer to the demo app for application references
Trigger: new peer joins the room Return value: an entire peer object with all the details
1
emitter.on("addPeer", (peer) => {
2
//do whatever
3
});
Copied!
Please refer to the demo app for application references
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)
1
emitter.on("addProducer", (producer) => {
2
//do whatever (ideally switch-case between all state types)
3
});
Copied!
Please refer to the demo app for application references
Different state types:
producer.type:
camera
mic
screenshare
a camera stream producer
a mic stream producer
a screenshare stream producer
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)
1
emitter.on("addConsumer", (consumer) => {
2
//do whatever (ideally switch-case between all state types)
3
});
Copied!
Please refer to the demo app for application references
Different state types:
consumer.type:
camera
mic
screenshare
a camera stream consumer
a mic stream consumer
a screenshare stream consumer
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)
1
emitter.on("removePeer", (peer) => {
2
//do whatever
3
});
Copied!
Please refer to the demo app for application references
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)
1
emitter.on("removeProducer", (producer) => {
2
//do whatever (ideally switch-case between all state types)
3
});
Copied!
Please refer to the demo app for application references
Different state types:
producer.type:
camera
mic
screenshare
a camera stream producer
a mic stream producer
a screenshare stream producer
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)
1
emitter.on("removeConsumer", (consumer) => {
2
//do whatever (ideally switch-case between all state types)
3
});
Copied!
Please refer to the demo app for application references
Different state types:
consumer.type:
camera
mic
screenshare
a camera stream consumer
a mic stream consumer
a screenshare stream consumer
Trigger: new peer try to join room and waiting admission in lobby Return value: an entire peers in lobby(waiting room)
1
emitter.on("newLobbyPeer", (peers) => {
2
//do whatever
3
});
Copied!
Please refer to the demo app for application references
Trigger: one of peer in lobby is admitted, denied or exit lobby Return value: an entire peers in lobby(waiting room)
1
emitter.on("updatedPeersArray", (peers) => {
2
//do whatever
3
});
Copied!
Please refer to the demo app for application references
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()
1
const joinRoom = async () => {
2
if (!huddle) return;
3
try {
4
setupEventListeners();
5
await huddle.join();
6
} catch (error: any) {
7
alert(error);
8
}
9
};
Copied!
    huddle.close()
close() can only be called after join() is successful
1
const leaveRoom = async () => {
2
if (!huddle) return;
3
try {
4
await huddle.close();
5
setRoomState(false);
6
} catch (error: any) {
7
alert(error);
8
}
9
};
Copied!
    huddle.enableCamera()
    huddle.enableMic()
    huddle.unmuteMic()
    huddle.enableShare()
1
const enableWebcam = async () => {
2
if (!huddle) return;
3
try {
4
await huddle.enableWebcam();
5
setWebcamState(true);
6
} catch (error) {
7
alert(error);
8
}
9
};
Copied!
    huddle.disableCamera()
    huddle.disableShare()
    huddle.disableMic()
    huddle.muteMic()
1
const disableWebcam = async () => {
2
if (!huddle) return;
3
try {
4
await huddle.disableWebcam();
5
setWebcamState(false);
6
} catch (error) {
7
alert(error);
8
}
9
};
Copied!
enable() functions need to be called and have returned success first before calling any of the disable()counterparts
    huddle.changeCamera()
1
const changeCamera = async () => {
2
if (!huddle) return;
3
try {
4
await huddle.changeCamera();
5
} catch (error: any) {
6
alert(error);
7
}
8
};
Copied!
For any help, reach out to us on Slack. We are available 24*7 at: Huddle01 Community.
Last modified 1mo ago
Copy link