### Install CocoaPods Dependencies

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

Navigate to the iOS example directory and install required CocoaPods dependencies. This must be run before building the application.

```bash
cd TUILiveKit/iOS/Example
pod install
```

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

### Clone TUILiveKit Repository

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

Command to clone the TUILiveKit iOS project from GitHub. This retrieves the complete source code and example application.

```bash
git clone https://github.com/Tencent-RTC/TUILiveKit.git
```

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

### Configure SDKAppID and SDKSecretKey in Swift

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

Set up authentication credentials in GenerateTestUserSig.swift file. Replace placeholder values with actual SDKAppID (integer) and SDKSecretKey (string) obtained from TRTC console.

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

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

### Android Video Live Streaming API - TUILiveKit

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Initialize, start, join, stop, and leave video live streams using the VideoLiveKit interface on Android. Launches pre-built activities for host and audience experiences.

```java
Context context = this;
VideoLiveKit videoLiveKit = VideoLiveKit.createInstance(context);

// Start live streaming as host
String roomId = "live_" + userId;
videoLiveKit.startLive(roomId);
// This launches VideoLiveAnchorActivity with camera and controls

// Join existing live stream as audience
String hostRoomId = "live_host123";
videoLiveKit.joinLive(hostRoomId);
// This launches VideoLiveAudienceActivity to watch the stream

// Alternative: Join using LiveInfo object
TUILiveListManager.LiveInfo liveInfo = new TUILiveListManager.LiveInfo();
liveInfo.roomId = "live_host123";
liveInfo.ownerId = "host123";
videoLiveKit.joinLive(liveInfo);

// Stop live streaming (for host)
videoLiveKit.stopLive(new TUIRoomDefine.ActionCallback() {
    @Override
    public void onSuccess() {
        Log.d("LiveKit", "Successfully stopped live stream");
        finish();
    }

    @Override
    public void onError(int errorCode, String errorMessage) {
        Log.e("LiveKit", "Failed to stop: " + errorMessage);
    }
});

// Leave live stream (for audience)
videoLiveKit.leaveLive(new TUIRoomDefine.ActionCallback() {
    @Override
    public void onSuccess() {
        Log.d("LiveKit", "Successfully left live stream");
        finish();
    }

    @Override
    public void onError(int errorCode, String errorMessage) {
        Log.e("LiveKit", "Failed to leave: " + errorMessage);
    }
});
```

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

### Flutter TUILiveRoomAnchorWidget - Start Video Live Streaming

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

This Dart code demonstrates how to use the TUILiveRoomAnchorWidget in Flutter to start a video live stream. It shows how to generate a room ID using LiveIdentityGenerator and navigate to the live streaming interface, including handling the live end callback.

```dart
import 'package:flutter/material.dart';
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// Generate unique room ID for video live
final String userId = 'user123';
final String roomId = LiveIdentityGenerator.instance
    .generateId(userId, RoomType.live); // Returns "live_user123"

// Navigate to live streaming screen
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return TUILiveRoomAnchorWidget(
        roomId: roomId,
        // Optional callbacks
        onLiveEnd: () {
          debugPrint('Live stream ended');
          Navigator.pop(context);
        },
      );
    },
  ),
);
```

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

### iOS VideoLiveKit - Manage Video Live Streams

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

This Swift code snippet shows how to use the VideoLiveKit for live video streaming on iOS. It covers initializing the singleton, enabling/disabling the follow feature, starting a live stream as a host, joining a stream as an audience, stopping a stream, leaving a stream, and managing the floating window feature.

```swift
import TUILiveKit
import TUICore

// Initialize VideoLiveKit singleton
let videoLiveKit = VideoLiveKit.createInstance()

// Enable/disable follow feature
await videoLiveKit.enableFollowFeature(true)

// Start live streaming as host
let userId = TUILogin.getUserID() ?? ""
let roomId = "live_(userId)"
await videoLiveKit.startLive(roomId: roomId)
// This presents TUILiveRoomAnchorViewController fullscreen

// Join live stream as audience
let hostRoomId = "live_host123"
await videoLiveKit.joinLive(roomId: hostRoomId)
// This presents TUILiveRoomAudienceViewController fullscreen

// Stop live streaming (for host)
await videoLiveKit.stopLive {
    print("Successfully stopped live stream")
    // Navigate away or show completion UI
} onError: { errorCode, errorMessage in
    print("Failed to stop: (errorMessage)")
}

// Leave live stream (for audience)
await videoLiveKit.leaveLive {
    print("Successfully left live stream")
    // Return to previous screen
} onError: { errorCode, errorMessage in
    print("Failed to leave: (errorMessage)")
}

// Check if floating window is active
if FloatWindow.shared.isShowingFloatWindow() {
    print("Live stream is in floating window mode")
    // Release floating window
    FloatWindow.shared.releaseFloatWindow()
}
```

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

### iOS TUILogin - Authenticate Users with SDKAppID and UserSig

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

This Swift code snippet demonstrates how to log in and log out of Tencent services using TUILogin. It requires SDKAppID and a generated UserSig for authentication. The example shows successful login navigation and error handling, as well as retrieving user information and logging out.

```swift
import TUICore

// Configure credentials (for testing only)
class GenerateTestUserSig {
    static let SDKAPPID: Int = 1400000000 // Your SDKAppID
    static let SECRETKEY = "your_secret_key_here"

    static func genTestUserSig(identifier userId: String) -> String {
        // Implementation generates HMAC-SHA256 signature
        return generatedUserSig
    }
}

// Login in LoginViewController
let userId = "user123"
let userSig = GenerateTestUserSig.genTestUserSig(identifier: userId)

TUILogin.login(
    Int32(GenerateTestUserSig.SDKAPPID),
    userID: userId,
    userSig: userSig
) {
    print("Login successful")
    // Navigate to main view controller
    DispatchQueue.main.async {
        if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
           let window = windowScene.windows.first {
            let mainVC = MainViewController()
            let navController = UINavigationController(rootViewController: mainVC)
            window.rootViewController = navController
            window.makeKeyAndVisible()
        }
    }
} fail: { errorCode, errorMessage in
    print("Login failed: \(errorMessage)")
    // Show error alert
}

// Logout
TUILogin.logout {
    print("Logout successful")
} fail: { errorCode, errorMessage in
    print("Logout failed: \(errorMessage)")
}

// Get current user info
if let userId = TUILogin.getUserID() {
    print("Current user: \(userId)")
}

if let nickname = TUILogin.getNickName() {
    print("Nickname: \(nickname)")
}

if let faceUrl = TUILogin.getFaceUrl() {
    print("Avatar: \(faceUrl)")
}
```

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

### Flutter TUILiveRoomAudienceWidget - Join Video Live Stream

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

This Dart code snippet illustrates how to join an existing video live stream as an audience member using the TUILiveRoomAudienceWidget in Flutter. It requires a room ID and provides an example of navigating to the audience view, with a callback for when the live stream ends.

```dart
import 'package:flutter/material.dart';
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// Join existing live stream as audience
final String hostRoomId = 'live_host123';
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return TUILiveRoomAudienceWidget(
        roomId: hostRoomId,
        onLiveEnd: () {
          debugPrint('Left live stream');
          Navigator.pop(context);
        },
      );
    },
  ),
);
```

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

### Initialize TIM SDK and Login to Tencent Cloud - TypeScript

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Implements secure authentication to Tencent Cloud services using TIM SDK. Includes TIM instance initialization, UserSig generation, login/logout operations, and login status verification. The genTestUserSig function should be implemented server-side in production environments for security. Requires SDKAppID and UserSig credentials.

```typescript
import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';

// Initialize TIM SDK
let tim: any = null;

// Configuration (testing only - use server-side in production)
const SDKAPPID = 1400000000; // Your SDKAppID
const SECRETKEY = 'your_secret_key_here';

// Generate UserSig (implement on server in production)
function genTestUserSig(userId: string): string {
  // Implementation generates HMAC-SHA256 signature
  // Use LibGenerateTestUserSig library or implement server-side
  return generatedUserSig;
}

// Initialize and login
async function loginToTencent(userId: string): Promise<void> {
  try {
    // Create TIM instance
    tim = TIM.create({
      SDKAppID: SDKAPPID
    });

    // Register upload plugin
    tim.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });

    // Set log level
    tim.setLogLevel(0); // 0: Ordinary, 1: Release, 2: Warning, 3: Error

    // Login
    const userSig = genTestUserSig(userId);
    const loginRes = await tim.login({
      userID: userId,
      userSig: userSig
    });

    console.log('TIM login success:', loginRes);

    // Store user info
    localStorage.setItem('userId', userId);
    localStorage.setItem('userSig', userSig);

    return loginRes;

  } catch (error) {
    console.error('TIM login failed:', error);
    throw error;
  }
}

// Logout
async function logoutFromTencent(): Promise<void> {
  try {
    if (tim) {
      const logoutRes = await tim.logout();
      console.log('TIM logout success:', logoutRes);

      // Clear stored credentials
      localStorage.removeItem('userId');
      localStorage.removeItem('userSig');
    }
  } catch (error) {
    console.error('TIM logout failed:', error);
    throw error;
  }
}

// Check login status
function isLoggedIn(): boolean {
  return tim?.getLoginStatus() === TIM.TYPES.LOGIN_STATUS_LOGGEDIN;
}

// Usage in Vue component
export default {
  async mounted() {
    const userId = 'user123';
    try {
      await loginToTencent(userId);
      // Navigate to main view
      this.$router.push('/live-list');
    } catch (error) {
      // Show error message
      console.error('Login failed:', error);
    }
  }
};
```

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

### iOS VoiceRoomKit - Manage Voice Chat Rooms

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

This Swift code snippet illustrates the usage of VoiceRoomKit for creating and joining voice chat rooms on iOS. It demonstrates initializing the singleton, creating a room with custom seat configurations (like max anchors and seat mode), and entering an existing room. It also shows the structure of `CreateRoomParams` and the available `TUISeatMode` enum values.

```swift
import TUILiveKit
import TUICore

// Initialize VoiceRoomKit singleton
let voiceRoomKit = VoiceRoomKit.createInstance()

// Create voice room with seat parameters
let userId = TUILogin.getUserID() ?? ""
let roomId = "voice_(userId)"

let params = CreateRoomParams()
params.maxAnchorCount = 10 // Up to 10 seats
params.seatMode = .applyToTake // Users must apply to take seat
// Other seat modes: .freeToTake (anyone can take seat)

voiceRoomKit.createRoom(roomId: roomId, params: params)
// This presents TUIVoiceRoomViewController with prepare view

// Enter existing voice room
let existingRoomId = "voice_host123"
voiceRoomKit.enterRoom(roomId: existingRoomId)
// This presents TUIVoiceRoomViewController in join mode

// CreateRoomParams structure
public class CreateRoomParams {
    public var maxAnchorCount: Int = 10  // Number of seats
    public var seatMode: TUISeatMode = .applyToTake
}

// TUISeatMode enum values
// .freeToTake - Anyone can take seat without permission
// .applyToTake - Users must apply and be approved to take seat
```

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

### Configure package.json Dependencies for Vue 3 TUILiveKit Web Project

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Defines npm dependencies required for a Vue 3 web application using TUILiveKit. Includes core frameworks (Vue 3, Vue Router, Pinia), Tencent Cloud SDKs (TUIRoom engine, UI components), TIM messaging SDK, build tools (Vite, TypeScript), and utility libraries. This configuration ensures all necessary packages for web-based live streaming are available.

```json
{
  "name": "my-live-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-router": "^4.0.14",
    "vue-i18n": "^9.10.2",
    "pinia": "^2.0.13",
    "@tencentcloud/tuiroom-engine-js": "~3.4.3",
    "@tencentcloud/uikit-base-component-vue3": "1.1.1",
    "tuikit-atomicx-vue3": "4.3.1",
    "tim-js-sdk": "^2.24.0",
    "tim-upload-plugin": "^1.0.2",
    "axios": "^0.27.2",
    "mitt": "^3.0.0",
    "js-cookie": "^3.0.1",
    "rtc-detect": "^1.0.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "@types/node": "^18.19.31",
    "typescript": "^4.5.4",
    "vite": "^5.2.8",
    "vue-tsc": "^0.35.2",
    "sass": "^1.50.0"
  }
}
```

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

### Login to TUILiveKit Service

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Flutter/livekit/README.md

This Dart code snippet demonstrates how to log in to the TUILiveKit service using provided SDKAppID, userId, and userSig. It utilizes the TUILogin instance and includes callbacks for success and error handling. Ensure the SDKAppID and userSig are correctly obtained and configured before execution.

```dart
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

final int sdkAppId = 'replace with your sdkAppId';
final String userId = 'replace with your userId';
final String userSig = 'replace with your userSig';

await TUILogin.instance.login(
   sdkAppId,
   userId,
   userSig,
   TUICallback(onSuccess: () async {
      debugPrint("TUILogin login success");
   }, onError: (code, message) {
      debugPrint("TUILogin login fail, {code:$code, message:$message}");
   }));

```

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

### Configure SDKAppID and SDKSecretKey in Dart

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Flutter/livekit/README.md

This Dart code shows how to configure your SDKAppID and SDKSecretKey within the `generate_test_user_sig.dart` file. These credentials are required to activate and use the interactive live streaming features provided by TUILiveKit. Replace the placeholder values with your actual obtained keys.

```dart
static int sdkAppId = 0; // Replace with your SDKAppID
static String secretKey = ''; // Replace with your SDKSecretKey

```

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

### Configure SDKAppID and SDKSecretKey in Flutter

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Flutter/live_uikit_gift/README.md

This snippet shows how to configure your SDKAppID and SDKSecretKey in the `generate_test_user_sig.dart` file for the live_uikit_gift package. Ensure you replace the placeholder values with your actual credentials obtained from the Tencent Cloud console.

```dart
static int sdkAppId = 0; // Replace with your SDKAppID
static String secretKey = ''; // Replace with your SDKSecretKey
```

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

### Flutter LiveListWidget for Live Room Discovery

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Implement a browsable list of active live rooms using Flutter's LiveListWidget. This widget automatically fetches and displays live rooms with thumbnail previews and room information, allowing users to join as an audience. It also provides an optional callback for custom room creation actions.

```dart
import 'package:flutter/material.dart';
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// Show live room list screen
class LiveListScreen extends StatelessWidget {
  const LiveListScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Live Rooms'),
      ),
      body: SafeArea(
        // LiveListWidget shows grid of active rooms
        child: LiveListWidget(
          // Automatically handles room list fetching
          // Tapping a room joins as audience
          onCreateRoom: () {
            // Optional: Custom create room action
            debugPrint('Create room tapped');
            _showCreateRoomOptions(context);
          },
        ),
      ),
    );
  }

  void _showCreateRoomOptions(BuildContext context) {
    showModalBottomSheet(
      context: context, 
      builder: (context) => Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ListTile(
            leading: const Icon(Icons.videocam),
            title: const Text('Start Video Live'),
            onTap: () {
              Navigator.pop(context);
              final roomId = LiveIdentityGenerator.instance
                  .generateId('user123', RoomType.live);
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) =>
                      TUILiveRoomAnchorWidget(roomId: roomId),
                ),
              );
            },
          ),
          ListTile(
            leading: const Icon(Icons.mic),
            title: const Text('Start Voice Room'),
            onTap: () {
              Navigator.pop(context);
              final roomId = LiveIdentityGenerator.instance
                  .generateId('user123', RoomType.voice);
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => TUIVoiceRoomWidget(
                    roomId: roomId,
                    behavior: RoomBehavior.prepareCreate,
                    params: RoomParams()..maxSeatCount = 10,
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

```

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

### Integrate Host Streaming Page (Audio Chat Room)

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Flutter/livekit/README.md

Navigate to the host streaming page for audio chat rooms using Navigator.push. Requires userId, generates a roomId, and allows configuration of room parameters like maxSeatCount. Returns a TUIVoiceRoomWidget.

```dart
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
   builder: (context) {
      final String userId = 'replace with your userId';
      final String roomId = LiveIdentityGenerator.instance.generateId(userId, RoomType.live);
      final params = RoomParams();
      params.maxSeatCount = 10; // Set the number of seats (maximum value depends on your subscription plan).
      return TUIVoiceRoomWidget(
                              roomId: roomId,
                              behavior: RoomBehavior.prepareCreate,
                              params: params);
   }));
```

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

### Flutter pubspec.yaml Dependencies for TUILiveKit

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Add TUILiveKit and its core dependencies to your Flutter project's pubspec.yaml file. This includes packages for the UI, real-time communication engine, chat SDK, and utility functions. Ensure your SDK and Flutter versions are compatible.

```yaml
name: my_live_app
description: A Flutter live streaming app
version: 1.0.0

environment:
  sdk: '>=3.4.0 <4.0.0'
  flutter: '>=3.27.0'

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  # TUILiveKit main package
  tencent_live_uikit: ^3.4.0

  # Core dependencies (automatically included, but can specify versions)
  rtc_room_engine: 3.4.0
  tencent_cloud_uikit_core: ^1.7.0
  tencent_cloud_chat_sdk: ^8.7.7201
  tencent_rtc_sdk: '>=12.8.0'

  # Sub-packages for barrage and gifts
  live_uikit_barrage: ^1.0.2
  live_uikit_gift: ^2.1.0
  live_stream_core: ^3.4.0

  # Utility packages
  permission_handler: ^11.0.0
  cached_network_image: ^3.4.1
  fluttertoast: ^8.2.10

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true

```

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

### Integrate Host Streaming Page (Video)

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Flutter/livekit/README.md

Navigate to the host streaming page for video live streams using Navigator.push. Requires userId and generates a roomId using LiveIdentityGenerator. Returns a TUILiveRoomAnchorWidget.

```dart
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
   builder: (context) {
      final String userId = 'replace with your userId';
      final String roomId = LiveIdentityGenerator.instance.generateId(userId, RoomType.live);
      return TUILiveRoomAnchorWidget(roomId: roomId);
   }));
```

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

### Browser Compatibility Check and Alert (JavaScript)

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Web/web-vite-vue3/index.html

Combines checks for ES6 module and dynamic import support to ensure the browser meets the requirements for the live room. If either check fails, an error is logged and an alert is shown to the user recommending a modern browser.

```javascript
if (!isSupportsES6Modules() || !isSupportDynamicImport()) {
  console.error(`isSupportsES6Modules: ${isSupportsES6Modules()}, isSupportDynamicImport: ${isSupportDynamicImport()}.`)
  alert("The current browser failed to load the page, we recommend you use the latest version of chrome browser.");
}
```

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

### Integrate Live Room List Page

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Flutter/livekit/README.md

Navigate to the live room list page using Navigator.push, displaying ongoing video live streams and audio chat rooms. Alternatively, embed LiveListWidget directly as a child widget.

```dart
Navigator.push(context, MaterialPageRoute(
   builder: (context) {
      return Scaffold(
         body: SafeArea(child: LiveListWidget()));
   }));
```

```dart
// Single child widget, using Container as an example
Container(
   child: LiveListWidget()
)

// Multiple child widget, using Column as an example
Column(
   children: [LiveListWidget()]
)
```

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

### Android TUI Login - Authenticate User with SDKAppID and UserSig

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

This snippet demonstrates how to log in to Tencent Cloud services using a user ID, SDKAppID, and UserSig on Android. It includes methods for generating a test UserSig (for development purposes only), performing the login operation, and handling success or error callbacks. It also shows how to log out of the service.

```java
import com.tencent.qcloud.tuicore.TUILogin;
import com.tencent.qcloud.tuicore.interfaces.TUICallback;

// Generate UserSig (for testing only - implement server-side in production)
public class GenerateTestUserSig {
    public static final int SDKAPPID = 1400000000; // Your SDKAppID
    private static final String SECRETKEY = "your_secret_key_here";

    public static String genTestUserSig(String userId) {
        // Implementation generates HMAC-SHA256 signature
        return generatedUserSig;
    }
}

// Login in your LoginActivity
String userId = "user123";
String userSig = GenerateTestUserSig.genTestUserSig(userId);

TUILogin.login(
    context,
    GenerateTestUserSig.SDKAPPID,
    userId,
    userSig,
    new TUICallback() {
        @Override
        public void onSuccess() {
            Log.d("TUILogin", "Login successful");
            // Navigate to main activity
            Intent intent = new Intent(LoginActivity.this, MainActivity.class);
            startActivity(intent);
            finish();
        }

        @Override
        public void onError(int errorCode, String errorMessage) {
            Log.e("TUILogin", "Login failed: " + errorMessage);
            Toast.makeText(context, "Login failed: " + errorMessage,
                          Toast.LENGTH_SHORT).show();
        }
    }
);

// Logout when user signs out
TUILogin.logout(new TUICallback() {
    @Override
    public void onSuccess() {
        Log.d("TUILogin", "Logout successful");
    }

    @Override
    public void onError(int errorCode, String errorMessage) {
        Log.e("TUILogin", "Logout failed: " + errorMessage);
    }
});
```

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

### LiveListView - Browse and Join Live Rooms

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Vue 3 component displaying a grid of active live rooms with join functionality and options to create new video live streams or voice rooms. Includes modal dialog for broadcast type selection and handles room creation with dynamic room ID generation based on user ID.

```vue
<template>
  <div class="live-list-page">
    <div class="header">
      <h1>Live Rooms</h1>
      <button class="create-btn" @click="showCreateOptions = true">
        Start Live
      </button>
    </div>

    <LiveListView
      @join-live="handleJoinLive"
      @create-live="handleCreateLive"
    />

    <div v-if="showCreateOptions" class="modal">
      <div class="modal-content">
        <h2>Start Broadcasting</h2>
        <button @click="createVideoLive">Video Live</button>
        <button @click="createVoiceRoom">Voice Room</button>
        <button @click="showCreateOptions = false">Cancel</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { LiveListView } from '@/TUILiveKit';
import { useRouter } from 'vue-router';
import { useLiveListState, useLoginState } from 'tuikit-atomicx-vue3';

const router = useRouter();
const { loginUserInfo } = useLoginState();
const { joinLive } = useLiveListState();
const showCreateOptions = ref(false);

async function handleJoinLive(liveInfo: any) {
  try {
    await joinLive({ liveId: liveInfo.roomId });
    router.push({
      path: '/live-player',
      query: { liveId: liveInfo.roomId }
    });
  } catch (error) {
    console.error('Failed to join live:', error);
  }
}

async function createVideoLive() {
  const roomId = `live_${loginUserInfo.value.userId}`;
  try {
    await joinLive({ liveId: roomId });
    showCreateOptions.value = false;
    router.push({ path: '/live-pusher' });
  } catch (error) {
    console.error('Failed to create video live:', error);
  }
}

async function createVoiceRoom() {
  const roomId = `voice_${loginUserInfo.value.userId}`;
  try {
    await joinLive({
      liveId: roomId,
      roomType: 'voice'
    });
    showCreateOptions.value = false;
    router.push({ path: '/voice-room' });
  } catch (error) {
    console.error('Failed to create voice room:', error);
  }
}

function handleCreateLive() {
  showCreateOptions.value = true;
}
</script>

<style scoped>
.live-list-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.create-btn {
  padding: 10px 20px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
</style>
```

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

### Web LivePusherView for Host Live Streaming (Vue.js)

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Integrate the LivePusherView component in a Vue.js application for hosts to broadcast live streams. This component manages camera input, stream publishing, and provides event handlers for leaving the stream and errors. It requires prior room creation and joining logic before the pusher is displayed.

```vue
<template>
  <div class="live-pusher-container">
    <LivePusherView
      @leave-live="handleLeaveLive"
      @error="handleError"
    />
  </div>
</template>

<script setup lang="ts">
import { LivePusherView } from '@/TUILiveKit';
import { useRouter } from 'vue-router';
import { useLiveListState } from 'tuikit-atomicx-vue3';

const router = useRouter();
const { currentLive, joinLive } = useLiveListState();

// Join or create live room before showing pusher
async function createAndJoinLive() {
  const roomId = `live_${userId}`;
  try {
    await joinLive({ liveId: roomId });
    // LivePusherView will automatically start streaming
  } catch (error) {
    console.error('Failed to create live:', error);
  }
}

// Handle when user leaves live
function handleLeaveLive() {
  console.log('Left live stream');
  router.push({ path: '/live-list' });
}

// Handle streaming errors
function handleError(error: any) {
  console.error('Live streaming error:', error);
  // Show error notification
}

// Start live when component mounts
onMounted(() => {
  createAndJoinLive();
});
</script>

<style scoped>
.live-pusher-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
</style>

```

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

### Configure MaterialApp with TUILiveKit Delegates and Localization in Flutter

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Set up MaterialApp with required TUILiveKit navigator observer and localization delegates for LiveKit, Barrage, and Gift components. Supports English and Simplified Chinese locales with configurable default language. Includes Material Design 3 theme configuration and login widget initialization.

```dart
import 'package:flutter/material.dart';
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TUILiveKit Demo',

      // REQUIRED: Add TUILiveKit navigator observer
      navigatorObservers: [
        TUILiveKitNavigatorObserver.instance,
      ],

      // REQUIRED: Add localization delegates
      localizationsDelegates: const [
        ...LiveKitLocalizations.localizationsDelegates,
        ...BarrageLocalizations.localizationsDelegates,
        ...GiftLocalizations.localizationsDelegates,
      ],

      // REQUIRED: Specify supported locales
      supportedLocales: const [
        Locale('en'), // English
        Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'), // Simplified Chinese
      ],

      // Optional: Set default locale
      locale: const Locale('en'),

      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),

      home: const LoginWidget(),
    );
  }
}
```

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

### Check Dynamic Import Support (JavaScript)

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Web/web-vite-vue3/index.html

Verifies browser support for dynamic import syntax by attempting to create a new Function with an import statement. This functionality is essential for code-splitting and on-demand loading of modules.

```javascript
function isSupportDynamicImport() {
  try {
    new Function('import("")');
    return true;
  } catch (error) {
    return false;
  }
}
```

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

### Android Gradle Dependencies - TUILiveKit

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Integrate TUILiveKit into your Android project by adding the necessary dependencies to your app's build.gradle file. Includes core dependencies like TRTC, IM, and LiteAVSDK.

```gradle
// In your app/build.gradle
android {
    compileSdk 34

    defaultConfig {
        applicationId "com.example.myapp"
        minSdkVersion 21
        targetSdkVersion 34
        multiDexEnabled true
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    // TUILiveKit - Include this module or dependency
    implementation project(':tuilivekit')

    // Core dependencies (included in tuilivekit module)
    // api "io.trtc.uikit:rtc_room_engine:3.4.0.1335"
    // api "io.trtc.uikit:atomicx-core:3.4.0.1335"
    // api "com.tencent.liteav:LiteAVSDK_Professional:12.8.0.19279"
    // api "com.tencent.imsdk:imsdk-plus:8.7.7201"

    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'com.google.android.material:material:1.12.0'
}
```

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

### Configure MaterialApp for TUILiveKit

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Flutter/livekit/README.md

This code configures the MaterialApp widget to integrate TUILiveKit's routing and internationalization delegates. It ensures proper handling of live streaming navigation and localization for a seamless user experience. Dependencies include LiveKitLocalizations, BarrageLocalizations, and GiftLocalizations.

```dart
return MaterialApp(
   navigatorObservers: TUILiveKitNavigatorObserver.instance,
   localizationsDelegates: [
      ...LiveKitLocalizations.localizationsDelegates,
      ...BarrageLocalizations.localizationsDelegates,
      ...GiftLocalizations.localizationsDelegates,
   ],
   supportedLocales: [
      ...LiveKitLocalizations.supportedLocales,
      ...BarrageLocalizations.supportedLocales,
      ...GiftLocalizations.supportedLocales
   ],
   //...
);

```

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

### Implement TUILogin Authentication in Flutter

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Authenticate users with Tencent Cloud services using TUILogin with SDKAppID and generated user signatures. Provides login, logout, and user information retrieval with error handling callbacks. User signature generation uses HMAC-SHA256 for security and should only be used for testing in production environments.

```dart
import 'package:tencent_cloud_uikit_core/tencent_cloud_uikit_core.dart';

// Configure credentials (testing only)
class GenerateTestUserSig {
  static int sdkAppId = 1400000000; // Your SDKAppID
  static String secretKey = 'your_secret_key_here';

  static String genTestSig(String userId) {
    // Implementation generates HMAC-SHA256 signature
    return generatedUserSig;
  }
}

// Login before using live streaming features
Future<void> loginToTencent(String userId) async {
  final String userSig = GenerateTestUserSig.genTestSig(userId);

  await TUILogin.instance.login(
    GenerateTestUserSig.sdkAppId,
    userId,
    userSig,
    TUICallback(
      onSuccess: () async {
        debugPrint('TUILogin login success');
        // Navigate to main screen
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => MainWidget()),
        );
      },
      onError: (errorCode, errorMessage) {
        debugPrint('TUILogin login failed: $errorCode, $errorMessage');
        // Show error dialog
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: const Text('Login Failed'),
            content: Text('Error: $errorMessage'),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text('OK'),
              ),
            ],
          ),
        );
      },
    ),
  );
}

// Logout
Future<void> logoutFromTencent() async {
  await TUILogin.instance.logout(
    TUICallback(
      onSuccess: () {
        debugPrint('Logout successful');
      },
      onError: (errorCode, errorMessage) {
        debugPrint('Logout failed: $errorMessage');
      },
    ),
  );
}

// Get current user info
String? userId = await TUILogin.instance.getUserId();
String? nickname = await TUILogin.instance.getNickName();
String? faceUrl = await TUILogin.instance.getFaceUrl();
```

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

### Generate Room ID and Create Voice Room in Flutter

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Generate unique voice room identifiers using LiveIdentityGenerator and create voice chat rooms with configurable seat management. Supports two seat modes: applyToTake (users apply for seat) and freeToTake (anyone can take seat). Configure room parameters including name, seat count, and permissions before initializing TUIVoiceRoomWidget.

```dart
import 'package:flutter/material.dart';
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// Generate room ID for voice room
final String userId = 'user123';
final String roomId = LiveIdentityGenerator.instance
    .generateId(userId, RoomType.voice); // Returns "voice_user123"

// Configure room parameters
final params = RoomParams();
params.roomName = 'My Voice Room';
params.maxSeatCount = 10; // Up to 10 seats
params.seatMode = TUISeatMode.applyToTake; // Users must apply for seat
// Other modes: TUISeatMode.freeToTake (anyone can take seat)

// Create and start voice room
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return TUIVoiceRoomWidget(
        roomId: roomId,
        behavior: RoomBehavior.prepareCreate,
        params: params,
        onLiveEnd: () {
          debugPrint('Voice room ended');
          Navigator.pop(context);
        },
      );
    },
  ),
);

// Join existing voice room
final String existingRoomId = 'voice_host123';
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return TUIVoiceRoomWidget(
        roomId: existingRoomId,
        behavior: RoomBehavior.join,
        onLiveEnd: () {
          debugPrint('Left voice room');
          Navigator.pop(context);
        },
      );
    },
  ),
);
```

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

### Android Voice Chat Room API - TUILiveKit

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Create and enter multi-seat voice chat rooms with configurable seat management and permissions using the VoiceRoomKit interface on Android. Supports different seat modes like APPLY_TO_TAKE and FREE_TO_TAKE.

```java
// Initialize VoiceRoomKit
Context context = this;
VoiceRoomKit voiceRoomKit = VoiceRoomKit.createInstance(context);

// Create voice room with seat configuration
String roomId = "voice_" + userId;
VoiceRoomDefine.CreateRoomParams params = new VoiceRoomDefine.CreateRoomParams();
params.roomName = "My Voice Room";
params.maxAnchorCount = 10; // Up to 10 people can be on seat
params.seatMode = TUISeatMode.APPLY_TO_TAKE; // Users must apply to take seat
// Other seat modes: FREE_TO_TAKE (anyone can take seat)
voiceRoomKit.createRoom(roomId, params);
// This launches the voice room view with seat grid

// Enter existing voice room
String existingRoomId = "voice_host123";
voiceRoomKit.enterRoom(existingRoomId);

// Alternative: Enter using LiveInfo object
TUILiveListManager.LiveInfo liveInfo = new TUILiveListManager.LiveInfo();
liveInfo.roomId = "voice_host123";
liveInfo.ownerId = "host123";
liveInfo.maxSeatCount = 10;
voiceRoomKit.enterRoom(liveInfo);
```

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

### iOS Podfile - Add TUILiveKit Dependency

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

This Ruby code snippet shows how to add TUILiveKit as a dependency to your iOS project using CocoaPods. It specifies the platform version and demonstrates how to include the main TUILiveKit pod, optionally with a version constraint. Core dependencies are noted as automatically included.

```ruby
# Podfile
platform :ios, '13.0'
use_frameworks!

target 'YourApp' do
  # TUILiveKit main dependency
  pod 'TUILiveKit'

  # Or specify version
  pod 'TUILiveKit', '~> 3.4.0'

  # Core dependencies (automatically included)
  # pod 'TUICore'
  # pod 'RTCRoomEngine', '~> 3.4.0'
  # pod 'TXLiteAVSDK_Professional', '~> 12.8.0'
  # pod 'TXIMSDK_Plus_iOS', '~> 8.7.7201'
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
    end
  end
end
```

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

### Check ES6 Module Support (JavaScript)

Source: https://github.com/tencent-rtc/tuilivekit/blob/main/Web/web-vite-vue3/index.html

Determines if the browser supports ES6 modules by creating a script element and checking for the 'noModule' property or setting its type to 'module'. This is a fundamental check for modern web applications.

```javascript
function isSupportsES6Modules() {
  const script = document.createElement('script');
  if ('noModule' in script) {
    return true;
  }
  script.type = 'module';
  return script.type === 'module';
}
```

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

### LivePlayerView - Display Live Stream for Audience

Source: https://context7.com/tencent-rtc/tuilivekit/llms.txt

Vue 3 component that renders a live stream player for audience members with join/leave functionality, error handling, and automatic room entry on mount. Retrieves live ID from route parameters and uses useLiveListState composable to manage audience participation.

```vue
<template>
  <div class="live-player-container">
    <LivePlayerView
      :live-id="liveId"
      @leave-live="handleLeaveLive"
      @error="handleError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { LivePlayerView } from '@/TUILiveKit';
import { useRouter, useRoute } from 'vue-router';
import { useLiveListState } from 'tuikit-atomicx-vue3';

const router = useRouter();
const route = useRoute();
const { joinLive } = useLiveListState();

const liveId = ref<string>(route.params.liveId as string || '');

async function joinAsAudience() {
  try {
    await joinLive({ liveId: liveId.value });
    console.log('Joined live stream successfully');
  } catch (error) {
    console.error('Failed to join live:', error);
    router.push({ path: '/live-list' });
  }
}

function handleLeaveLive() {
  console.log('Left live stream');
  router.push({ path: '/live-list' });
}

function handleError(error: any) {
  console.error('Player error:', error);
}

onMounted(() => {
  if (liveId.value) {
    joinAsAudience();
  } else {
    router.push({ path: '/live-list' });
  }
});
</script>

<style scoped>
.live-player-container {
  width: 100vw;
  height: 100vh;
  background: #000;
  position: relative;
}
</style>
```