← Cloudflare Realtime / realtime / realtimekit

Создание с помощью Core SDK

Инициализируйте Core SDK

Чтобы интегрировать Core SDK, вам нужно инициализировать его с помощью токен авторизации участника, а затем используйте предоставленные API SDK для управления пиром в сессии.

Процесс инициализации может немного отличаться в зависимости от вашего технологического стека. Выберите подходящий стек технологий ниже.

Установите клиентский SDK

npm i @cloudflare/realtimekit-react

Используйте useRealtimeKitClient хук для инициализации 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>;

}

Используйте API добавления участника чтобы получить authToken.

Установите клиентский SDK.

npm i @cloudflare/realtimekit

Как вариант, можно также использовать CDN.

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

Вы можете инициализировать SDK с помощью RealtimeKitClient.init.

	const authToken = <auth-token>;

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

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

Используйте API добавления участника чтобы получить authToken.

Установите клиентский SDK.

npm i @cloudflare/realtimekit-angular

Вы можете инициализировать SDK с помощью 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();
	}
}

Используйте API добавления участника чтобы получить authToken.

Инициализируйте RealtimeKit SDK, получив экземпляр RealtimeKitClient с помощью RealtimeKitMeetingBuilder вспомогательную функцию.

val meeting = RealtimeKitMeetingBuilder.build(activity)

Настройте свойства встречи в RtkMeetingInfo класс с действительным участником authToken из API добавления участника.

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

Инициализируйте встречу, вызвав init() метод. Это устанавливает соединение с сервером встреч RealtimeKit.

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

Инициализируйте RealtimeKit SDK, создав экземпляр RealtimeKitClient.

let meeting = RealtimeKitiOSClientBuilder().build()

Добавьте необходимые слушатели, чтобы получать колбэки событий встречи.

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

Настройте свойства встречи в RtkMeetingInfo класс с действительным участником authToken из API добавления участника.

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

Инициализируйте встречу, вызвав doInit() метод. Это устанавливает соединение с сервером встреч RealtimeKit.

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

Инициализируйте RealtimeKit SDK с помощью useRealtimeKitClient хук.

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

Используйте API добавления участника чтобы получить authToken.

Advanced Options

Вы можете по желанию настраивают параметры встречи по умолчанию, качество медиа, настройки демонстрации экрана, параметры simulcast, поведение ICE-соединения, логирование и обработку ошибок при инициализации 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
	},
});

Вы можете передать следующие параметры в качестве defaults чтобы изменить поведение по умолчанию.

Опция	Описание	Тип	Обязательный
видео	Указывает, должно ли видео быть включено по умолчанию	`boolean`	false
аудио	Указывает, должен ли звук быть включён по умолчанию	`boolean`	false
mediaConfiguration	Позволяет передавать собственные ограничения качества медиа	`MediaConfiguration`	false
autoSwitchAudioDevice	Автоматическое переключение на недавно подключённый микрофон или динамик	`boolean`	false
isNonPreferredDevice	Позволяет отмечать отдельные устройства как «нежелательные»	`(device: MediaDeviceInfo) => boolean`	false
запись	Позволяет настроить параметры записи	RecordingConfig	false

Справочник по типам:

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

Настройки встречи по умолчанию можно задать с помощью enableAudio и enableVideo параметры.