使用 Core SDK 构建

初始化 Core SDK

要集成 Core SDK，您需要使用参与者的身份验证令牌对其进行初始化，然后使用提供的 SDK API 在会话中控制 peer。

根据您的技术栈，初始化过程可能会略有不同。请在下方选择您偏好的技术栈。

安装客户端 SDK

npm i @cloudflare/realtimekit-react

使用 useRealtimeKitClient hook 来初始化 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, // 可选
      });
    }, []);

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

    return <div></div>;

}

使用 Add participant API 来获取 authToken。

安装客户端 SDK。

npm i @cloudflare/realtimekit

或者，您也可以使用 CDN。

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

您可以使用 RealtimeKitClient.init 来初始化 SDK。

	const authToken = <auth-token>;

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

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

使用 Add participant API 来获取 authToken。

安装客户端 SDK。

npm i @cloudflare/realtimekit-angular

您可以使用 RealtimeKitClient.init 来初始化 SDK。

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, // 可选
		});
		// next - meeting.join();
	}
}

使用 Add participant API 来获取 authToken。

使用 RealtimeKitMeetingBuilder 助手获取 RealtimeKitClient 实例，从而初始化 RealtimeKit SDK。

val meeting = RealtimeKitMeetingBuilder.build(activity)

使用来自 Add participant API 的有效参与者 authToken，在 RtkMeetingInfo 类中配置会议属性。

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

通过调用 init() 方法初始化会议。这将与 RealtimeKit 会议服务器建立连接。

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

通过创建 RealtimeKitClient 实例来初始化 RealtimeKit SDK。

let meeting = RealtimeKitiOSClientBuilder().build()

添加所需的监听器以接收会议事件的回调。

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

使用来自 Add participant API 的有效参与者 authToken，在 RtkMeetingInfo 类中配置会议属性。

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

通过调用 doInit() 方法初始化会议。这将与 RealtimeKit 会议服务器建立连接。

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

通过创建 RealtimeKitClient 实例来初始化 RealtimeKit SDK。

final meeting = RealtimeKitClient();

使用来自 Add participant API 的有效参与者 authToken，在 RtkMeetingInfo 类中配置会议属性。

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

通过调用 init() 方法初始化连接。这将与 RealtimeKit 会议服务器建立连接。

meeting.init(meetingInfo);

订阅 RtkMeetingRoomEventListener 以接收会议事件的回调。

meeting.addMeetingRoomEventListener(RoomStateNotifier());

使用 useRealtimeKitClient hook 初始化 RealtimeKit SDK。

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

使用 Add participant API 来获取 authToken。

高级选项

您可以在初始化 SDK 时选择性地配置会议默认值、媒体质量、屏幕共享偏好、联播（simulcast）设置、ICE 连接行为、日志记录和错误处理。

init({
	authToken: "<auth_token>",
	defaults: {
		video: true,
		audio: true,
		mediaConfiguration: {
			// 配置自定义视频质量（例如 1080p）。对于单层流传输，使用 `simulcastConfig` 重写来禁用联播。
			video: {
				width: { ideal: 1920 },
				height: { ideal: 1080 },
				frameRate: { ideal: 15 },
			},
			screenshare: {
				frameRate: { ideal: 15, max: 30 }, // 默认 5
				displaySurface: "monitor", // 向最终用户建议给定的表面
			},
		},
	},
	overrides: {
		simulcastConfig: {
			// 如果要禁用联播
			disable: false,
			// 如果要传入自定义联播编码
			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，如果是 true，TURN 将优于 STUN
	},
	modules: {
		devTools: {
			logs: true, // 将 SDK 日志打印到控制台，在初始集成阶段很有用
		},
	},
	onError: (error) => {
		console.error(error); // SDK 错误，在检测常见问题时很有用
	},
});

您可以将以下选项作为 defaults 传入，以更改默认行为。

选项	说明	类型	是否必填
video	是否默认启用视频	`boolean`	false
audio	是否默认启用音频	`boolean`	false
mediaConfiguration	允许您传入自定义媒体质量约束	`MediaConfiguration`	false
autoSwitchAudioDevice	自动切换到新插入的麦克风或扬声器	`boolean`	false
isNonPreferredDevice	允许您将特定设备设置为“非首选”	`(device: MediaDeviceInfo) => boolean`	false
recording	允许您配置录制设置	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;
}