Build using Core SDK

Build using Core SDK

Last updated Oct 19, 2026

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.

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

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

    useEffect(() => {
      const meetingDefaultOptions = {
        audio: true,
        video: true,
      };

        initMeeting({
        authToken: "<auth-token>",
        defaults: meetingDefaultOptions, // optional
      });
    }, []);

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

    return <div></div>;

}

Use the Add 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.

    // Skip this import if you are using the CDN. RealtimeKitClient is available globally.
    import RealtimeKitClient from "@cloudflare/realtimekit";

    const authToken = <auth-token>;

    const meetingDefaultOptions = {
        audio: true,
        video: true,
    };

    RealtimeKitClient.init({
      authToken,
      defaults: meetingDefaultOptions, // optional
    }).then((meeting) => {
        // next - meeting.join();
    });

Use the Add participant API to fetch the authToken.

Install the client SDK.

npm i @cloudflare/realtimekit

You can initialise the SDK using RealtimeKitClient.init.

import RealtimeKitClient from "@cloudflare/realtimekit";
class AppComponent {
    title = "MyProject";
    rtkMeeting: RealtimeKitClient;

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

Use the Add participant API to fetch the authToken.

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

val meeting = RealtimeKitMeetingBuilder.build(activity)

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

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.

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

Initialize the RealtimeKit SDK by creating an instance of RealtimeKitClient.

let meeting = RealtimeKitiOSClientBuilder().build()

Add the required listeners to receive callbacks for meeting events.

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 Add participant API.

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.

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

Initialize the RealtimeKit SDK using the useRealtimeKitClient hook.

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 Add participant API to fetch the authToken.

Advanced Options

You can optionally configure meeting defaults, media quality, screen share preferences, simulcast settings, ice connection behavior, logging, and error handling while initializing the SDK.

init({
    authToken: "<auth_token>",
    defaults: {
        video: true,
        audio: true,
        mediaConfiguration: {
            // Configure custom video quality (e.g., 1080p). Disable simulcast using `simulcastConfig` override for single-layer streaming.
            video: {
                width: { ideal: 1920 },
                height: { ideal: 1080 },
                frameRate: { ideal: 15 },
            },
            screenshare: {
                frameRate: { ideal: 15, max: 30 }, // Default 5
                displaySurface: "monitor", // Given surface is suggested to the end user
            },
        },
    },
    overrides: {
        simulcastConfig: {
            // If you want to disable simulcast
            disable: false,
            // If you want to pass custom simulcast encodings
            encodings: [
                {
                    rid: "f", // full / highest quality
                    scaleResolutionDownBy: 1.0,
                    maxBitrate: 2500000, // ~2.5 Mbps
                },
                {
                    rid: "h", // half
                    scaleResolutionDownBy: 2.0,
                    maxBitrate: 900000, // ~0.9 Mbps
                },
                {
                    rid: "q", // quarter
                    scaleResolutionDownBy: 4.0,
                    maxBitrate: 250000, // ~0.25 Mbps
                },
            ],
        },
        forceRelay: false, // forceRelay, if true, TURN will be preferred over STUN
    },
    modules: {
        devTools: {
            logs: true, // Prints SDK logs to console, Useful in initial integration phase
        },
    },
    onError: (error) => {
        console.error(error); // SDK errors, Useful in detecting common issues
    },
});

Tip

onError callback is used to handle SDK errors. These errors can be caused by an invalid auth token, network issues, media permissions, and so on. Each error is thrown with a unique error code. Refer to Error codes.

You can pass the following options as defaults to alter default behavior.

Option	Description	Type	Required
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 newly plugged microphone or speaker	`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

Note

By default, audio and video are auto enabled, as per preset permissions. SDK uses 640x480 quality as default for group calls, which can be overridden with mediaConfiguration. By default, the SDK automatically switches to the best available device and marks virtual devices as not preferred.

Reference for the types:

interface AudioQualityConstraints {
    echoCancellation?: boolean;
    noiseSuppression?: 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;
}

interface Overrides {
    simulcastConfig?: {
        disable?: boolean;
        encodings?: RTCRtpEncodingParameters[];
    };
    forceRelay?: boolean;
}

You can configure meeting defaults using enableAudio and enableVideo parameters.

Was this helpful?

YesNo

{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/core/#page","headline":"Build using Core SDK","description":"Initialize and build with the RealtimeKit Core SDK for full control over video calls.","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/core/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/core/og.png?v=73b47178a9b7ca88","dateModified":"2026-10-19","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: API reference for the RealtimeKit Core SDK methods, events, and properties. title: API Reference image: https://developers.cloudflare.com/realtime/realtimekit/humans/core/api-reference/og.png?v=b041b6acf088f974

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt
Use this file to discover all available pages before exploring further.

Build using Core SDK

Build using Core SDK

Initialize Core SDK

Advanced Options

On this page