RoomProvider

The RoomProvider component is the primary wrapper that enables video conferencing and real-time collaboration capabilities within your application. By wrapping your application with a RoomProvider, you create a virtual space where users, or "participants," can join a room.

How to use

To initialize the RoomProvider component, you can follow our quickstart guide.

Usage

To add a room to your application, use the following code:

import { RoomProvider, useRoom } from '@superviz/react'

export const Children = () => {

  const { room, joinRoom, leaveRoom, addComponent } = useRoom({
    onMyParticipantJoined: (participant) => console.log('Component: My participant joined', participant),
    onMyParticipantLeft: (participant) => console.log("Component: My participant left", participant),
  });

  const handleJoin = async () => {
    await joinRoom({
      participant: {
        id: uuid,
        name: "YOUR_NAME",
        email: 'YOUR_EMAIL',
      },
      group: {
        name: GROUP_NAME,
        id: GROUP_ID,
      },
      roomId: `ROOM_ID`,
    });
  };

  return (
    <div>
      <button onClick={handleJoin}>Join Room</button>
      <button onClick={leaveRoom}>Leave Room</button>
    </div>
  );
};

<RoomProvider developerToken={SUPERVIZ_KEY}>
  <Children />
</RoomProvider>
}

When initializing a room you must pass the developerToken parameter for it to work properly.

Name	Type	Description
developerToken	string	Required. Your developer token. You can find it on your dashboard. If you don’t have a Developer Token, you can see how to obtain one on the developer portal in our "Setting Up Your Account" section in our documentation.

Hooks

useRoom

For detailed documentation on the useRoom hook, please refer to the useRoom documentation.