Flutter腾讯云通话UI组件插件tencent_calls_uikit的使用

Flutter腾讯云通话UI组件插件tencent_calls_uikit的使用

Tencent Cloud UIKit for Video Calls

Tencent Cloud 提供了一款关于 音视频通话 的UIKit，即TUICallKit。通过集成此组件，开发者可以仅用几行代码就实现视频通话功能。TUICallKit支持离线呼叫，并适用于Android、iOS、Web和Flutter（进行中）等多个平台。

Tencent Cloud Logo

Features

  • 完美的UI交互：提供开源组件，包含UI设计，节省90%的开发时间。
  • 多平台互联：支持Web、Android、iOS等平台以及uni-app等跨平台框架。
  • 移动端离线推送：支持Android和iOS的离线唤醒。
  • 群组（多人）通话：不仅支持一对一视频通话，还支持群组内的多人视频通话。
  • 多设备登录：支持不同平台的同时登录。
  • 更多特性：如自定义铃声、头像、AI降噪、弱网优化等。

Make a first call

以下是与UI集成（即TUICallKit）的一个示例，这也是我们推荐的集成方式。关键步骤如下：

Step1: 激活服务

激活Tencent Cloud Audio and Video Call Service，对于开发者集成，我们也提供了免费试用版。

Step2: 集成TUICallKit

访问官方文档以获取详细接入过程。

Step3: 进行首次视频通话！

Quick link

Recommended Resources

如果还需要使用应用内聊天模块，我们推荐使用Chat TUIKit组件库。您可以快速开发和集成一个移动和桌面跨平台聊天应用程序，体验官方TUIKit demo请访问此链接。

Have any questions?

欢迎提交issue，或加入我们的Telegram群组与专业工程师交流！点击加入: Telegram Group

示例代码

下面是一个简单的Flutter应用例子，展示了如何在Flutter项目中集成tencent_calls_uikit插件并进行初始化设置：

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:tencent_calls_uikit/tuicall_kit.dart';
import 'package:tuicall_kit_example/src/login_widget.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        localizationsDelegates: AppLocalizations.localizationsDelegates,
        supportedLocales: AppLocalizations.supportedLocales,
        navigatorObservers: [TUICallKit.navigatorObserver],
        builder: (context, child) => Scaffold(
              resizeToAvoidBottomInset: false,
              body: GestureDetector(
                onTap: () {
                  hideKeyboard(context);
                },
                child: child,
              ),
            ),
        home: const LoginWidget());
  }

  void hideKeyboard(BuildContext context) {
    FocusScopeNode currentFocus = FocusScope.of(context);
    if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
      FocusManager.instance.primaryFocus?.unfocus();
    }
  }
}

这段代码创建了一个基本的应用程序结构，并集成了tencent_calls_uikit插件。它包括了语言本地化配置、导航观察者设置以及隐藏键盘的功能。LoginWidget是用户登录界面，具体实现可以根据实际需求定制。


更多关于Flutter腾讯云通话UI组件插件tencent_calls_uikit的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter腾讯云通话UI组件插件tencent_calls_uikit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用tencent_calls_uikit插件来集成腾讯云通话UI组件的示例代码。这个示例将展示如何初始化插件、配置UI组件以及处理一些基本的事件。

首先，确保你已经在pubspec.yaml文件中添加了tencent_calls_uikit依赖：

dependencies:
  flutter:
    sdk: flutter
  tencent_calls_uikit: ^最新版本号  # 替换为实际最新版本号

然后运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中，按照以下步骤使用tencent_calls_uikit：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:tencent_calls_uikit/tencent_calls_uikit.dart';
  1. 配置腾讯云通话SDK：

在实际使用之前，你需要配置腾讯云通话SDK的相关信息，比如SDK App ID、用户信息等。这些信息通常在你的腾讯云后台获取。

  1. 创建UI组件：

下面是一个简单的示例，展示如何使用TencentCallsUIKit来创建通话界面：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tencent Calls UIKit Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CallsScreen(),
    );
  }
}

class CallsScreen extends StatefulWidget {
  @override
  _CallsScreenState createState() => _CallsScreenState();
}

class _CallsScreenState extends State<CallsScreen> {
  final TencentCallsUIKitController _callsUIKitController = TencentCallsUIKitController();

  @override
  void initState() {
    super.initState();

    // 初始化SDK（这里只是示例，实际使用时需要替换为你的配置信息）
    _initializeSdk();
  }

  Future<void> _initializeSdk() async {
    // 假设这些是你的配置信息
    final String appId = 'YOUR_APP_ID';
    final String userId = 'USER_ID';
    final String roomId = 'ROOM_ID'; // 房间ID或通话ID

    // 初始化TencentCallsUIKit
    await _callsUIKitController.init(
      appId: appId,
      userId: userId,
      roomId: roomId,
      // 其他配置参数...
    );

    // 监听事件（可选）
    _callsUIKitController.onCallStateChanged.listen((callState) {
      // 处理通话状态变化
      print('Call state changed: $callState');
    });

    // 其他初始化操作...
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tencent Calls UIKit Demo'),
      ),
      body: Center(
        child: TencentCallsUIKit(
          controller: _callsUIKitController,
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源
    _callsUIKitController.dispose();
    super.dispose();
  }
}
  1. 处理事件和回调：

在上面的代码中，我们使用了_callsUIKitController.onCallStateChanged.listen来监听通话状态的变化。你可以根据需要添加更多的监听器来处理其他事件，比如音量变化、摄像头开关等。

请注意，这只是一个基本的示例，实际项目中可能需要更多的配置和处理逻辑，比如错误处理、用户身份验证、UI自定义等。具体的使用方法和API细节，请参考tencent_calls_uikit的官方文档和示例代码。

另外，由于腾讯云的SDK和UI组件可能会不断更新，建议定期查看最新的官方文档和更新日志，以确保你的代码与最新版本的SDK兼容。

回到顶部