Skip to main content

Quickstart

This quickstart shows how to use RealtimeKit's UI Kit prebuilt components to add live video and audio to your React application with minimal coding and a variety of meeting UI customization options.

For getting started quickly, you can use our sample code. You can clone and run a sample application from the React UI Kit GitHub repository.

Before Getting Started​

Step 1: Install the SDK​

Since the UI Kit is built on top of the Core SDK, you must install the @cloudflare/realtimekit SDK along with the @cloudflare/realtimekit-react-ui.

@cloudflare/realtimekit-react consists of hooks written on top of our core @cloudflare/realtimekit package, which makes it easy to use web-core in React applications.

You can install the package using npm or Yarn.

npm install @cloudflare/realtimekit-react @cloudflare/realtimekit-react-ui

Version​

@cloudflare/realtimekit-react-uinpm version
@cloudflare/realtimekit-reactnpm version

Step 2: Initialise meeting​

Here's a series of steps that you need to perform:

  1. Set up RealtimeKitProvider. You need it to import the RealtimeKitProvider from the @cloudflare/realtimekit-react. This provides a meeting object to child components.
  2. Initialize the client. Use the useRealtimeKitClient() hook and initMeeting to initialize a client.
  3. Call the init() method and pass the authToken:
authTokenAfter you've created the meeting, add each participant to the meeting using the Add Participant API. The API response contains the authToken.
import { useEffect } from 'react';
import { useRealtimeKitClient, RealtimeKitProvider } from '@cloudflare/realtimekit-react';
import { RTKMeeting } from '@cloudflare/realtimekit-react-ui';

export default function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {
    initMeeting({
      authToken: '<auth-token>',
      defaults: {
        audio: false,
        video: false,
      },
    });
  }, []);

  return (
    <RealtimeKitProvider value={meeting}>
      /**
       * Coming in Step 3
      */
    </RealtimeKitProvider>
  );
}

Step 3: Use RTKMeeting component​

In the following example, a meeting is created using the useRealtimeKitClient component. useRealtimeKitMeeting returns the meeting object you passed to the RealtimeKitProvider.

RTKMeeting renders the entire meeting UI. It loads your preset and renders the UI based on it. With this component, you don't have to handle all the states, dialogs, and other smaller bits of managing the application.

For more information on the other props of RTKMeeting, see RTKMeeting.

import { useEffect } from 'react';
import { useRealtimeKitClient, useRealtimeKitMeeting, RealtimeKitProvider } from '@cloudflare/realtimekit-react';
import { RTKMeeting } from '@cloudflare/realtimekit-react-ui';

export default function App() {
    const [meeting, initMeeting] = useRealtimeKitClient();

    useEffect(() => {
      initMeeting({
        authToken: '<auth-token>',
        defaults: {
          audio: false,
          video: false,
        },
      });
    }, []);

    return (
      <RealtimeKitProvider value={meeting}>
        <MyMeetingUI />
      </RealtimeKitProvider>
    );
}