Flutter视频会议插件hms_room_kit的使用

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

Flutter视频会议插件hms_room_kit的使用

简介

hms_room_kit 是一个强大的预构建UI库，用于音频/视频会议、直播和一对一通话。这个包为开发者提供了一整套工具和组件，可以快速地将高质量的音视频通信功能集成到Flutter应用中。

主要特性

  • 快速集成音视频会议功能
  • 支持iOS和Android平台
  • 高度可定制化的UI界面
  • 丰富的文档和支持资源

设置指南

步骤1：注册并获取凭证

首先，你需要在 100ms官网 注册账号，并访问开发者页面获取你的凭证。

步骤2：熟悉Token和安全设置

了解如何使用 Tokens & Security。

步骤3：完成Auth Token Quick Start Guide

按照 Auth Token Quick Start Guide 中的步骤操作。

步骤4：添加依赖

在你的 pubspec.yaml 文件中添加 hms_room_kit：

dependencies:
  hms_room_kit: ^latest_version

然后运行以下命令下载依赖：

flutter pub get

步骤5：导入包

在需要使用的文件中导入 hms_room_kit 包：

import 'package:hms_room_kit/hmssdk_uikit.dart';

步骤6：添加HMSPrebuilt Widget

在你的Widget树中添加 HMSPrebuilt 小部件，并设置正确的 roomCode 和所需的预构建选项：

HMSPrebuilt(
    roomCode: "xvm-wxwo-gbl",
    hmsConfig: HMSPrebuiltOptions(userName: "John Appleseed"),
);

创建示例应用

前提条件

确保你已经安装了以下内容：

  • 100ms账户
  • Flutter SDK 3.3.0 或更高版本
  • Dart 2.12.0 或以上版本
  • 支持Flutter的IDE（如VS Code或Android Studio）

创建Flutter应用

使用终端创建一个新的Flutter项目：

flutter create my_app

然后打开该项目。

添加hms_room_kit到你的项目

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  hms_room_kit: ^latest_version

运行 flutter pub get 下载这些依赖。

应用设置

对于Android

在 android/app/build.gradle 文件中的 defaultConfig 部分添加最小SDK版本：

defaultConfig {
    ...
    minSdkVersion 21
    ...
}

为了支持画中画模式，请在你的 MainActivity.kt 文件中添加以下代码：

override fun onUserLeaveHint() {
    super.onUserLeaveHint()
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
        HMSPipAction.autoEnterPipMode(this)
    }
}

对于iOS

在 ios/Podfile 文件中指定最低目标平台版本：

platform :ios, '12.0'

允许相机、录音和互联网权限，在 ios/Runner/info.plist 文件中添加以下内容：

<key>NSMicrophoneUsageDescription</key>
<string>{YourAppName} wants to use your microphone</string>

<key>NSCameraUsageDescription</key>
<string>{YourAppName} wants to use your camera</string>

<key>NSLocalNetworkUsageDescription</key>
<string>{YourAppName} App wants to use your local network</string>

<key>NSBluetoothAlwaysUsageDescription</key>
<string>{YourAppName} needs access to bluetooth to connect to nearby devices.</string>

添加Join按钮

在 lib/main.dart 文件中添加如下代码以创建一个“Join”按钮：

Scaffold(
    body: Center(
        child: ElevatedButton(
            style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8.0),
                    ),
                ),
            ),
            onPressed: () async => {
                await Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const HMSPrebuilt(roomCode: "xvm-wxwo-gbl"),
                    ),
                ),
            },
            child: const Padding(
                padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
                child: Text(
                    'Join',
                    style: TextStyle(fontSize: 20),
                ),
            ),
        ),
    ),
);

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

Harmonyos Next教程
1 回复

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


在Flutter项目中集成和使用华为云的HMS Room Kit插件（hms_room_kit）进行视频会议开发，可以遵循以下步骤。这里主要提供一个基本的代码示例来展示如何初始化和使用该插件。请注意，实际应用中可能需要根据具体需求进行更详细的配置和调整。

1. 添加依赖

首先，在你的Flutter项目的pubspec.yaml文件中添加hms_room_kit依赖：

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

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

2. 配置Android和iOS项目

根据HMS Room Kit的官方文档，你可能需要在android/app/build.gradle和ios/Runner目录下进行一些配置，比如添加必要的SDK和权限等。这里不详细展开，具体请参考官方文档。

3. 初始化HMS Room Kit

在你的Flutter应用中，你需要初始化HMS Room Kit。以下是一个基本的初始化代码示例：

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

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

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

class _MyAppState extends State<MyApp> {
  late HmsRoomKit _hmsRoomKit;

  @override
  void initState() {
    super.initState();
    // 初始化HMS Room Kit
    _initHmsRoomKit();
  }

  Future<void> _initHmsRoomKit() async {
    // 配置HMS Room Kit参数（这里只是示例，具体参数请参考官方文档）
    final HmsRoomKitConfig config = HmsRoomKitConfig(
      appId: '你的AppID',  // 替换为你的实际AppID
      region: '你的Region', // 替换为你的实际Region
      // 其他配置...
    );

    // 初始化HMS Room Kit实例
    _hmsRoomKit = HmsRoomKit(config);

    // 监听连接状态变化
    _hmsRoomKit.onConnectionStateChanged.listen((state) {
      print('Connection state changed: $state');
      // 根据连接状态更新UI或执行其他操作
    });

    // 尝试加入房间（这里只是示例，具体实现请参考官方文档）
    try {
      await _hmsRoomKit.joinRoom('房间ID'); // 替换为你的实际房间ID
    } catch (e) {
      print('Failed to join room: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HMS Room Kit Demo'),
        ),
        body: Center(
          child: Text('HMS Room Kit is initializing...'),
        ),
      ),
    );
  }
}

4. 处理视频和音频流

在成功加入房间后，你可能需要处理视频和音频流。这通常涉及到获取本地和远程的视频和音频流，并在UI中显示它们。以下是一个简单的示例，展示如何获取本地视频流：

// 在_MyAppState类中添加以下代码

@override
void initState() {
  super.initState();
  _initHmsRoomKit();
  // 获取本地视频流
  _getLocalVideoStream();
}

Future<void> _getLocalVideoStream() async {
  final LocalVideoTrack? localVideoTrack = await _hmsRoomKit.createLocalVideoTrack();
  if (localVideoTrack != null) {
    // 在这里你可以将localVideoTrack渲染到UI上
    // 例如，使用Texture或PlatformView来显示视频流
    print('Local video track created successfully');
  } else {
    print('Failed to create local video track');
  }
}

注意

  • 上述代码仅为示例，实际项目中需要根据具体需求进行更详细的实现和调整。
  • 请务必参考HMS Room Kit的官方文档，了解所有可用的API和配置选项。
  • 在处理视频和音频流时，可能需要使用Flutter的纹理（Texture）或平台视图（PlatformView）来渲染视频流。
  • 确保你的应用已经正确配置了所有必要的权限和SDK依赖。

通过以上步骤，你应该能够在Flutter项目中成功集成并使用HMS Room Kit进行视频会议开发。

回到顶部