huddle01-client v1.1.20

Huddle01 Web SDK

Getting Started

1. Get the Huddle01 JS SDK

$ npm install --save huddle01-client

2. Get your API Key: You can get your access keys in the Developer section of the Huddle01 Dashboard

3. Import modules & instantiate Huddle01 Client:

import HuddleClient, { emitter } from "huddle01-client";

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

Thus, on component mount, we add:

history.push(`?roomId=${config.roomId}`);

Initialise a new object

const huddle = new HuddleClient(config);

where config:

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

const config = {
  apiKey: "<API Key>", //issued on the dashboard
  roomId: "C132",
  peerId: "rick254", //needs to be unique for every peer
  displayName: "Rick Sanchez",
  window, //your browser's window object
  isBot,
};

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

To allow recordings, make sure to add:

huddle && isRecorderBot && joinRoomBtn.click();

where:
`huddle: the huddle-client object

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.

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:

="error" %} Trigger: an error event on client/server side
Return value: error message of the type string

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

Please refer to the demo app for application references

="addPeer" %} Trigger: new peer joins the room
Return value: an entire peer object with all the details about the peer of the type object

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

Please refer to the demo app for application references

="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. webcam/mic/screenshare) of the type object

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

Please refer to the demo app for application references

Different state types:

producer.type:

="addConsumer" %} Trigger: you have a new consumer consuming from the Huddle servers
Return value: an consumer object with details like your consumption media track (eg. webcam/mic/screenshare) of the type object

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

Please refer to the demo app for application references

Different state types:

consumer.type:

="removePeer" %} 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 object(same as the object received on the "add" event)

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

Please refer to the demo app for application references

="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. webcam/mic/screenshare) peer of the type object (same as the object received on the "add" event)

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

Please refer to the demo app for application references

Different state types:

producer.type:

="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. webcam/mic/screenshare) peer of the type object (same as the object received on the "add" event)

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

Please refer to the demo app for application references

Different state types:

consumer.type:

{% endtabs %}

="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:

="error" %} Trigger: an error event on client/server side
Return value: error message of the type string

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

Please refer to the demo app for application references

="addPeer" %} Trigger: new peer joins the room
Return value: an entire peer object with all the details about the peer of the type object

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

Please refer to the demo app for application references

="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. webcam/mic/screenshare) of the type object

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

Please refer to the demo app for application references

Different state types:

producer.type:

="addConsumer" %} Trigger: you have a new consumer consuming from the Huddle servers
Return value: an consumer object with details like your consumption media track (eg. webcam/mic/screenshare) of the type object

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

Please refer to the demo app for application references

Different state types:

consumer.type:

="removePeer" %} 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 object(same as the object received on the "add" event)

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

Please refer to the demo app for application references

="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. webcam/mic/screenshare) peer of the type object (same as the object received on the "add" event)

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

Please refer to the demo app for application references

Different state types:

producer.type:

="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. webcam/mic/screenshare) peer of the type object (same as the object received on the "add" event)

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

Please refer to the demo app for application references

Different state types:

consumer.type:

{% endtabs %}

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()

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

="joinRoom()" %}

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

="leaveRoom()" %}

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

{% endtabs %}

• huddle.enableWebcam()
• huddle.enableMic()
• huddle.enableShare()

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

• huddle.disableWebcam()
• huddle.disableShare()
• huddle.disableMic()

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.startRecording()
• huddle.stopRecordig()

Recordings will only work in production environments (or run a local process of the recorder on your machine if you want to test in development environments)

="startRecording()" %}

const startRecording = async () => {
  if (!huddle) return;
  try {
    const status = await huddle.startRecording();
    if (status !== true)
      console.error("an error occurred while initiating recording");
    console.log("recording initiated");
  } catch (error) {
    console.error(error);
  }
};

="stopRecording()" %}

const stopRecorder = async () => {
  if (!huddle) return;
  try {
    const status = await huddle.stopRecording();
    if (status !== true)
      console.error("an error occurred while initiating recording");
    console.log("recording initiated");
  } catch (error) {
    console.error(error);
  }
};

{% endtabs %}