Flutter视频会议插件custom_jitsi_meet

插件简介

custom_jitsi_meet_test 是一个用于在 Flutter 应用中集成 Jitsi Meet 视频会议功能的插件。它支持 Android、iOS 和 Web 平台。

支持我们

通过我们的 Patreon 账户支持我们： Patreon

配置

IOS

Podfile

确保在您的 Podfile 中添加以下条目，声明平台版本为 11.0 或更高，并禁用 BITCODE：

platform :ios, '11.0'

...

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['ENABLE_BITCODE'] = 'NO'
    end
  end
end

Info.plist

在您的 Info.plist 文件中添加以下内容以请求相机和麦克风权限：

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) MyApp 需要访问您的摄像头进行会议。</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) MyApp 需要访问您的麦克风进行会议。</string>

Android

Gradle

将构建工具依赖设置为最低 3.6.3：

dependencies {
    classpath 'com.android.tools.build:gradle:3.6.3' <!-- 升级此版本 -->
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}

将 Gradle Wrapper 设置为最低 5.6.4：

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip <!-- 升级此版本 -->

AndroidManifest.xml

解决 Jitsi Meet SDK 的 AndroidManifest.xml 与项目冲突问题（特别是 application:label 字段）。在 android/app/src/main/AndroidManifest.xml 中添加 tools 命名空间并替换 android:label 属性：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="yourpackage.com"
    xmlns:tools="http://schemas.android.com/tools">
    <application 
        tools:replace="android:label"  
        android:name="your.application.name"
        android:label="My Application"
        android:icon="@mipmap/ic_launcher">
        ...
    </application>
...
</manifest>

最低 SDK 版本 23

在 android/app/build.gradle 中将最低 SDK 版本更新为 23：

defaultConfig {
    applicationId "com.gunschu.jitsi_meet_example"
    minSdkVersion 23 // Required for Jitsi
    targetSdkVersion 28
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

Proguard

启用 Proguard 后，如果没有 proguard-rules.pro 文件，发布 APK 构建可能会丢失 Flutter Wrapper 和 React Native 代码。在 android/app/build.gradle 中添加 Proguard 支持：

buildTypes {
    release {
        // TODO: 添加您的签名配置以用于发布构建
        // 使用调试密钥进行签名以便运行 `flutter run --release`
        signingConfig signingConfigs.debug

        // 添加以下三行以启用 Proguard
        minifyEnabled true
        useProguard true
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
}

然后在同一目录下创建一个名为 proguard-rules.pro 的文件，并粘贴示例应用中的内容。

Web

在 Web 端实现时，需要在 index.html 中包含 Jitsi JS 库：

<script src="https://meet.jit.si/external_api.js" type="application/javascript"></script>

示例：

<body>
  <!-- 此脚本安装 service_worker.js 以提供 PWA 功能 -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('/flutter_service_worker.js');
      });
    }
  </script>
  <script src="https://meet.jit.si/external_api.js" type="application/javascript"></script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

加入会议

以下是一个完整的示例代码，展示如何使用 custom_jitsi_meet_test 插件加入会议：

_joinMeeting() async {
  try {
    FeatureFlag featureFlag = FeatureFlag();
    featureFlag.welcomePageEnabled = false;
    featureFlag.resolution = FeatureFlagVideoResolution.MD_RESOLUTION; // 限制视频分辨率为 360p

    var options = JitsiMeetingOptions()
      ..room = "myroom" // 必填，空格会被忽略
      ..serverURL = "https://someHost.com"
      ..subject = "Meeting with Gunschu"
      ..userDisplayName = "My Name"
      ..userEmail = "myemail@email.com"
      ..userAvatarURL = "https://someimageurl.com/image.jpg" // 或者 .png
      ..audioOnly = true
      ..audioMuted = true
      ..videoMuted = true
      ..featureFlag = featureFlag;

    await JitsiMeet.joinMeeting(options);
  } catch (error) {
    debugPrint("error: $error");
  }
}

JitsiMeetingOptions

以下是 JitsiMeetingOptions 的字段说明：

字段	是否必填	默认值	描述
room	是	N/A	唯一房间名称，会附加到 `serverURL` 后面。有效字符：字母数字、破折号和下划线。
subject	否	`$room`	会议名称，显示在会议顶部。如果为 null，则默认为房间名称，破折号和下划线替换为空格且首字母大写。
userDisplayName	否	“Fellow Jitster”	用户显示名称。
userEmail	否	none	用户电子邮件地址。
audioOnly	否	false	仅音频会议，可以在会议中打开视频。
audioMuted	否	false	开始会议时静音音频。
videoMuted	否	false	开始会议时关闭视频。
serverURL	否	meet.jitsi.si	指定自定义服务器。必须是有效的绝对 URL，例如 `https://someHost.com`。
userAvatarURL	否	none	用户头像 URL。
token	否	none	JWT 令牌，用于身份验证。
featureFlag	否	见下方	FeatureFlag 对象，用于启用或禁用功能并设置视频分辨率。

FeatureFlag

FeatureFlag 允许您限制视频分辨率并启用/禁用 Jitsi Meet SDK 的某些功能。

JitsiMeetingResponse

以下是 JitsiMeetingResponse 的字段说明：

字段	类型	描述
isSuccess	bool	成功指示符。
message	String	成功消息或错误。
error	dynamic	可选，仅在 `isSuccess` 为 false 时存在。

监听会议事件

每场会议事件

在加入会议时传递 JitsiMeetingListener 来监听每场会议的事件：

await JitsiMeet.joinMeeting(options,
  listener: JitsiMeetingListener(onConferenceWillJoin: ({message}) {
    debugPrint("${options.room} 将加入，消息为: $message");
  }, onConferenceJoined: ({message}) {
    debugPrint("${options.room} 已加入，消息为: $message");
  }, onConferenceTerminated: ({message}) {
    debugPrint("${options.room} 已终止，消息为: $message");
  }, onPictureInPictureWillEnter: ({message}) {
    debugPrint("${options.room} 进入 PIP 模式，消息为: $message");
  }, onPictureInPictureTerminated: ({message}) {
    debugPrint("${options.room} 退出 PIP 模式，消息为: $message");
  }));

全局会议事件

通过 JitsiMeet.addListener 监听全局会议事件：

@override
void initState() {
  super.initState();
  JitsiMeet.addListener(JitsiMeetingListener(
    onConferenceWillJoin: _onConferenceWillJoin,
    onConferenceJoined: _onConferenceJoined,
    onConferenceTerminated: _onConferenceTerminated,
    onPictureInPictureWillEnter: _onPictureInPictureWillEnter,
    onPictureInPictureTerminated: _onPictureInPictureTerminated,
    onError: _onError));
}

@override
void dispose() {
  super.dispose();
  JitsiMeet.removeAllListeners();
}

_onConferenceWillJoin({message}) {
  debugPrint("_onConferenceWillJoin 广播了");
}

_onConferenceJoined({message}) {
  debugPrint("_onConferenceJoined 广播了");
}

_onConferenceTerminated({message}) {
  debugPrint("_onConferenceTerminated 广播了");
}

_onPictureInPictureWillEnter({message}) {
  debugPrint("_onPictureInPictureWillEnter 广播了，消息为: $message");
}

_onPictureInPictureTerminated({message}) {
  debugPrint("_onPictureInPictureTerminated 广播了，消息为: $message");
}

_onError(error) {
  debugPrint("_onError 广播了，错误为: $error");
}

程序化关闭会议

JitsiMeet.closeMeeting();

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

bupafengyu 1楼

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

custom_jitsi_meet_test 是一个基于 Jitsi Meet 的 Flutter 插件，用于在 Flutter 应用中集成视频会议功能。以下是如何使用 custom_jitsi_meet_test 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 custom_jitsi_meet_test 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_jitsi_meet_test: ^0.0.1  # 请使用最新版本

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

2. 配置 Android 和 iOS 项目

在 Android 和 iOS 项目中，确保你已经正确配置了必要的权限和设置。

Android

在 AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

iOS

在 Info.plist 文件中添加以下权限：

<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机以进行视频通话。</string>
<key>NSMicrophoneUsageDescription</key>
<string>我们需要访问您的麦克风以进行音频通话。</string>

3. 使用插件

在你的 Flutter 代码中，你可以使用 custom_jitsi_meet_test 插件来启动视频会议。

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

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

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

class VideoConferenceScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('视频会议'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _joinMeeting();
          },
          child: Text('加入会议'),
        ),
      ),
    );
  }

  void _joinMeeting() async {
    try {
      var options = JitsiMeetingOptions(
        roomName: 'your_room_name', // 会议房间名称
        serverURL: 'https://meet.jit.si', // Jitsi Meet 服务器地址
        subject: '视频会议', // 会议主题
        userDisplayName: '用户', // 用户显示名称
        userEmail: 'user@example.com', // 用户邮箱
        audioMuted: false, // 是否静音
        videoMuted: false, // 是否关闭视频
      );

      await CustomJitsiMeetTest.joinMeeting(options);
    } catch (error) {
      print("Error: $error");
    }
  }
}

4. 处理会议事件

你可以监听会议事件，例如会议结束、用户加入或离开等。

CustomJitsiMeetTest.onConferenceWillJoin.listen((event) {
  print("会议即将加入: $event");
});

CustomJitsiMeetTest.onConferenceJoined.listen((event) {
  print("会议已加入: $event");
});

CustomJitsiMeetTest.onConferenceTerminated.listen((event) {
  print("会议已终止: $event");
});

Flutter视频会议插件custom_jitsi_meet_test的使用

插件简介

支持我们

更多信息

目录

配置

IOS

Podfile

Info.plist

Android

Gradle

AndroidManifest.xml

最低 SDK 版本 23

Proguard

Web

加入会议

JitsiMeetingOptions

FeatureFlag

JitsiMeetingResponse

监听会议事件

每场会议事件

全局会议事件

程序化关闭会议

1. 添加依赖

2. 配置 Android 和 iOS 项目

Android

iOS

3. 使用插件

4. 处理会议事件