useVideo

The useVideo hook provides access to video conferencing functionalities, such as joining, leaving, and managing participants.

Usage

Example:

const videoHook = useVideo({
  onParticipantJoined: (participant) => console.log('Component: Participant joined', participant),
  onParticipantLeft: (participant) => console.log('Component: Participant left', participant),
});

Callbacks

onHostChanged

Triggered when the host changes.

Example:

const videoHook = useVideo({
  onHostChanged: (host) => console.log('Component: Host changed', host)
});

On the callback function, you will receive the following argument:

Type	Description
Participant	Participant that now is the host.

onParticipantJoined

Triggered when a participant joins the meeting.

Example:

const videoHook = useVideo({
  onParticipantJoined: (participant) => console.log('Component: Participant joined', participant)
});

On the callback function, you will receive the following argument:

Type	Description
Participant	Participant that joined the meeting.

onMeetingStateUpdate

Triggered when the meeting state updates. The Video Conference operates through a series of distinct states to ensure the meeting experience. This callback enables you to monitor and react to these state transitions.

Example:

const videoHook = useVideo({
  onMeetingStateUpdate: (state) => console.log('Component: Meeting state updated', state),
});

On the callback function, you will receive the following argument:

Type	Description
MeetingState	Meeting state.

onParticipantLeft

Triggered when a participant leaves the meeting.

Example:

const videoHook = useVideo({
  onParticipantLeft: (participant) => console.log('Component: Participant left', participant),
});

On the callback function, you will receive the following argument:

Type	Description
Participant	Participant that left the meeting.

onParticipantListUpdate

Triggered when there is any change in the participant list (e.g., a participant joins or leaves).

Example:

const videoHook = useVideo({
  onParticipantListUpdate: (participants) => console.log('Component: Participant list updated', participants)
});

On the callback function, you will receive the following argument:

Type	Description
Record<string, Participant>	list of participants in the meeting.

onParticipantKicked

Triggered when a participant is kicked from the meeting.

Example:

const videoHook = useVideo({
  onParticipantKicked: (participant) => console.log('Component: Participant kicked', participant)
});

On the callback function, you will receive the following argument:

Type	Description
Participant	Participant that was kicked.

Type Definitions

Participant

Type: object

An object describing the participant information, like name and avatar.

Name	Type	Description
id	string	Identifier of the participant who is entering the room. Usually, this ID matches the internal ID of your users. Minimum length of 2 characters and maximum of 64. Accepted pattern: [-_&@+=,()\{\}\\[\\]\/«».:|'"#a-zA-Z0-9À-ÿ\s]*
activeComponents	ComponentNames[]	List of active components that the participant has entered.
name	string	The name of the participant who will enter the room.

Example:

{
    "id": "USER_ID",
    "name": "USER_NAME",
    "activeComponents": [],
    "slot": {
        "index": 2,
        "color": "#878291",
        "textColor": "#fff",
        "colorName": "gray",
        "timestamp": 1736161104631
    }
}

MeetingState

Type: enum

Represents the current state of the Video Conference meeting. This value reflects one of the possible states indicating the operational status of the meeting component. You can utilize this information in your callback function to respond to and manage the meeting's dynamic behavior based on its state.

Here are the possible states and their meanings:

State	Value
MEETING_FAILED	-1	Indicates a failure in the meeting, requiring attention or troubleshooting.
MEETING_DISCONNECTED	0	Indicates a state where the meeting is not connected.
MEETING_INITIALIZING	1	Signifies the meeting is in the process of initialization.
MEETING_READY_TO_JOIN	2	Confirms that the meeting was prepared for participants to join, indicating that device permissions have been granted and everything is ready for participants to join.
MEETING_CONNECTING	3	Indicates an ongoing connection process that happens after the participant joins the meeting.
MEETING_CONNECTED	4	Confirms that the meeting is successfully connected.
MEETING_RECONNECT	5	Occurs when the meeting reconnects after a disruption.
FRAME_INITIALIZING	6	Indicates the initialization of the meeting iframe.
FRAME_INITIALIZED	7	Indicates a successfully initialized meeting iframe.
FRAME_UNINITIALIZED	8	Represents an uninitialized meeting iframe.