Flutter视频会议插件jitsi_meet

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

“Jitsi Meet 插件为 Flutter 提供支持。支持 Android、iOS 和 Web 平台。”

了解更多关于 Jitsi Meet 的信息这里

配置

IOS

注意：示例在 XCode 12.2 和 Flutter 1.22.4 下可以编译。

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 中添加 NSCameraUsageDescription 和 NSMicrophoneUsageDescription。

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) 我的应用需要访问您的相机进行会议。</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) 我的应用需要访问您的麦克风进行会议。</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 库和 tools:replace="android:label" 到 application 标签。

<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="我的应用"
        android:icon="@mipmap/ic_launcher">
        ...
    </application>
...
</manifest>

最低SDK版本 23

在 android/app/build.gradle 中更新最低 SDK 版本到 23。

defaultConfig {
    applicationId "com.gunschu.jitsi_meet_example"
    minSdkVersion 23 // 必须为 Jitsi 需要
    targetSdkVersion 28
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

Proguard

Jitsi 的 SDK 启用了 Proguard，但如果缺少 proguard-rules.pro 文件，您的发布 APK 构建可能会丢失 Flutter Wrapper 和 React Native 代码。在 Flutter 项目的 android/app/build.gradle 文件中添加 Proguard 支持：

buildTypes {
    release {
        // TODO: 添加您的签名配置以用于发布构建。
        // 当前使用调试密钥，以便 `flutter run --release` 可以工作。
        signingConfig signingConfigs.debug
        
        // 添加以下 3 行以启用 Proguard
        minifyEnabled true
        useProguard true
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
}

然后在同一目录下创建一个名为 proguard-rules.pro 的文件。可以参考示例应用的 proguard-rules.pro 文件内容。

注意如果不创建 proguard-rules.pro 文件，尝试加入会议或会议屏幕打开时会立即崩溃。您会在日志中看到以下错误之一：

## 应用崩溃 ##
java.lang.RuntimeException: Parcel android.os.Parcel@8530c57: Unmarshalling unknown type code 7536745 at offset 104
    at android.os.Parcel.readValue(Parcel.java:2747)
    at android.os.Parcel.readSparseArrayInternal(Parcel.java:3118)
    at android.os.Parcel.readSparseArray(Parcel.java:2351)
    .....

## 会议无法打开，返回上一屏幕 ##
W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.BV.LinearGradient.LinearGradientManager
W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.uimanager.g
W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.ARTGroupViewManager
W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.art.a
.....

WEB

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

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

示例：

<body>
  <!-- 此脚本安装 service_worker.js 以提供 PWA 功能给应用。
       更多信息，请参阅：
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <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>

注意查看 jitsi_meet 插件中的使用示例。

加入会议

示例代码：

_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 = "会议与 Gunschu"
        ..userDisplayName = "我的名字"
        ..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

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

FeatureFlag

FeatureFlag 允许您限制视频分辨率并启用/禁用 Jitsi Meet SDK 的一些功能。如果未提供任何标志，则使用默认值。

我们正在使用官方标志列表，取自 Jitsi Meet 存储库。

标志	默认值（Android）	默认值（iOS）	描述
addPeopleEnabled	true	true	启用蓝色按钮“Add people”，当您独自通话时出现。需要启用 inviteEnabled 标志。
calendarEnabled	true	auto	启用日历集成。
callIntegrationEnabled	true	true	启用呼叫集成（iOS 上的 CallKit，Android 上的 ConnectionService）。注意
closeCaptionsEnabled	true	true	启用菜单中的字幕选项。
conferenceTimerEnabled	true	true	启用会议计时器。
chatEnabled	true	true	启用聊天（按钮和功能）。
inviteEnabled	true	true	启用菜单中的邀请选项。
iOSRecordingEnabled	N/A	false	在 iOS 上启用录制功能。
kickOutEnabled	true	true	启用视频缩略图中的踢出选项。
liveStreamingEnabled	auto	auto	启用菜单中的直播选项。
meetingNameEnabled	true	true	显示会议名称。
meetingPasswordEnabled	true	true	显示菜单中的会议密码选项（如果设置了密码，对话框仍然会显示）。
pipEnabled	auto	auto	启用画中画模式。
raiseHandEnabled	true	true	启用菜单中的举手选项。
recordingEnabled	auto	N/A	启用菜单中的录制选项。
resoulution	N/A	N/A	设置本地和（最大）远程视频分辨率。覆盖服务器配置。接受值为：LD_RESOLUTION（180p）、MD_RESOLUTION（360p）、SD_RESOLUTION（480p/SD）、HD_RESOLUTION（720p/HD）。
serverURLChangeEnabled	true	true	启用服务器 URL 更改。
tileViewEnabled	true	true	启用菜单中的平铺视图选项。
toolboxAlwaysVisible	true	true	工具栏（按钮和菜单）始终可见（如果不是，则单击显示它）。
videoShareButtonEnabled	true	true	启用视频共享按钮。
welcomePageEnabled	false	false	启用欢迎页面。“欢迎页面列出最近的会议和日历约会，旨在被独立应用程序使用。”

关于呼叫集成的备注 Android 上的呼叫集成（称为 ConnectionService）已在官方 Jitsi Meet 应用中被禁用因为这会造成许多问题。您也应该禁用它以避免这些问题。

JitsiMeetingResponse

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

监听会议事件

支持的事件

名称	描述
onConferenceWillJoin	会议正在加载。
onConferenceJoined	用户已加入会议。
onConferenceTerminated	用户已退出会议。
onPictureInPictureWillEnter	用户进入画中画模式。
onPictureInPictureTerminated	用户退出画中画模式。
onError	发生了错误。

每场会议的事件

要监听每场会议的事件，将 JitsiMeetingListener 传递给 joinMeeting。当触发 onConferenceTerminated 事件时，自动移除监听器。

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} 进入画中画模式，消息为: $message");
  }, onPictureInPictureTerminated: ({message}) {
    debugPrint("${options.room} 退出画中画模式，消息为: $message");
  }));

全局会议事件

要监听全局会议事件，只需使用 JitsiMeet.addListener(myListener) 添加监听器。可以通过 JitsiMeet.removeListener(listener) 或 JitsiMeet.removeAllListeners() 移除监听器。

@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 广播");
}

程序化关闭会议

JitsiMeet.closeMeeting();

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

bupafengyu 1楼

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

jitsi_meet_rise 是一个用于在 Flutter 应用中集成 Jitsi Meet 视频会议的插件。它基于 Jitsi Meet SDK，允许开发者在应用中轻松实现视频会议功能。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 jitsi_meet_rise 依赖：

dependencies:
  flutter:
    sdk: flutter
  jitsi_meet_rise: ^0.0.1

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

2. 配置 Android 和 iOS

在使用 jitsi_meet_rise 之前，需要对 Android 和 iOS 项目进行一些配置。

Android 配置

在 android/app/build.gradle 文件中，确保 minSdkVersion 设置为 23 或更高：

android {
    ...
    defaultConfig {
        ...
        minSdkVersion 23
        ...
    }
    ...
}

iOS 配置

在 ios/Podfile 文件中，确保 platform :ios 设置为 11.0 或更高：

platform :ios, '11.0'

然后运行 pod install 来更新 iOS 项目。

3. 使用 `jitsi_meet_rise` 插件

在 Flutter 代码中，你可以使用 jitsi_meet_rise 来启动 Jitsi Meet 视频会议。

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

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

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

class VideoConferenceScreen extends StatelessWidget {
  final JitsiMeetRise jitsiMeet = JitsiMeetRise();

  void startVideoConference() async {
    var options = JitsiMeetConferenceOptions(
      room: "your_room_name", // 会议室名称
      serverURL: "https://meet.jit.si", // Jitsi Meet 服务器 URL
      subject: "Video Conference", // 会议主题
      userDisplayName: "John Doe", // 用户显示名称
      userEmail: "john.doe@example.com", // 用户邮箱
      audioMuted: false, // 是否静音
      videoMuted: false, // 是否关闭视频
    );

    await jitsiMeet.joinMeeting(options);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Jitsi Meet Video Conference"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: startVideoConference,
          child: Text("Start Video Conference"),
        ),
      ),
    );
  }
}

4. 运行应用

现在你可以运行你的 Flutter 应用，并点击按钮启动 Jitsi Meet 视频会议。

5. 处理会议事件

你可以监听会议事件来处理会议的状态变化，例如会议开始、结束等。

jitsiMeet.addListener(JitsiMeetingListener(
  onConferenceWillJoin: (url) {
    print("Conference will join: $url");
  },
  onConferenceJoined: (url) {
    print("Conference joined: $url");
  },
  onConferenceTerminated: (url) {
    print("Conference terminated: $url");
  },
));

6. 自定义 UI

你可以通过 JitsiMeetConferenceOptions 自定义会议界面的外观和行为，例如隐藏工具栏、设置背景颜色等。

var options = JitsiMeetConferenceOptions(
  room: "your_room_name",
  serverURL: "https://meet.jit.si",
  subject: "Video Conference",
  userDisplayName: "John Doe",
  userEmail: "john.doe@example.com",
  audioMuted: false,
  videoMuted: false,
  featureFlags: {
    "welcomePage.enabled": false,
    "toolbox.alwaysVisible": false,
    "pip.enabled": true,
  },
);

7. 结束会议

你可以通过调用 jitsiMeet.closeMeeting() 来手动结束会议。

jitsiMeet.closeMeeting();

8. 权限处理

确保在 AndroidManifest.xml 和 Info.plist 中添加必要的权限，例如摄像头和麦克风的访问权限。

Android

在 android/app/src/main/AndroidManifest.xml 文件中添加以下权限：

<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.INTERNET" />

iOS

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

<key>NSCameraUsageDescription</key>
<string>We need access to your camera for video conferencing.</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone for video conferencing.</string>

9. 调试和问题解决

如果在使用过程中遇到问题，可以查看日志以获取更多信息。你可以在 JitsiMeetConferenceOptions 中启用调试模式：

var options = JitsiMeetConferenceOptions(
  room: "your_room_name",
  serverURL: "https://meet.jit.si",
  subject: "Video Conference",
  userDisplayName: "John Doe",
  userEmail: "john.doe@example.com",
  audioMuted: false,
  videoMuted: false,
  featureFlags: {
    "debug.enabled": true,
  },
);

Flutter视频会议插件jitsi_meet_rise的使用

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

目录

配置

IOS

Podfile

Info.plist

Android

Gradle

AndroidManifest.xml

最低SDK版本 23

Proguard

WEB

加入会议

JitsiMeetingOptions

FeatureFlag

JitsiMeetingResponse

监听会议事件

每场会议的事件

全局会议事件

程序化关闭会议

1. 添加依赖

2. 配置 Android 和 iOS

Android 配置

iOS 配置

3. 使用 jitsi_meet_rise 插件

4. 运行应用

5. 处理会议事件

6. 自定义 UI

7. 结束会议

8. 权限处理

Android

iOS

9. 调试和问题解决

3. 使用 `jitsi_meet_rise` 插件