Flutter音视频通话UI插件cometchat_calls_uikit的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter音视频通话UI插件cometchat_calls_uikit的使用

CometChat Flutter Calls UIKit 提供了一个预构建的用户界面工具包,开发者可以快速将其集成到现有的或新的应用中,以实现可靠的、功能齐全的聊天和通话体验。

前提条件

在开始之前,请确保您的开发环境满足以下要求:

  • Flutter >= 3.10.5
  • Dart >= 3.0.5
  • Android Studio 2022.2
  • Android 7.0, API 24 及以上版本
  • Xcode 15
  • iOS 12.0

开始使用

要设置Flutter Calls UIKit并利用CometChat为您的应用程序添加聊天和通话功能,请按照以下步骤操作:

  1. 注册并登录 CometChat Dashboard 创建一个新应用。创建后,CometChat会为您生成一个Auth Key和App ID,请妥善保管这些凭证。
  2. 阅读 关键概念 了解CometChat的基本组件。
  3. 根据我们的集成步骤文档将UI Kit集成到您的Flutter应用中。

示例代码

以下是集成CometChat Calls UI Kit的一个简单示例:

import 'package:flutter/material.dart';
import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        Translations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: [
        Locale('en', ''),
        Locale('hi', ''),
        Locale('ar', ''),
        Locale('de', ''),
        Locale('es', ''),
        Locale('fr', ''),
        Locale('ms', ''),
        Locale('pt', ''),
        Locale('ru', ''),
        Locale('sv', ''),
        Locale('zh', ''),
      ],
      title: 'Flutter Demo',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final String appId = "APP_ID"; // 替换为你的App ID
  static const String authKey = "AUTH_KEY"; // 替换为你的Auth Key
  static const String region = "REGION"; // 替换为你的区域代码

  bool isLoading = true;

  [@override](/user/override)
  void initState() {
    super.initState();
    initializeCometChat();
  }

  initializeCometChat() async {
    UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
          ..subscriptionType = CometChatSubscriptionType.allUsers
          ..region = region
          ..autoEstablishSocketConnection = true
          ..appId = appId
          ..authKey = authKey
          ..callingExtension = CometChatCallingExtension() // 如果你想在应用中启用呼叫功能,则必须在此传递一个CometChatCallingExtension实例。
        )
        .build();

    CometChatUIKit.init(
        uiKitSettings: uiKitSettings,
        onSuccess: (String successMessage) {
          login();
        },
        onError: (CometChatException error) {
          // 初始化失败时处理错误
        });
  }

  login() async {
    String userId = "superhero1";
    await CometChatUIKit.login(userId, onSuccess: (User loggedInUser) {
      debugPrint("Login Successful : $loggedInUser");
      Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) =>
                  const CometChatConversationsWithMessages()));
    }, onError: (CometChatException e) {
      debugPrint("Login failed with exception:  ${e.message}");
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      key: CallNavigationContext.navigatorKey,
      body: const Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用cometchat_calls_uikit插件来实现音视频通话UI的示例代码。这个插件是CometChat提供的一个预构建的UI组件,用于快速集成音视频通话功能。

首先,确保你已经在pubspec.yaml文件中添加了cometchat_calls_uikit依赖:

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

然后,运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你需要初始化CometChat SDK,并配置音视频通话UI。以下是一个基本的示例代码:

import 'package:flutter/material.dart';
import 'package:cometchat_pro_sdk/cometchat_pro_sdk.dart';
import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // 初始化CometChat SDK
    CometChat.initialize(
      appId: 'YOUR_APP_ID',
      region: CometChatRegion.US,
      authKey: 'YOUR_AUTH_KEY',
    ).then((value) {
      // 登录用户
      CometChat.login(uid: 'USER_ID').then((user) {
        // 设置通话UI监听器
        CometChatCallsUIKit.instance.init(
          context: context,
          userId: user.uid,
          onIncomingCall: (call) {
            // 处理来电
            print('Incoming call: ${call.callerId}');
            // 显示来电界面(你可以自定义或使用插件提供的界面)
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => IncomingCallScreen(call: call)),
            );
          },
          onOngoingCall: (call) {
            // 处理正在进行的通话
            print('Ongoing call: ${call.callerId}');
            // 显示通话界面(你可以自定义或使用插件提供的界面)
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => OngoingCallScreen(call: call)),
            );
          },
          onEndedCall: (call) {
            // 处理结束通话
            print('Ended call: ${call.callerId}');
          },
        );
      }).catchError((error) {
        print('Login error: $error');
      });
    }).catchError((error) {
      print('Initialization error: $error');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CometChat Calls UIKit Example'),
        ),
        body: Center(
          child: Text('Please wait while we initialize CometChat...'),
        ),
      ),
    );
  }
}

// 自定义来电界面
class IncomingCallScreen extends StatelessWidget {
  final CometChatCall call;

  IncomingCallScreen({required this.call});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Incoming Call'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Incoming call from ${call.callerId}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 接听电话
                CometChatCallsUIKit.instance.acceptCall(callId: call.callId);
                Navigator.pop(context);
              },
              child: Text('Accept'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                // 拒绝电话
                CometChatCallsUIKit.instance.rejectCall(callId: call.callId);
                Navigator.pop(context);
              },
              child: Text('Reject'),
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义通话界面
class OngoingCallScreen extends StatelessWidget {
  final CometChatCall call;

  OngoingCallScreen({required this.call});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ongoing Call'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Calling ${call.callerId}'),
            // 你可以在这里添加更多控件,比如挂断按钮、麦克风开关、摄像头开关等
            ElevatedButton(
              onPressed: () {
                // 挂断电话
                CometChatCallsUIKit.instance.endCall(callId: call.callId);
                Navigator.pop(context);
              },
              child: Text('End Call'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们:

  1. 初始化了CometChat SDK。
  2. 使用CometChat.login方法登录用户。
  3. 初始化了CometChatCallsUIKit并设置了来电、正在进行通话和通话结束时的监听器。
  4. 创建了自定义的来电界面IncomingCallScreen和通话界面OngoingCallScreen

请注意,这只是一个基本的示例。cometchat_calls_uikit插件提供了更多的功能和配置选项,你可以根据需要进行进一步的定制和扩展。同时,确保你已经正确配置了CometChat的后端服务,并获得了必要的appIdauthKeyUSER_ID等信息。

回到顶部