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.

Before Getting Started​

Step 1: Installation​

Since the UI Kit uses the RealtimeKit Core SDK, you must install the @cloudflare/realtimekit-react-native package along with the @cloudflare/realtimekit-react-native-ui.

@cloudflare/realtimekit-react-native-uinpm version
@cloudflare/realtimekit-react-nativenpm version
npm install @cloudflare/realtimekit-react-native-ui @cloudflare/realtimekit-react-native

Install the required native dependencies

npm install @cloudflare/react-native-webrtc @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview

Install these required dependencies as per your react-native version

  • react-native-safe-area-context

    • react-native (0.64 - 0.74) : 
      npm install react-native-safe-area-context@^4.0.0
    • react-native (>= 0.74) : 
      npm install react-native-safe-area-context@^5.0.0

  • react-native-svg

Additional steps for interactive livestream product

Install the following dependencies only if you need livestream.

npm install amazon-ivs-react-native-player

info

The below instructions are for the release builds, debug builds should work without any additional steps.

  1. Edit your android/gradle.properties and add the following line
newArchEnabled=false
android.useFullClasspathForDexingTransform=true
  1. Create / append to the file android/app/proguard-rules.pro
-keep class io.webrtc.** { *; }
-dontwarn org.chromium.build.BuildHooksAndroid
  1. In your android/app/build.gradle edit the release configuration and add the following line importing the proguard configuration
buildTypes {
  release {
    ...
    ...
    ...
    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  }
}

Additional Steps for Screenshare​

  • In AndroidManifest.xml, Add this service
<application>
  ...
  <service 
    android:enabled="true"
    android:foregroundServiceType="mediaProjection|camera|microphone"
    android:name="com.reactnativecore.ForegroundService">
  </service>
  ...
</application>

  • Add these permissions
<manifest ...>
  ...
  <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
  <uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA" />
  <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE" />
  <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />
  ...
</manifest>

Step 2: Get Started with RealtimeKit Prebuilt Components​

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

  1. Set up RealtimeKitProvider. This provides the context that provides meeting object and other data to all the child components.
  2. Set up RtkUIProvider. This provides design system to child components.
  3. Initialize the RealtimeKit client. Use the useRealtimeKitClient() hook and initMeeting to initialize a client.
authTokenAfter you've created the meeting, add each participant to the meeting using the Add Participant API. The API response contains the authToken.
  1. Pass the meeting object to UI Kit, which will use it to retrieve meeting information and display it on the user interface.

import React, { useEffect } from 'react';
import { RealtimeKitProvider, useRealtimeKitClient } from '@cloudflare/realtimekit-react-native';
import { RtkUIProvider, RtkMeeting, RtkWaitingScreen } from '@cloudflare/realtimekit-react-native-ui';

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

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

  return (
    <RealtimeKitProvider value={meeting}>
      <RtkUIProvider>
        { !meeting ? 
          <RtkWaitingScreen /> : 
          <RtkMeeting meeting={meeting} showSetupScreen={true} iOSScreenshareEnabled={true} />
        }
      </RtkUIProvider>
    </RealtimeKitProvider>
  );
}

Example: Using Prebuilt RtkMeeting Component​

In the following example, a meeting is created using the useRealtimeKitMeeting component. useRealtimeKitMeeting essentially 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.

function YourCustomMeetingComponent() {
  const { meeting } = useRealtimeKitMeeting();

  return <RtkMeeting meeting={meeting} />;
}