Flutter即时通讯插件hmssdk_flutter的使用

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

Flutter即时通讯插件hmssdk_flutter的使用

简介

100ms Flutter SDK(hmssdk_flutter)提供了实现实时音视频会议、互动直播和聊天功能的能力。通过支持HLS和RTMP直播、画中画(PiP)、CallKit、VoIP等功能,您可以为应用程序添加沉浸式的实时通信体验。

快速开始指南

1. 注册并获取凭证

首先,在100ms官网注册账号,并访问开发者选项卡以获取您的凭证信息。

2. 配置安全令牌

熟悉令牌与安全性,完成认证令牌快速入门指南中的步骤。

3. 添加依赖项

在项目的pubspec.yaml文件中添加hmssdk_flutter包:

dependencies:
  hmssdk_flutter: ^最新版本号

然后运行命令安装依赖:

flutter pub get

4. 初始化HMSSDK实例

创建一个继承自HMSUpdateListener的类来监听房间内的事件更新。下面是一个简单的示例代码片段:

import 'package:hmssdk_flutter/hmssdk_flutter.dart';

class Meeting implements HMSUpdateListener {
  late HMSSDK hmsSDK;

  Meeting() {
    initHMSSDK();
  }

  void initHMSSDK() async {
    hmsSDK = HMSSDK();
    await hmsSDK.build();
    hmsSDK.addUpdateListener(this);
    
    // 加入房间配置
    HMSConfig config = HMSConfig(
      authToken: '你的认证令牌',
      userName: '用户名称',
    );
    hmsSDK.join(config: config);
  }

  @override
  void onJoin({required HMSRoom room}) {
    print("成功加入房间:${room.roomId}");
  }

  // 实现其他回调方法...
}

5. 显示视频流

使用HMSVideoView组件来显示视频轨道。例如:

HMSVideoView(
  track: videoTrack, // 视频轨道对象
  key: Key(videoTrack.trackId),
)

6. 发送消息

可以通过sendBroadcastMessage等方法发送广播或定向消息给其他参与者:

hmsSDK.sendBroadcastMessage(
  message: "Hello everyone!",
  type: "greeting",
  hmsActionResultListener: this,
);

7. 离开房间

当不再需要保持连接时,记得调用leave方法断开连接:

await hmsSDK.leave(hmsActionResultListener: this);

@override
void onSuccess(
    {HMSActionResultListenerMethod methodType = HMSActionResultListenerMethod.unknown,
     Map<String, dynamic>? arguments}) {
  if (methodType == HMSActionResultListenerMethod.leave) {
    print("已成功离开房间");
  }
}

示例项目结构

为了帮助您更好地理解如何集成hmssdk_flutter,这里提供了一个简化版的应用程序入口文件(main.dart)作为参考:

import 'package:flutter/material.dart';
import 'package:hmssdk_flutter/hmssdk_flutter.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with HMSUpdateListener {
  late HMSSDK hmsSDK;
  
  @override
  void initState() {
    super.initState();
    initHMSSDK();
  }

  void initHMSSDK() async {
    hmsSDK = HMSSDK();
    await hmsSDK.build();
    hmsSDK.addUpdateListener(this);

    // 假设我们已经有了authToken和userName
    HMSConfig config = HMSConfig(authToken: 'your_auth_token', userName: 'John Doe');
    hmsSDK.join(config: config);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter HMS SDK Example'),
      ),
      body: Center(
        child: Text('Waiting for updates...'),
      ),
    );
  }

  // 实现必要的回调方法...
}

以上就是关于hmssdk_flutter的基本使用介绍,更多高级特性和详细文档可以参考官方提供的链接。如果您有任何问题或者需要进一步的帮助,请随时提问!


更多关于Flutter即时通讯插件hmssdk_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter即时通讯插件hmssdk_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用hmssdk_flutter插件进行即时通讯的示例代码。hmssdk_flutter是华为云服务提供的即时通讯SDK的Flutter插件,用于实现即时消息传递、音视频通话等功能。

首先,确保你已经在Flutter项目中添加了hmssdk_flutter依赖。你可以在pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  hmssdk_flutter: ^最新版本号

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

接下来,你需要进行一些初始化工作,包括配置华为云服务的相关信息。下面是一个基本的示例代码,展示了如何使用hmssdk_flutter进行初始化、登录和发送文本消息。

import 'package:flutter/material.dart';
import 'package:hmssdk_flutter/hmssdk_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatApp(),
    );
  }
}

class ChatApp extends StatefulWidget {
  @override
  _ChatAppState createState() => _ChatAppState();
}

class _ChatAppState extends State<ChatApp> {
  late HMSClient _hmsClient;
  late HMSUser? _currentUser;
  final TextEditingController _messageController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 初始化HMSClient
    _hmsClient = HMSClient();

    // 配置SDK(这里需要替换为你的实际App ID)
    _hmsClient.init({
      "appId": "你的华为云服务App ID",
      "autoInit": true,
    });

    // 监听登录状态变化
    _hmsClient.addOnUserStatusChangedListener((HMSUser? user) {
      setState(() {
        _currentUser = user;
      });
    });

    // 登录(这里需要替换为你的实际用户信息)
    _hmsClient.signIn({
      "token": "你的用户Token",
      "userId": "你的用户ID",
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter 即时通讯"),
      ),
      body: Column(
        children: [
          if (_currentUser != null) {
            Text("当前用户: ${_currentUser!.userId}")
          } else {
            Text("正在登录...")
          },
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_messages[index]),
                );
              },
            ),
          ),
          TextField(
            controller: _messageController,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: '发送消息',
              suffixIcon: IconButton(
                icon: Icon(Icons.send),
                onPressed: () {
                  sendMessage(_messageController.text);
                  _messageController.clear();
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  List<String> _messages = [];

  void sendMessage(String message) {
    if (_currentUser != null) {
      _hmsClient.sendMessage({
        "receiverId": "接收者用户ID", // 替换为实际的接收者用户ID
        "message": message,
        "messageType": "TEXT",
      });

      // 本地保存消息(实际项目中可能需要保存到服务器)
      setState(() {
        _messages.add("你: $message");
      });
    } else {
      print("未登录,无法发送消息");
    }
  }

  // 监听接收消息事件
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _hmsClient.addMessageReceivedListener((HMSMessage message) {
      setState(() {
        _messages.add("对方: ${message.message}");
      });
    });
  }
}

注意事项:

  1. 替换占位符:在实际使用中,需要将示例代码中的"你的华为云服务App ID""你的用户Token""你的用户ID""接收者用户ID"替换为你自己的实际信息。
  2. 权限配置:确保你的华为云服务项目已经正确配置了所需的权限,并且在Flutter项目的AndroidManifest.xmlInfo.plist中配置了必要的权限和URL Scheme。
  3. 错误处理:示例代码中没有包含错误处理逻辑,实际项目中需要添加适当的错误处理来确保应用的稳定性。

这个示例代码展示了如何使用hmssdk_flutter插件进行基本的即时通讯功能,包括初始化SDK、登录、发送和接收文本消息。根据具体需求,你可以进一步扩展这个示例代码,添加音视频通话、群组聊天等功能。

回到顶部