Prebuilt Quickstart

Overview

This guide will walk you through the steps to create a video conferencing app using the Prebuilt component of the Roomkit package. Prebuilt is currently available for React applications, so basic familiarity with React is required to follow this guide.

Prerequisites

• React: Prebuilt is currently available for React applications, so basic familiarity with React is required to follow this guide.
• 100ms account: You need to have a 100ms account to create a room and get a room-code. You can create a 100ms account here.
• Room-code: Prebuilt component requires a room-code to join a room. You can get a room-code for a room using the 100ms dashboard. Refer this guide to learn more about room-codes.

Start a New React Project

To begin with setting up a new React project, you can follow the steps mentioned in React Quickstart. Currently, Prebuilt supports Next.js and Create React App with a React version of 17 and above.

Steps to create a new React project:

npx create-react-app my-app
cd my-app

npx create-next-app my-app
cd my-app

Install Roomkit

The latest version of Roomkit package is available on npm:

You can install it using the following command:

npm install @100mslive/roomkit-react --save

Add Prebuilt Component

Once your app is setup using create react app, you can add the Prebuilt component to your app.

import { HMSPrebuilt } from '@100mslive/roomkit-react';

function App() {
  return (
    <div style={{ height: "100vh" }}>
      <HMSPrebuilt roomCode="<room-code>" />
    </div>
  );
}

export default App;

"use client";

import { HMSPrebuilt } from '@100mslive/roomkit-react';

export default function Home() {
    return (
        <div style={{ height: '100vh' }}>
            <HMSPrebuilt roomCode="<room-code>" />
        </div>
    );
}

Run the App

You can run the app using the following command:

npm start

npm run dev

Join a Room

The Prebuilt component behaves like the 100ms sample app which can be forked from this GitHub repository.

The supported props are listed in the below section.

Props for HMSPrebuilt

HMSPrebuilt accepts the following props:

roomCode

• The room code of the room you want to join. You can get the room code from the 100ms dashboard.

logo (optional)

• An image URL as a string which is displayed in the preview screen and header.

authToken (optional)

• This token is room and role specific. It can be copied from the join room modal on the dashboard. Read more about it here.

onJoin (optional)

• A callback function that will be executed after the peer joins the call.

onLeave (optional)

• A callback function that will be executed after the peer leaves the call, the session ends or if the peer gets kicked out.

options (optional)

• An object which accepts the following parameters:

  • userName (optional): The name to be assigned to the peer.

  • userId (optional): The user ID to be assigned to the peer.

Accessing events, states and more

HMSPrebuilt accepts a ref which is assigned the following:

 {
  hmsActions,
  hmsStats,
  hmsStore,
  hmsNotifications,
};

You can then listen to events, subscribe to states as required in the parent code.

import { selectRoomState } from '@100mslive/hms-video-store';
import { HMSPrebuilt } from '@100mslive/roomkit-react';
import { useEffect, useRef } from 'react';
import { getRoomCodeFromUrl } from './utils';

export default function App() {
  const roomCode = getRoomCodeFromUrl();
  const prebuiltRef = useRef(null);

  useEffect(() => {
    if (prebuiltRef.current) {
      prebuiltRef.current.hmsNotifications.onNotification(msg => console.log(msg));
      prebuiltRef.current.hmsStore.subscribe(currentRoomState => console.log(currentRoomState), selectRoomState);
    }
  }, []);

  return <HMSPrebuilt roomCode={roomCode} ref={prebuiltRef} />;
}

Deploying with customization

To further customize the prebuilt UI, the repository can be easily forked and edited. The README lists the steps and commands needed for the same, including deployment.