跳转到主要内容

Build using Core SDK

import RTKSDKSelector from "/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro"; import RTKCodeSnippet from "/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro";

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.

Install the client SDK ```bash 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. ```bash 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. 
```kotlin
val meeting = RealtimeKitMeetingBuilder.build(activity)
```

Configure the meeting properties in the `RtkMeetingInfo` class with a valid participant `authToken` from the [Add participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/).

```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
meeting.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 [Add participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/).

```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 using the `useRealtimeKitClient` hook. 
```js
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

<RTKCodeSnippet id={["web-react", "web-angular", "web-web-components", "mobile-react-native"]}>

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

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

<RTKCodeSnippet id={["mobile-android", "mobile-ios"]}>

You can configure meeting defaults using enableAudio and enableVideo parameters.

这篇文档对你有帮助吗？
想留言或继续讨论？请到 Cyberforums 赛博论坛参与。 参与讨论 / 回复