### Install Dependencies with CocoaPods

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/iOS/README.md

Navigate to the iOS example directory and install the necessary dependencies using CocoaPods.

```bash
cd TUICallKit/iOS/Example
$ pod install
```

--------------------------------

### Run Flutter Example App

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Flutter/example/README.md

Navigate to the example directory and run the 'flutter run' command to compile and install the application on your devices.

```bash
cd TUICallKit/Flutter/example
flutter run
```

--------------------------------

### Start the React Native Demo

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/ReactNative/README.md

Run the command to start the development server for the TUICallKit React Native demo.

```bash
# TUICallKit/ReactNative
yarn start
```

--------------------------------

### Install Dependencies for React Demo

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Web/basic-react/README.md

Navigate to the basic-react directory and install the necessary project dependencies using npm.

```shell
cd ./TUICallKit/Web/basic-react
npm install
```

--------------------------------

### Install Dependencies for Vue3 Demo

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Web/basic-vue3/README.md

Navigate to the Vue3 demo directory and install the necessary project dependencies using npm.

```shell
cd ./TUICallKit/Web/basic-vue3
npm install
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/MiniProgram/wechat-callkit-demo/README.md

Install the necessary Node.js dependencies for the project using npm.

```bash
npm install
```

--------------------------------

### Run the Vue2.6 Demo

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Web/basic-vue2.6/README.md

Start the development server for the Vue 2.6 TUICallKit demo.

```shell
npm run dev
```

--------------------------------

### startLocalAudio

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Starts local audio capture.

```APIDOC
## startLocalAudio(): Promise<void>

### Description
Starts local audio capture.

### Request Example
```typescript
await TUICallKitAPI.startLocalAudio();
```
```

--------------------------------

### Install Dependencies for Vue2.7 Demo

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Web/basic-vue2.7/README.md

Navigate to the Vue 2.7 directory and install the necessary project dependencies using npm.

```shell
cd ./TUICallKit/Web/basic-vue2.7
npm install
```

--------------------------------

### Complete TUICallKit Integration Example

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

This example shows how to initialize TUICallKit, handle user login with Tencent Cloud Chat, and render the call interface. It requires user ID, SDKAppID, and userSig for authentication.

```typescript
import React, { useContext, useState } from 'react';
import { TUICallKit, TUICallKitAPI, TUICallType } from '@trtc/calls-uikit-react';
import TencentCloudChat from '@tencentcloud/lite-chat/basic';
import * as GenerateTestUserSig from './debug/GenerateTestUserSig';

export function CallApp() {
  const [userID, setUserID] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = async (inputUserID: string) => {
    try {
      const { SDKAppID, userSig, SecretKey } = 
        GenerateTestUserSig.genTestUserSig({ userID: inputUserID });

      const chat = TencentCloudChat.create({ SDKAppID });

      await TUICallKitAPI.init({
        userID: inputUserID,
        SDKAppID,
        userSig,
        tim: chat
      });

      setUserID(inputUserID);
      setIsLoggedIn(true);
    } catch (error) {
      alert(`Login failed: ${error}`);
    }
  };

  const handleAfterCalling = () => {
    console.log('Call ended, returning to home');
  };

  if (!isLoggedIn) {
    return <LoginPage onLogin={handleLogin} />;
  }

  return (
    <TUICallKit
      className="call-uikit"
      afterCalling={handleAfterCalling}
    />
  );
}

function LoginPage({ onLogin }: { onLogin: (id: string) => void }) {
  const [input, setInput] = useState('');

  return (
    <div>
      <h1>Log in to TUICallKit</h1>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Enter user ID"
      />
      <button onClick={() => onLogin(input)}>Login</button>
    </div>
  );
}

```

--------------------------------

### Install Dependencies for React Native Demo

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/ReactNative/README.md

Navigate to the React Native directory and install the necessary project dependencies and the TUICallKit package.

```bash
cd ./TUICallKit/ReactNative
yarn install
yarn add @tencentcloud/call-uikit-react-native
```

--------------------------------

### Start Local Video Preview

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Starts local video capture and displays a preview. Optionally specify a DOM element for the preview and whether to mirror the video.

```typescript
interface VideoConfig {
  element?: HTMLElement  // DOM element for video preview
  mirror?: boolean       // Whether to mirror video (default: true)
}
```

```typescript
await TUICallKitAPI.startLocalVideo({
  element: document.getElementById('local-video'),
  mirror: true
});
```

--------------------------------

### Start Local Audio

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Starts capturing local audio for the call.

```typescript
await TUICallKitAPI.startLocalAudio();
```

--------------------------------

### startLocalVideo

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Starts local video capture and preview. Optionally displays the video in a specified HTML element.

```APIDOC
## startLocalVideo(config: VideoConfig): Promise<void>

### Description
Starts local video capture and preview.

### Parameters
#### Request Body
- **element** (HTMLElement) - Optional - DOM element for video preview
- **mirror** (boolean) - Optional - Whether to mirror video (default: true)

### Request Example
```typescript
await TUICallKitAPI.startLocalVideo({
  element: document.getElementById('local-video'),
  mirror: true
});
```
```

--------------------------------

### Install Dependencies for Vue2.6

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Web/basic-vue2.6/README.md

Navigate to the Vue 2.6 directory and install the necessary project dependencies using npm.

```shell
cd ./TUICallKit/Web/basic-vue2.6
npm install
```

--------------------------------

### Runtime Configuration

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/SUMMARY.txt

Details on runtime configuration methods, initialization options, feature toggles, and user profile setup for TUICallKit.

```APIDOC
## Runtime Configuration

### Description
This section covers the runtime configuration methods available for TUICallKit. It details initialization options, feature toggles and settings, device configuration, and user profile setup. Environment-specific configurations, permissions, and operational limits are also explained.

### Platforms
- Android
- Web

### Configuration Areas
- Initialization options
- Feature toggles
- Device settings
- User profiles
- Environment-specific settings
```

--------------------------------

### Start Local Video Preview

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Initiates a local video preview within a specified DOM element. Ensure the element with the provided CSS class exists.

```typescript
await startLocalPreview('video-container');
```

--------------------------------

### Initiate a Multi-User Call

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/managers.md

Initiates a call to one or more users. The manager handles validation, scene detection, state setup, and media initialization.

```kotlin
CallManager.instance.calls(
    userIdList = listOf("user123", "user456"),
    mediaType = TUICallDefine.MediaType.Video,
    params = params,
    callback = callback
)
```

--------------------------------

### Create TUICallKit Instance

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/android-api.md

Use this method to get the singleton instance of TUICallKit. It requires the application context for initialization.

```kotlin
val tuiCallKit = TUICallKit.createInstance(context)
```

--------------------------------

### Dynamically Switch Audio/Video Devices

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Use the useDevice hook to get lists of available cameras, microphones, and speakers. Call updateCurrentDevice with the device type and the desired deviceId to switch.

```typescript
const { cameraList, micList, speakerList, updateCurrentDevice } = useDevice();

// Switch camera
await updateCurrentDevice(DEVICE_TYPE.CAMERA, cameraList[0].deviceId);

// Switch microphone
await updateCurrentDevice(DEVICE_TYPE.MIC, micList[0].deviceId);

// Switch speaker
await updateCurrentDevice(DEVICE_TYPE.SPEAKER, speakerList[0].deviceId);
```

--------------------------------

### Control Local Media Streams

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Start and stop local video and audio streams using TUICallKitAPI. Use element to specify the container for video preview and set mirror option. Stop streams when no longer needed.

```typescript
// Start video preview with mirror option
await TUICallKitAPI.startLocalVideo({
  element: document.getElementById('video-container'),
  mirror: true
});

// Start audio capture
await TUICallKitAPI.startLocalAudio();

// Stop media
await TUICallKitAPI.stopLocalVideo();
await TUICallKitAPI.stopLocalAudio();
```

--------------------------------

### Navigate to Demo Directory

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/MiniProgram/wechat-callkit-demo/README.md

Change the current directory to the WeChat Mini Program demo folder within the cloned repository.

```bash
cd ./TUICallKit/MiniProgram/wechat-callkit-demo
```

--------------------------------

### init

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Initializes TUICallKit with user credentials and chat connection. This is the first step before using any other TUICallKit features.

```APIDOC
## init(options: InitOptions): Promise<void>

### Description
Initializes TUICallKit with credentials and chat connection.

### Parameters
#### Request Body
- **userID** (string) - Required - Unique user identifier (1-64 chars, alphanumeric)
- **SDKAppID** (number) - Required - Tencent Cloud SDKAppID from console
- **userSig** (string) - Required - Generated user signature (valid 24 hours)
- **tim** (object) - Required - Initialized TencentCloudChat instance

### Throws
Error if initialization fails (invalid credentials, network error)

### Request Example
```typescript
import TencentCloudChat from '@tencentcloud/lite-chat/basic';

const chat = TencentCloudChat.create({ SDKAppID: 2100000000 });

await TUICallKitAPI.init({
  userID: 'user123',
  SDKAppID: 2100000000,
  userSig: 'generated_sig_here',
  tim: chat
});
```
```

--------------------------------

### InitOptions

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/types.md

Initialization configuration for TUICallKit. This object is used to set up the SDK with essential user and application details.

```APIDOC
## InitOptions

### Description
Initialization configuration for TUICallKit.

### Interface
```typescript
interface InitOptions {
  userID: string
  SDKAppID: number
  userSig: string
  tim: any  // TencentCloudChat instance
}
```

### Fields
#### userID (string) - Required
Unique user identifier (1-64 chars)

#### SDKAppID (number) - Required
Tencent Cloud SDKAppID

#### userSig (string) - Required
User signature (24-hour validity)

#### tim (object) - Required
Initialized TencentCloudChat instance

### Example
```typescript
const options: InitOptions = {
  userID: 'user123',
  SDKAppID: 2100000000,
  userSig: 'generated_user_sig',
  tim: chatInstance
};
await TUICallKitAPI.init(options);
```
```

--------------------------------

### Initialize TUICallKit on Web

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/index.md

Initializes TUICallKit with user credentials and a TIM instance. This is the first step for integrating TUICallKit into a web application.

```javascript
import { TUICallKit, TUICallKitAPI } from '@trtc/calls-uikit-react';

// Create TIM instance
const chat = TencentCloudChat.create({ SDKAppID });

// Initialize TUICallKit
await TUICallKitAPI.init({
  userID: 'user123',
  SDKAppID: 2100000000,
  userSig: 'generated_user_sig',
  tim: chat
});

// Render component
<TUICallKit afterCalling={handleCallEnd} />
```

--------------------------------

### CallingVibratorFeature Kotlin Class

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/managers.md

Manages device vibration for incoming calls. Use start() to initiate vibration and stop() to cease it.

```kotlin
class CallingVibratorFeature {
    fun start()
    fun stop()
}
```

--------------------------------

### Initialize TUICallKit with Web Configuration

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Pass initialization options including user ID, SDK App ID, user signature, and TIM instance to TUICallKitAPI.init(). Ensure the TencentCloudChat instance is created beforehand.

```typescript
import { TUICallKitAPI } from '@trtc/calls-uikit-react';
import TencentCloudChat from '@tencentcloud/lite-chat/basic';

// Initialize chat
const chat = TencentCloudChat.create({
  SDKAppID: 2100000000,
  testEnv: false  // Set to true for test environment
});

// Initialize TUICallKit
const initConfig = {
  userID: 'user123',
  SDKAppID: 2100000000,
  userSig: 'generated_signature',
  tim: chat
};

await TUICallKitAPI.init(initConfig);
```

--------------------------------

### Initialize TUICallKit with Options

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/types.md

Configuration object for initializing TUICallKit. Requires user identification, SDK app ID, user signature, and a TencentCloudChat instance.

```typescript
interface InitOptions {
  userID: string
  SDKAppID: number
  userSig: string
  tim: any  // TencentCloudChat instance
}
```

```typescript
const options: InitOptions = {
  userID: 'user123',
  SDKAppID: 2100000000,
  userSig: 'generated_user_sig',
  tim: chatInstance
};
await TUICallKitAPI.init(options);
```

--------------------------------

### Offline Push Configuration (Android)

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/README.md

Configure offline push notifications for group calls on Android. This setup is automatically handled for major push platforms.

```kotlin
val pushInfo = OfflinePushInfoConfig.createOfflinePushInfo(context)
// Automatically configured for FCM, APNs, Xiaomi, Huawei, OPPO, VIVO, Meizu

val params = TUICallDefine.CallParams().apply {
    offlinePushInfo = pushInfo
}

tuiCallKit.calls(userIdList, mediaType, params, callback)
```

--------------------------------

### Set User Information

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/android-api.md

Optionally set user information after creating the instance. This is typically done after user login.

```kotlin
TUICallKit.setSelfInfo()
```

--------------------------------

### CallingBellFeature Kotlin Class

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/managers.md

Manages ringtone playback for incoming calls. Use start() to begin playback, stop() to end it, and setRingtone() to specify the audio file.

```kotlin
class CallingBellFeature {
    fun start()
    fun stop()
    fun setRingtone(filePath: String)
}
```

--------------------------------

### Web Outgoing Call Flow

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/call-flow.md

Initiate a video call to a target user on the Web. This example shows the UI interaction and state updates during an outgoing call.

```plaintext
User clicks "Call" button
      
Input target user ID: "user456"
      
TUICallKitAPI.calls({
  userIDList: ['user456'],
  roomID: 12345,
  type: TUICallType.VIDEO_CALL
})
      
Permissions check (camera, microphone)
      
State update:
- CallState.scene = SINGLE_CALL
- CallState.mediaType = VIDEO
- UserState.remoteUserList = [user456]
- UserState.selfUser.callRole = Caller
- UserState.selfUser.callStatus = Waiting
      
Call screen shows: "Calling user456..."
- Shows user avatar/info
- Displays ringing indicator
- Shows cancel button
      
Wait for response (30s timeout default)
```

```typescript
function CallPage() {
  const [targetUserID, setTargetUserID] = useState('');
  const { messageApi, contextHolder, handleCallError } = useMessage();

  const handleInitiateCall = async () => {
    try {
      const roomID = Math.floor(Math.random() * 100000);
      await TUICallKitAPI.calls({
        userIDList: [targetUserID],
        roomID: roomID,
        type: TUICallType.VIDEO_CALL
      });
    } catch (error) {
      handleCallError('call', error);
    }
  };

  return (
    <>
      {contextHolder}
      <input 
        value={targetUserID}
        onChange={(e) => setTargetUserID(e.target.value)}
        placeholder="User ID"
      />
      <button onClick={handleInitiateCall}>Call</button>
      <TUICallKit afterCalling={() => console.log('Call ended')} />
    </>
  );
}
```

--------------------------------

### Handle Call Errors with Message Hook

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Example of using the `useMessage` hook to handle potential errors during an asynchronous operation like login. The `handleCallError` function provides default error messages.

```typescript
function LoginForm() {
  const { messageApi, contextHolder, handleCallError } = useMessage();

  const handleLogin = async () => {
    try {
      await TUICallKitAPI.init({...});
    } catch (error) {
      handleCallError('login', error);
    }
  };

  return (
    <>
      {contextHolder}
      <button onClick={handleLogin}>Login</button>
    </>
  );
}
```

--------------------------------

### Android TUICallKit Initialization and Calls

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/README.md

Initialize TUICallKit and make a call. Ensure the instance is created after login and profile is set.

```kotlin
val tuiCallKit = TUICallKit.createInstance(context)
tuiCallKit.calls(userIdList, mediaType, params, callback)
tuiCallKit.join(callId, callback)
tuiCallKit.setSelfInfo(nickname, avatar, callback)
```

--------------------------------

### Configure Global Settings

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/managers.md

Demonstrates how to modify global settings such as enabling float windows, disabling incoming call banners, setting screen orientation, and disabling specific control buttons.

```kotlin
GlobalState.instance.enableFloatWindow = true
GlobalState.instance.enableIncomingBanner = false
GlobalState.instance.screenOrientation = Constants.Orientation.Landscape.value
GlobalState.instance.disabledButtons = setOf(Constants.ControlButton.SwitchCamera)
```

--------------------------------

### Use Language Hook in Component

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Example of using the `useLanguage` hook within a React component to display translated text and allow language switching. Ensure `useLanguage` is called at the top level of your component.

```typescript
function Component() {
  const { t, changeLanguage } = useLanguage();
  
  return (
    <div>
      <h1>{t('Create / Log in')}</h1>
      <button onClick={() => changeLanguage('zh-CN')}>中文</button>
    </div>
  );
}
```

--------------------------------

### Initialize TencentCloudChat Instance

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Configure and create a TencentCloudChat instance with your SDKAppID and environment settings. Optional parameters like proxyServer and logLevel can also be provided.

```typescript
const chatOptions = {
  SDKAppID: 2100000000,
  testEnv: false,  // true for test environment
  // Optional: proxyServer, logLevel, etc.
};

const chat = TencentCloudChat.create(chatOptions);
```

--------------------------------

### Configure Call Parameters

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Set custom call parameters, including timeout duration, offline push information, and group chat ID. This allows for flexible call setup, especially for group calls.

```kotlin
val params = TUICallDefine.CallParams().apply {
    timeout = 60  // Change to 60 seconds
    offlinePushInfo = OfflinePushInfoConfig.createOfflinePushInfo(context)
    chatGroupId = "group123"  // For group calls
    customData = "custom_payload"
}

tuiCallKit.calls(
    userIdList = listOf("user456"),
    mediaType = TUICallDefine.MediaType.Video,
    params = params,
    callback = callback
)
```

--------------------------------

### Configure SDK Credentials

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/ReactNative/README.md

Replace placeholder values in `GenerateTestUserSig-es.js` with your actual SDKAppID and SDKSecretKey obtained from the Tencent Cloud console.

```javascript
// TUICallKit/ReactNative/src/debug/GenerateTestUserSig-es.js
// Replace with your SDKAppID and SDKSecretKey
```

--------------------------------

### Copy TUICallKit Components (Windows)

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/MiniProgram/wechat-callkit-demo/README.md

For Windows users, use xcopy to copy the TUICallKit components and WASM file to the correct locations.

```bash
xcopy node_modules\@trtc\calls-uikit-wx\ .\TUICallKit /i /e
xcopy node_modules\@trtc\call-engine-lite-wx\RTCCallEngine.wasm.br .\static\
```

--------------------------------

### Android Accept Call

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/call-flow.md

Handles call acceptance on Android by invoking CallManager.accept() internally after a user taps the Answer button. State transitions and TRTC connection setup occur. This is used when a user accepts an incoming call.

```kotlin
// User taps Answer button on incoming call UI
// CallManager.accept() called internally

// State transitions:
UserState.selfUser.callStatus.set(TUICallDefine.Status.Accept)
MediaState.isCameraOpened.set(true)  // For video calls
MediaState.isMicrophoneMuted.set(false)

// TRTC connection established
// Remote user's audio/video streams received

// ViewState updated
ViewState.router.set(ViewState.ViewRouter.VideoGridView)

// Call screen renders:
// - Remote participant video
// - Local preview
// - Call controls
// - Duration timer
```

--------------------------------

### Configure Responsive Design for Web

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Implement responsive design by detecting screen width. Use a helper function like isH5 to determine if the device is a mobile or desktop and render appropriate layouts.

```typescript
function isH5(): boolean {
  return window.innerWidth < 1024;
}

// In App.tsx
{
  isH5 
    ? <MobileLayout /> 
    : <DesktopLayout />
}
```

--------------------------------

### Make a Call

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/android-api.md

Initiate a call using the TUICallKit SDK. This can be for audio or video calls.

```kotlin
TUICallKit.calls()
```

--------------------------------

### Initialize TUICallKit

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Initializes TUICallKit with user credentials and chat connection. Requires a TencentCloudChat instance.

```typescript
interface InitOptions {
  userID: string
  SDKAppID: number
  userSig: string
  tim: any  // TencentCloudChat instance
}
```

```typescript
import TencentCloudChat from '@tencentcloud/lite-chat/basic';

const chat = TencentCloudChat.create({ SDKAppID: 2100000000 });

await TUICallKitAPI.init({
  userID: 'user123',
  SDKAppID: 2100000000,
  userSig: 'generated_sig_here',
  tim: chat
});
```

--------------------------------

### Web React TUICallKit Initialization and Calls

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/README.md

Initialize TUICallKit API and initiate a call. Requires TIM instance and credentials for initialization.

```typescript
await TUICallKitAPI.init({ userID, SDKAppID, userSig, tim })
await TUICallKitAPI.calls({ userIDList, roomID, type })
<TUICallKit afterCalling={handleCallEnd} />
```

--------------------------------

### TUICallKit.createInstance

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/android-api.md

Creates or retrieves the singleton instance of TUICallKit. This is the primary entry point for using the TUICallKit functionality.

```APIDOC
## createInstance(context: Context): TUICallKit

### Description
Creates or retrieves the singleton instance of TUICallKit.

### Method
`TUICallKit.createInstance`

### Parameters
#### Path Parameters
- **context** (Context) - Required - Application context for initialization

### Return Type
`TUICallKit` - Singleton instance

### Example
```kotlin
val tuiCallKit = TUICallKit.createInstance(context)
```
```

--------------------------------

### Configure SDK Credentials

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/iOS/README.md

Specify your application's SDKAppId and SDKSecretKey in the GenerateTestUserSig.swift file. These are obtained from the Tencent RTC Console.

```swift
let SDKAPPID: Int = 0
let SECRETKEY = ""
```

--------------------------------

### Initiate a Call

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Initiates an audio or video call to one or more users. Ensure the user list is valid and the room ID is unique.

```typescript
interface CallParams {
  userIDList: string[]
  roomID: number
  type: TUICallType
}

enum TUICallType {
  AUDIO_CALL = 1,
  VIDEO_CALL = 2
}
```

```typescript
try {
  await TUICallKitAPI.calls({
    userIDList: ['user456'],
    roomID: Math.floor(Math.random() * 100000),
    type: TUICallType.VIDEO_CALL
  });
} catch (error) {
  console.error('Call failed:', error);
}
```

--------------------------------

### Web TUICallKit Initialization

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/call-flow.md

Initialize TUICallKit on the Web. Requires TencentCloudChat instance, user signature, and rendering the TUICallKit component.

```typescript
// Step 1: Create TencentCloudChat instance
const chat = TencentCloudChat.create({
  SDKAppID: 2100000000,
  testEnv: false
});

// Step 2: Generate user signature (usually from server)
const userSig = await generateUserSig('user123');

// Step 3: Initialize TUICallKit
await TUICallKitAPI.init({
  userID: 'user123',
  SDKAppID: 2100000000,
  userSig: userSig,
  tim: chat
});

// Step 4: Render component
ReactDOM.render(
  <TUICallKit afterCalling={handleCallEnd} />,
  document.getElementById('app')
);
```

--------------------------------

### Initiate Audio or Video Call

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/android-api.md

Initiates a call to one or more users, supporting both 1-to-1 and group calls. You can specify the media type (Audio or Video) and optional call parameters like timeout and offline push information. Ensure necessary permissions are granted before making a call.

```kotlin
val params = TUICallDefine.CallParams().apply {
    timeout = 30
    offlinePushInfo = OfflinePushInfoConfig.createOfflinePushInfo(context)
}

tuiCallKit.calls(
    userIdList = listOf("user123", "user456"),
    mediaType = TUICallDefine.MediaType.Video,
    params = params,
    callback = object : TUICommonDefine.Callback {
        override fun onSuccess() {
            // Call initiated, UI will show calling screen
        }
        override fun onError(code: Int, msg: String?) {
            Toast.makeText(context, "Call failed: $msg", Toast.LENGTH_SHORT).show()
        }
    }
)
```

--------------------------------

### Configure SDKAppID and SDKSecretKey

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Web/basic-vue2.6/README.md

Input your Tencent RTC Console SDKAppID and SDKSecretKey into the GenerateTestUserSig-es.js file for authentication.

```javascript
let SDKAppID = 0;
let SecretKey = '';
```

--------------------------------

### 1-to-1 Video Call (Web)

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/README.md

Initialize TUICallKit and initiate a 1-to-1 video call in a web application. Requires user authentication and TIM SDK initialization.

```typescript
import { TUICallKit, TUICallKitAPI, TUICallType } from '@trtc/calls-uikit-react';
import TencentCloudChat from '@tencentcloud/lite-chat/basic';

export function App() {
  const handleLogin = async (userID: string) => {
    const chat = TencentCloudChat.create({ SDKAppID: 2100000000 });
    const userSig = await generateUserSig(userID);
    
    await TUICallKitAPI.init({ userID, SDKAppID: 2100000000, userSig, tim: chat });
  };

  const handleCall = async (targetUserID: string) => {
    await TUICallKitAPI.calls({
      userIDList: [targetUserID],
      roomID: Math.random() * 100000,
      type: TUICallType.VIDEO_CALL
    });
  };

  return (
    <>
      <LoginForm onLogin={handleLogin} />
      <CallForm onCall={handleCall} />
      <TUICallKit afterCalling={() => console.log('Call ended')} />
    </>
  );
}
```

--------------------------------

### Initialize TUICallKit on Android

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/index.md

Creates an instance of TUICallKit for Android and sets the user's information. This is required before making or receiving calls on Android.

```kotlin
val tuiCallKit = TUICallKit.createInstance(context)
tuiCallKit.setSelfInfo("nickname", "avatar_url") {
    // Callback
}
```

--------------------------------

### Configure Video Preview/Capture

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/types.md

Settings for video preview or capture, including an optional DOM element for display and a mirror option.

```typescript
interface VideoConfig {
  element?: HTMLElement
  mirror?: boolean
}
```

--------------------------------

### Call Flow

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/SUMMARY.txt

Detailed documentation of the complete call lifecycle, from initialization to termination, for TUICallKit.

```APIDOC
## Call Flow

### Description
This section provides complete documentation for the call lifecycle within TUICallKit. It covers the initialization flow for both Web and Android, handling of outgoing and incoming calls, the active call phase, and call termination. Group call scenarios, error recovery flows, cross-platform interoperability, and state diagrams are also detailed.

### Platforms
- Android
- Web

### Call Lifecycle Stages
- Initialization
- Outgoing/Incoming calls
- Call acceptance
- Active call phase
- Call termination
- Group calls
```

--------------------------------

### Clone TUICallKit Repository

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Web/basic-vue2.6/README.md

Clone the TUICallKit repository to your local machine to begin.

```shell
git clone https://github.com/tencentyun/TUICallKit.git
```

--------------------------------

### React Context for User Info

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Demonstrates how to import and use the UserInfoContext for managing user state within a React component. Ensure the context provider is set up correctly in your application.

```typescript
import { UserInfoContext } from './context';

export interface IUserInfoContext {
  userInfo: IUserInfo
  setUserInfo: React.Dispatch<IUserInfo>
}

// Usage in component
const { userInfo, setUserInfo } = useContext(UserInfoContext);
```

--------------------------------

### Specify SDKAppID and SDKSecretKey in GenerateTestUserSig

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Android/README.md

Replace the placeholder values with your actual SDKAppID and SDKSecretKey obtained from the Tencent RTC Console. This is required for the sample app to function correctly.

```java
public static final int SDKAPPID = SDKAppID;
private static final String SECRETKEY = SDKSecretKey;
```

--------------------------------

### Create TUICallKit Instance

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/android-api.md

Call this method to create an instance of TUICallKit. Ensure you pass the application context.

```kotlin
TUICallKit.createInstance(context)
```

--------------------------------

### Production Configuration for TUICallKit

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Set up TUICallKit for production by generating userSig on the server-side. Avoid hardcoding SecretKey in frontend code.

```typescript
// Production should use server-side signature generation
// Never hardcode SecretKey in frontend

// Server endpoint to generate userSig
async function generateUserSig(userID: string): Promise<string> {
  const response = await fetch('/api/generate-user-sig', {
    method: 'POST',
    body: JSON.stringify({ userID })
  });
  const { userSig } = await response.json();
  return userSig;
}

// Use generated signature
const userSig = await generateUserSig('user123');
await TUICallKitAPI.init({
  userID: 'user123',
  SDKAppID,
  userSig,
  tim: chat
});
```

--------------------------------

### Define Parameters for Initiating a Call

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/types.md

Specifies the users to call, the room ID, and the call type (audio or video). Ensure user IDs are valid and within the allowed count.

```typescript
interface CallParams {
  userIDList: string[]
  roomID: number
  type: TUICallType
}
```

--------------------------------

### Initialize useDevice Hook

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

Imports and destructures properties and methods from the useDevice hook for device management.

```typescript
import { useDevice } from '@trtc/calls-uikit-react';

const {
  cameraList,
  micList,
  speakerList,
  volume,
  startLocalPreview,
  updateLocalPreview,
  updateCurrentDevice
} = useDevice();
```

--------------------------------

### GlobalState Configuration

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/managers.md

GlobalState manages application-wide configuration settings, including UI behaviors like float windows, virtual backgrounds, and incoming call banners, as well as screen orientation and disabled buttons.

```kotlin
object GlobalState {
    var enableFloatWindow: Boolean
    var enableVirtualBackground: Boolean
    var enableIncomingBanner: Boolean
    var enablePipMode: Boolean
    var callAdapter: CallAdapter?
    var screenOrientation: Int
    var disabledButtons: Set<Constants.ControlButton>
}
```

--------------------------------

### Enable TUICallKit Features

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Enable optional features like mute mode, float window, virtual background, and incoming banner. Configure screen orientation for different devices.

```kotlin
val tuiCallKit = TUICallKit.createInstance(context)

// Enable all optional features
tuiCallKit.enableMuteMode(true)          // Silent incoming calls
tuiCallKit.enableFloatWindow(true)        // Allow float window
tuiCallKit.enableVirtualBackground(true)  // Enable background blur/replacement
tuiCallKit.enableIncomingBanner(true)     // Show banner instead of full screen
tuiCallKit.setScreenOrientation(1)        // Landscape mode
```

--------------------------------

### VideoConfig

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/types.md

Configuration for video preview and capture, including the DOM element for display and mirror options.

```APIDOC
## VideoConfig

### Description
Configuration for video preview/capture.

### Interface
```typescript
interface VideoConfig {
  element?: HTMLElement
  mirror?: boolean
}
```

### Fields
#### element (HTMLElement?) - Optional
DOM container for video display

#### mirror (boolean?) - Optional
Mirror/flip video horizontally
```

--------------------------------

### Copy TUICallKit Components (macOS)

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/MiniProgram/wechat-callkit-demo/README.md

For macOS users, copy the TUICallKit components and WASM file to the appropriate directories for local development.

```bash
mkdir -p ./TUICallKit && cp -r node_modules/@trtc/calls-uikit-wx/ ./TUICallKit && cp node_modules/@trtc/call-engine-lite-wx/RTCCallEngine.wasm.br ./static/
```

--------------------------------

### Configure Viewport Meta Tag for Miniprograms

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/uni-app/TUICallKit-Miniprogram/TUICallKit-Vue2/index.html

This script dynamically sets the viewport meta tag, including `viewport-fit=cover` for safe area support if the browser environment is detected to support it. This ensures proper scaling and layout on devices with notches or cutouts.

```javascript
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write( '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
```

--------------------------------

### Configure Ant Design Theme for TUICallKit Demo

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Apply custom theming to the TUICallKit demo application using Ant Design's ConfigProvider. Define primary color and border radius for UI elements.

```typescript
import { ConfigProvider } from 'antd';

const AntdConfig = {
  token: {
    colorPrimary: '#1677ff',
    borderRadius: 6,
  },
};

export default function App() {
  return (
    <ConfigProvider theme={AntdConfig}>
      <TUICallKit />
    </ConfigProvider>
  );
}
```

--------------------------------

### GlobalState

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/managers.md

Provides access to global configuration and settings for the call kit.

```APIDOC
## GlobalState

Global configuration and settings.

### Properties

- **enableFloatWindow** (Boolean): Allow float window. Default: false.
- **enableVirtualBackground** (Boolean): Enable background effects. Default: false.
- **enableIncomingBanner** (Boolean): Show banner for incoming calls. Default: false.
- **enablePipMode** (Boolean): Picture-in-picture support. Default: false.
- **callAdapter** (CallAdapter?): Custom UI adapter. Default: null.
- **screenOrientation** (Int): Screen orientation (0=Portrait, 1=Landscape, 2=Auto). Default: 0.
- **disabledButtons** (Set<ControlButton>): Disabled UI buttons. Default: empty set.
```

--------------------------------

### DEVICE_TYPE

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/types.md

Enumeration for device types used in device switching, such as camera, microphone, and speaker.

```APIDOC
## DEVICE_TYPE

### Description
Device type enumeration for device switching.

### Enum
```typescript
enum DEVICE_TYPE {
  CAMERA = 0,
  MIC = 1,
  SPEAKER = 2
}
```

### Members
#### CAMERA
Camera device

#### MIC
Microphone device

#### SPEAKER
Speaker/output device
```

--------------------------------

### Initiate a Single-User Call (Deprecated)

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/managers.md

Use this method to initiate a call to a single user. It is deprecated in favor of the `calls()` method.

```kotlin
CallManager.instance.call(
    userId = "user456",
    mediaType = TUICallDefine.MediaType.Video,
    params = params,
    callback = callback
)
```

--------------------------------

### Configure SDKAppID and SDKSecretKey

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/Flutter/example/README.md

Specify your application's SDKAppID and SDKSecretKey in the generate_test_user_sig.dart file to authenticate with Tencent RTC services.

```dart
class GenerateTestUserSig {
    ...
    static int sdkAppId = SDKAppID;
    static String secretKey = 'SDKSecretKey';
    ...
}
```

--------------------------------

### Development Configuration for TUICallKit

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Configure TUICallKit for development using a test environment. Ensure you replace placeholder values for SDKAppID and SecretKey.

```typescript
// src/debug/GenerateTestUserSig-es.js
export const SDKAppID = 2100000000;  // Your test app ID
export const SecretKey = 'your_secret_key';  // Your secret key

// Test environment chat
const chat = TencentCloudChat.create({
  SDKAppID,
  testEnv: true  // Use test environment
});
```

--------------------------------

### useDevice Hook

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/web-api.md

The `useDevice` hook provides functionalities to manage camera, microphone, and speaker devices, as well as control local video preview and audio visualization.

```APIDOC
## Hook: useDevice

Custom React hook for device management and audio visualization.

### Hook Properties

| Property | Type | Description |
|----------|------|-------------|
| cameraList | IDeviceInfo[] | Available camera devices |
| micList | IDeviceInfo[] | Available microphone devices |
| speakerList | IDeviceInfo[] | Available speaker devices |
| volume | number | Current audio volume level (0-100) |

### Hook Methods

#### startLocalPreview(viewId: string): Promise<void>

Starts local video preview in a DOM element with given class name.

| Parameter | Type | Description |
|-----------|------|-------------|
| viewId | string | CSS class name of container element |

**Example**:
```typescript
await startLocalPreview('video-container');
```

#### updateLocalPreview(isMirror: boolean): Promise<void>

Updates mirror/flip setting for local preview.

| Parameter | Type | Description |
|-----------|------|-------------|
| isMirror | boolean | true to mirror, false for normal |

#### updateCurrentDevice(type: DEVICE_TYPE, deviceId: string): Promise<void>

Switches to a different camera, microphone, or speaker.

| Parameter | Type | Description |
|-----------|------|-------------|
| type | DEVICE_TYPE | Device type to switch |
| deviceId | string | Device ID from device list |

**Example**:
```typescript
await updateCurrentDevice(DEVICE_TYPE.CAMERA, 'device_id_123');
```
```

--------------------------------

### Configure SDK Credentials

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/MiniProgram/wechat-callkit-demo/README.md

Modify the SDKAPPID and SECRETKEY in the GenerateTestUserSig-es.js file. Refer to the documentation for obtaining these credentials.

```javascript
// Modify SDKAPPID and SECRETKEY in ./TUICallKit/debug/GenerateTestUserSig-es.js
```

--------------------------------

### Initiate Web Group Call

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/call-flow.md

Initiates a video group call to multiple specified users. The scene is automatically set to MULTI_CALL.

```typescript
await TUICallKitAPI.calls({
  userIDList: ['user1', 'user2', 'user3'],
  roomID: 54321,
  type: TUICallType.VIDEO_CALL
});

// Scene automatically set to MULTI_CALL
// Each user receives same call invitation
```

--------------------------------

### Configure Viewport Meta Tag for TUICallKit

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/uni-app/TUICallKit-Miniprogram/TUICallKit-Vue3/index.html

This script configures the viewport meta tag, dynamically including 'viewport-fit=cover' if the browser supports CSS env() or constant() for safe area handling. This is crucial for ensuring a proper layout on devices with screen notches.

```javascript
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)') \
) \
document.write( '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
```

--------------------------------

### Set User Profile Information

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Configure the user's profile information, including nickname and avatar URL, before making calls. Includes constraints on nickname and avatar URL length and format.

```kotlin
tuiCallKit.setSelfInfo(
    nickname = "John Doe",
    avatar = "https://example.com/avatar.jpg",
    callback = object : TUICommonDefine.Callback {
        override fun onSuccess() {
            Log.d("Config", "Profile configured")
        }
        override fun onError(code: Int, msg: String?) {
            Log.e("Config", "Failed: $msg")
        }
    }
)
```

--------------------------------

### Call Experimental API

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Configure experimental or advanced features using a JSON string. This allows for enabling features like AI transcriber, noise suppression, and automatic gain control (AGC).

```kotlin
val experimentalConfig = """
{
    "enableAITranscriber": true,
    "enableNoiseSuppression": true,
    "enableAGC": true
}
"""

tuiCallKit.callExperimentalAPI(experimentalConfig)
```

--------------------------------

### Audio Playback Device Configuration

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/configuration.md

Select the audio playback device for calls. Options include Speakerphone and Earpiece. Video calls default to speakerphone, while audio calls default to earpiece for privacy.

```kotlin
// In CallManager (internal use)
selectAudioPlaybackDevice(TUICommonDefine.AudioPlaybackDevice.Speakerphone)  // Speaker
selectAudioPlaybackDevice(TUICommonDefine.AudioPlaybackDevice.Earpiece)       // Earpiece
```

--------------------------------

### Fetch Multiple User Information

Source: https://github.com/tencent-rtc/tuicallkit/blob/main/_autodocs/managers.md

Fetches information for a list of users. The callback provides the updated user information or an error message.

```kotlin
UserManager.instance.updateUserListInfo(
    userIdList = listOf("user1", "user2", "user3"),
    callback = object : TUICommonDefine.ValueCallback<List<UserState.User>?> {
        override fun onSuccess(data: List<UserState.User>?) {
            // User info updated with nickname, avatar
        }
        override fun onError(errCode: Int, errMsg: String?) {
            // Fall back to showing user IDs
        }
    }
)
```