← Cloudflare Realtime / realtime / realtimekit

Vytváření pomocí Core SDK

Inicializujte Core SDK

Abyste mohli Core SDK integrovat, musíte ho inicializovat pomocí autentizační token účastníka, a poté pomocí poskytnutých SDK API ovládejte peer v relaci.

Inicializace se může mírně lišit v závislosti na vašem tech stacku. Níže si vyberte svůj preferovaný tech stack.

Nainstalujte klientský SDK

npm i @cloudflare/realtimekit-react

Použijte useRealtimeKitClient hook k inicializaci 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>;

}

Použijte Přidání účastníka (API) a načíst tak authToken.

Nainstalujte klientský SDK.

npm i @cloudflare/realtimekit

Alternativně můžete použít také CDN.

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

SDK můžete inicializovat pomocí RealtimeKitClient.init.

	const authToken = <auth-token>;

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

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

Použijte Přidání účastníka (API) a načíst tak authToken.

Nainstalujte klientský SDK.

npm i @cloudflare/realtimekit-angular

SDK můžete inicializovat pomocí RealtimeKitClient.init.

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

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

Použijte Přidání účastníka (API) a načíst tak authToken.

Inicializujte RealtimeKit SDK získáním instance RealtimeKitClient pomocí RealtimeKitMeetingBuilder pomocnou funkci.

val meeting = RealtimeKitMeetingBuilder.build(activity)

Nakonfigurujte vlastnosti schůzky v RtkMeetingInfo třídu s platným účastníkem authToken z Přidání účastníka (API).

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

Inicializujte schůzku zavoláním init() metodu. Tím se naváže spojení se serverem schůzky RealtimeKit.

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

Inicializujte RealtimeKit SDK vytvořením instance RealtimeKitClient.

let meeting = RealtimeKitiOSClientBuilder().build()

Přidejte požadované listenery, abyste dostávali callbacky pro události schůzky.

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

Nakonfigurujte vlastnosti schůzky v RtkMeetingInfo třídu s platným účastníkem authToken z Přidání účastníka (API).

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

Inicializujte schůzku zavoláním doInit() metodu. Tím se naváže spojení se serverem schůzky RealtimeKit.

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

Inicializujte RealtimeKit SDK pomocí 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>
    )
  }
}

Použijte Přidání účastníka (API) a načíst tak authToken.

Advanced Options

Můžete volitelně nastavíte výchozí hodnoty schůzky, kvalitu médií, předvolby sdílení obrazovky, nastavení simulcastu, chování ICE připojení, logování a zpracování chyb při inicializaci 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
	},
});

Následující možnosti můžete předat jako defaults a změníte tak výchozí chování.

Možnost	Popis	Typ	Povinné
video	Zda má být video ve výchozím nastavení povoleno	`boolean`	false
audio	Zda má být zvuk ve výchozím nastavení povolen	`boolean`	false
mediaConfiguration	Umožňuje předat vlastní omezení kvality médií	`MediaConfiguration`	false
autoSwitchAudioDevice	Automatické přepnutí na nově připojený mikrofon nebo reproduktor	`boolean`	false
isNonPreferredDevice	Umožňuje označit konkrétní zařízení jako "not preferred"	`(device: MediaDeviceInfo) => boolean`	false
nahrávání	Umožňuje nastavit parametry nahrávání	RecordingConfig	false

Reference k typům:

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;
}

Výchozí nastavení schůzky můžete nakonfigurovat pomocí enableAudio a enableVideo parametry.