RoomProvider

The RoomProvider component is the primary wrapper that enables video conferencing capabilities within your application. By wrapping your application with a RoomProvider, you create a virtual space where users, or "participants," can join a video conference 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 = () => {
  // SuperViz userRoom hook ::
  const {  joinRoom, leaveRoom } = useRoom({
    onMyParticipantJoined: (participant) => console.log('Component: My participant joined', participant),
    onMyParticipantLeft: (participant) => console.log("Component: My participant left", participant),
  });

  // Initialize ::
  const handleJoin = async () => {

    try {
      await joinRoom({
        participant: {
          id: "USER_ID",
          name: "USER_NAME",
        },
        group: {
          name: "GROUP_NAME",
          id: "GROUP_ID",
        },
        roomId: `ROOM_ID`,
      });

    } catch (error) {
      console.error("Error initializing SuperViz Room:", error);
    }
  };

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

export function App() {
  return (
    <RoomProvider developerToken={DEVELOPER_TOKEN}>
      <Children />
    </RoomProvider>
  )
}

export default App;

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.

useVideo

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