Build using Core SDK

Initialize Core SDK

To integrate the Core SDK, you will need to initialize it with a participant's auth token, and then use the provided SDK APIs to control the peer in the session.

Initialization might differ slightly based on your tech stack. Please choose your preferred tech stack below.

WebMobile

ReactWeb ComponentsAngular

Install the client SDK

npm i @cloudflare/realtimekit-react

Use the useRealtimeKitClient hook to initialise the SDK.

App.tsx

import { useEffect } from 'react';
import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';

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

    useEffect(() => {
      initMeeting({ authToken: "<auth-token>" });
    }, []);

  useEffect(() => {
    // next - if (meeting) meeting.join();
  }, [meeting])

    return <div></div>;
}

Use the Create Participant API to fetch the authToken.

Install the client SDK.

npm i @cloudflare/realtimekit

Alternatively, you can also use the CDN.

 <script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>

You can initialise the SDK using RealtimeKitClient.init.

JavaScript

  const authToken = <auth-token>;
  RealtimeKitClient.init({
  authToken,
  }).then((meeting) => {
    // next - meeting.join();
  });

Use the Create Participant API to fetch the authToken.

Install the client SDK.

npm i @cloudflare/realtimekit-angular

You can initialise the SDK using RealtimeKitClient.init.

TypeScript

class AppComponent {
  title = "MyProject";
  @ViewChild("myid") meetingComponent: RtkMeeting;
  rtkMeeting: RealtimeKitClient;

  async ngAfterViewInit() {
    const meeting = await RealtimeKitClient.init({
      authToken: "<auth-token>",
    });
    // next - meeting.join();
  }
}

Use the Create Participant API to fetch the authToken.

Initialize the RealtimeKit SDK by obtaining an instance of RealtimeKitClient using the RealtimeKitMeetingBuilder helper.

Kotlin

val rtkClient = RealtimeKitMeetingBuilder.build(activity)

Configure the meeting properties in the RtkMeetingInfo class with a valid participant authToken from the Create Participant API.

Kotlin

val meetingInfo =
  RtkMeetingInfo(
    authToken = authToken,
    enableAudio = true,
    enableVideo = true,
  )

Initialize the meeting by calling the init() method. This establishes a connection with the RealtimeKit meeting server.

Kotlin

rtkClient.init(
  meetingInfo,
  onInitCompleted = { ... },
  onInitFailed = { ... },
)

Initialize the RealtimeKit SDK by creating an instance of RealtimeKitClient.

Swift

let meeting = RealtimeKitiOSClientBuilder().build()

Add the required listeners to receive callbacks for meeting events.

Swift

meeting.addMeetingRoomEventListener(meetingRoomEventListener: self)
meeting.addParticipantsEventListener(participantsEventListener: self)
meeting.addSelfEventListener(selfEventListener: self)

Configure the meeting properties in the RtkMeetingInfo class with a valid participant authToken from the Create Participant API.

Swift

let meetingInfo = RtkMeetingInfo(authToken: authToken,
                                  enableAudio: true,
                                  enableVideo: true)

Initialize the meeting by calling the doInit() method. This establishes a connection with the RealtimeKit meeting server.

Swift

meeting.doInit(meetingInfo: meetingInfo, onSuccess: {}, onFailure: {_ in})

Initialize the RealtimeKit SDK by creating an instance of RealtimeKitClient.

Dart

final meeting = RealtimeKitClient();

Configure the meeting properties in the RtkMeetingInfo class with a valid participant authToken from the Create Participant API.

Dart

final meetingInfo = RtkMeetingInfo(
                    authToken: authToken,
                    enableAudio: false,
                    enableVideo: false,
                  );

Initialize the connection by calling the init() method. This establishes a connection with the RealtimeKit meeting server.

Dart

meeting.init(meetingInfo);

Subscribe to the RtkMeetingRoomEventListener to receive callbacks for meeting events.

Dart

meeting.addMeetingRoomEventListener(RoomStateNotifier());

Initialize the RealtimeKit SDK using the useRealtimeKitClient hook.

JavaScript

import React from 'react';
import { View, Text } from 'react-native';
import { useRealtimeKitClient, RealtimeKitProvider } from '@cloudflare/realtimekit-react-native';

export default function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();
  React.useEffect(() => {
    const init = async () => {
      const meetingOptions = {
        audio: true,
        video: true,
      };
      await initMeeting({
        authToken: 'YourAuthToken',
        defaults: meetingOptions,
      });
    };
    init();
    // next - if (meeting) meeting.joinRoom();
  }, []);

  if (meeting) {
    return (
      <RealtimeKitProvider value={meeting}>
        {/* Render your components here */}
      </RealtimeKitProvider>
    );
  } else {
    return (
      <View>
        <Text>Loading...</Text>
      <View>
    )
  }
}

Use the Create Participant API to fetch the authToken.

Advanced Options

The Core SDK provides additional configuration options for advanced use cases. These options can be passed during initialization to customize the behavior of the RealtimeKit client.

Option	Description	Type	Reqired
video	Should video be enabled by default	boolean	false
audio	Should audio be enabled by default	boolean	false
mediaConfiguration	Allows you to pass custom media quality constraints	MediaConfiguration	false
autoSwitchAudioDevice	Automatically switch to a ngAfterViewInit audio device	boolean	false
isNonPreferredDevice	Allows you to set specific devices as "not preferred"	(device: MediaDeviceInfo) => boolean	false
recording	Allows you to configure recording settings	RecordingConfig	false

Reference for the types:

TypeScript

interface AudioQualityConstraints {
  echoCancellation?: boolean,
  noiseSupression?: boolean,
  autoGainControl?: boolean,
  enableStereo?: boolean,
  enableHighBitrate?: boolean
}

interface VideoQualityConstraints {
  width: { ideal: number },
  height: { ideal: number },
  frameRate?: { ideal: number },
}

interface ScreenshareQualityConstraints {
  width?: { max: number },
  height?: { max: number },
  frameRate?: {
    ideal: number,
    max: number
  },
  displaySurface?: 'window' | 'monitor' | 'browser';
  selfBrowserSurface?: 'include' | 'exclude'
}

interface MediaConfiguration {
  video?: VideoQualityConstraints,
  audio?: AudioQualityConstraints,
  screenshare?: ScreenshareQualityConstraints,
}

interface RecordingConfig {
  fileNamePrefix?: string;
  videoConfig?: {
    height?: number;
    width?: number;
    codec?: string;
  };
}

interface DefaultOptions {
  video?: boolean;
  audio?: boolean;
  mediaConfiguration?: MediaConfiguration;
  isNonPreferredDevice?: (device: MediaDeviceInfo) => boolean;
  autoSwitchAudioDevice?: boolean;
  recording?: RecordingConfig;
}