Knowledge Base
Search…
Knowledge Base
Welcome to Huddle01 SYNC
Web-SDK
Client
Demo App
Flutter SDK
Client
Demo App
Android-Native
Client
Demo App
React-Native
Client
Demo App
Powered By GitBook
Client
​

Getting Started

  1. 1.
    Get the Huddle01 JS SDK
    1
    $ npm install --save huddle01-client
    Copied!
    OR
    1
    $ yarn add huddle01-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 Huddle01 Client. Import HuddleTypes to access the types.
1
import HuddleClient, { emitter, HuddleTypes } from "huddle01-client";
Copied!
The infrastructure mandates a schema on the URL of the type https://domain.com/room?roomId=C132
Thus, on component mount, we add:
1
history.push(`?roomId=${config.roomId}`);
Copied!
Initialise a new huddle client instance
1
const huddle: HuddleClient = new HuddleClient(config);
Copied!
where config is of type HuddleTypes.HuddleClientConfig which is exported from the npm package. Along with this, HuddleTypes containing types for Producer, Consumer and Peer are also exported from the npm package.
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: HuddleTypes.HuddleClientConfig = {
5
apiKey: "<API Key>", // API KEY (issued on the dashboard)
6
roomId: "C132", // Room ID
7
peerId: "rick254", // Peer ID (needs to be unique for every peer)
8
displayName: "Rick Sanchez", // Display Name
9
window, // Your browser's window object
10
isBot, // bot flag
11
};
Copied!
By this step, you should be connected to the Huddle servers.
To allow recordings, make sure to add:
1
huddle && isRecorderBot && joinRoomBtn.click();
Copied!
where: huddle: the huddle-client object of type HuddleClient isRecorderBot: the boolean that checks if the user is a recorder bot or not joinRoomBtn: the button

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
Trigger: on room status changes Return value: room status of the type string
1
emitter.on("roomState", (state: string) => {
2
//do whatever (ideally switch-case between all state types)
3
//for example
4
switch (state) {
5
case "connected":
6
//code for roomState == "connected"
7
break;
8
case "failed":
9
//code for roomState == "failed"
10
break;
11
case "disconnected":
12
//code for roomState == "disconnected"
13
break;
14
default:
15
setRoomState(state);
16
17
break;
18
}
19
setRoomState(state);
20
});
Copied!
Please refer to the demo app for application references
Different state types:
connected
failed
disconnected
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: any) => {
2
//code for error handling
3
// example : alert(error)
4
});
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 about the peer of the type HuddleTypes.IPeer
1
emitter.on("addPeer", (peer: HuddleTypes.IPeer) => {
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. webcam/mic/screenshare) of the type HuddleTypes.IProducer.
1
emitter.on("addProducer", (producer: HuddleTypes.IProducer) => {
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:
webcam
mic
screenshare
a webcam 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. webcam/mic/screenshare) of the type HuddleTypes.IConsumer
1
emitter.on("addConsumer", (consumer: HuddleTypes.IConsumer) => {
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:
webcam
mic
screenshare
a webcam 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 of the type HuddleTypes.IPeer(same as the object received on the "add" event)
1
emitter.on("removePeer", (peer: HuddleTypes.IPeer) => {
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. webcam/mic/screenshare) peer of the type HuddleTypes.IProducer (same as the object received on the "add" event)
1
emitter.on("removeProducer", (producer: HuddleTypes.IProducer) => {
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:
webcam
mic
screenshare
a webcam 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. webcam/mic/screenshare) peer of the type HuddleTypes.IConsumer (same as the object received on the "add" event)
1
emitter.on("removeConsumer", (consumer: HuddleTypes.IConsumer) => {
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:
webcam
mic
screenshare
a webcam stream consumer
a mic stream consumer
a screenshare stream consumer
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()
  • huddle.close()
joinRoom()
leaveRoom()
1
const joinRoom = async () => {
2
if (!huddle) return;
3
try {
4
setupEventListeners();
5
await huddle.join();
6
} catch (error) {
7
alert(error);
8
}
9
};
Copied!
1
const leaveRoom = async () => {
2
if (!huddle) return;
3
try {
4
await huddle.close();
5
setRoomState(false);
6
} catch (error) {
7
alert(error);
8
}
9
};
Copied!
close() can only be called after join() is successful
  • huddle.enableWebcam()
  • huddle.enableMic()
  • huddle.enableShare()
enableWebcam()
enableMic()
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!
1
const enableMic = async () => {
2
if (!huddle) return;
3
try {
4
huddle.enableMic();
5
setMicState(true);
6
} catch (error: any) {
7
setMicState(false);
8
alert(error);
9
}
10
};
Copied!
1
const startScreenshare = async () => {
2
if (!huddle) return;
3
try {
4
await huddle.enableShare();
5
setScreenshareState(true);
6
} catch (error: any) {
7
alert(error);
8
setScreenshareState(false);
9
}
10
};
Copied!
  • huddle.disableWebcam()
  • huddle.disableShare()
  • huddle.disableMic()
disableWebcam()
disableShare()
disableMic()
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!
1
const stopScreenshare = async () => {
2
if (!huddle) return;
3
try {
4
await huddle.disableShare();
5
setScreenshareState(false);
6
} catch (error: any) {
7
alert(error);
8
}
9
};
Copied!
1
const disableMic = async () => {
2
if (!huddle) return;
3
try {
4
huddle.disableMic();
5
setMicState(false);
6
} catch (error: any) {
7
alert(error);
8
setMicState(true);
9
}
10
};
Copied!
enable() functions need to be called and have returned success first before calling any of the disable()counterparts
  • huddle.startRecording()
  • huddle.stopRecording()
startRecording()
stopRecording()
1
const startRecording = async () => {
2
if (!huddle) return;
3
try {
4
const status: boolean = await huddle.startRecording();
5
if (status) console.log("recording successfully initiated");
6
} catch (error: any) {
7
console.error(error);
8
}
9
};
Copied!
1
const stopRecorder = async () => {
2
if (!huddle) return;
3
try {
4
const status: boolean = await huddle.stopRecording();
5
if (status) console.log("recording successfully stopped");
6
} catch (error: any) {
7
console.error(error);
8
}
9
};
Copied!
Previous
Welcome to Huddle01 SYNC
Next - Web-SDK
Demo App
Last modified 9mo ago
Copy link
Contents
Getting Started