react-native-huddle-client v1.1.3
HuddleClient React Native SDK
Getting Started
- Get the Huddle01 React Native SDK
$ npm install --save react-native-huddle-client
OR
$ yarn add react-native-huddle-client
- Get your API Key: You can get your access keys in the Developer section of the Huddle01 Dashboard
- 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
Initialise a new object
const huddle = new HuddleClient(config);
An example config
object can be given as
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
isBot, // bot flag
};
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:
Trigger: on room status changes
Return value: error objectemitter.on("roomState", (state) => { //do whatever (ideally switch-case between all state types) });
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: error objectemitter.on("error", (error) => { //do whatever });
Trigger: new peer joins the room
Return value: an entire peer object with all the detailsemitter.on("addPeer", (peer) => { //do whatever });
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)emitter.on("addProducer", (producer) => { //do whatever (ideally switch-case between all state types) });
Different state types:
producer.type:
camera mic screenshare a camera stream consumer a mic stream consumer a screenshare stream consumer 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)
emitter.on("addConsumer", (consumer: IConsumer) => {
//do whatever (ideally switch-case between all state types)
});
#### 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)emitter.on("removePeer", (peer) => { //do whatever });
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)emitter.on("removeProducer", (producer) => { //do whatever (ideally switch-case between all state types) });
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. camera/mic/screenshare) peer (same as the object received on the "add" event)emitter.on("removeConsumer", (consumer) => { //do whatever (ideally switch-case between all state types) });
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)emitter.on("newLobbyPeer", (peers) => { //do whatever });
Trigger: one of peer in lobby is admitted, denied or exit lobby
Return value: an entire peers in lobby(waiting room)emitter.on("updatedPeersArray", (peers) => { //do whatever });
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()
Example given below:
const joinRoom = async () => { if (!huddle) return; try { setupEventListeners(); await huddle.join(); } catch (error: any) { alert(error); } };
huddle.close()
close()
can only be called afterjoin()
is successfulExample given below:
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()
Example given below:
const enableWebcam = async () => { if (!huddle) return; try { await huddle.enableCamera(); setCameraState(true); } catch (error: any) { alert(error); } };
huddle.disableCamera()
- huddle.disableShare()
- huddle.disableMic()
huddle.muteMic()
Example given below:
const disableWebcam = async () => { if (!huddle) return; try { await huddle.disableWebcam(); setCameraState(false); } catch (error: any) { alert(error); } };
NOTE:
enable()
functions need to be called and have returned success first before calling any of thedisable()
counterpartshuddle.changeCamera()
Example given below:
const changeCamera = async () => { if (!huddle) return; try { await huddle.changeCamera(); } catch (error: any) { alert(error); } };