Flutter视频会议插件custom_jitsi_meet_with_pointer的使用

Jitsi Meet 插件用于 Flutter。支持 Android、iOS 和 Web 平台。

“Jitsi Meet 是一个开源（Apache）WebRTC JavaScript 应用程序，使用 Jitsi Videobridge 提供高质量、安全且可扩展的视频会议。”

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

目录

• 配置
  • IOS
    • Podfile
    • Info.plist
  • Android
    • Gradle
    • AndroidManifest.xml
    • 最小SDK版本23
    • Proguard
  • WEB
• 加入会议
  • JitsiMeetingOptions
  • FeatureFlag
  • JitsiMeetingResponse
• 监听会议事件
  • 每场会议的事件
  • 全局会议事件
• 程序化关闭会议
• 贡献

配置

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) MyApp needs access to your camera for meetings.</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) MyApp needs access to your microphone for meetings.</string>

Android

Gradle

将构建工具 gradle 的依赖设置为至少 3.6.3：

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

将分布 gradle 包装器设置为至少 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: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="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

Jitsi 的 SDK 启用了 proguard，但如果没有 proguard-rules.pro 文件，你的发布 apk 构建将会缺少 Flutter 包装器和 react-native 代码。在你的 Flutter 项目的 android/app/build.gradle 文件中添加 proguard 支持。

buildTypes {
    release {
        // TODO: Add your own signing config for the release build.
        // Signing with the debug keys for now, so `flutter run --release` works.
        signingConfig signingConfigs.debug
        
        // Add below 3 lines for 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 部分的 index.html 中包含 Jitsi Js 库。

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

示例：

<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       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 = "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

FeatureFlag

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

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

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

JitsiMeetingResponse

监听会议事件

支持的事件

每场会议的事件

要按会议监听事件，在加入会议时传递一个 JitsiMeetingListener。当触发 onConferenceTerminated 事件时，监听器会自动移除。

await JitsiMeet.joinMeeting(options,
  listener: JitsiMeetingListener(onConferenceWillJoin: ({message}) {
    debugPrint("${options.room} will join with message: $message");
  }, onConferenceJoined: ({message}) {
    debugPrint("${options.room} joined with message: $message");
  }, onConferenceTerminated: ({message}) {
    debugPrint("${options.room} terminated with message: $message");
  }, onPictureInPictureWillEnter: ({message}) {
	debugPrint("${options.room} entered PIP mode with message: $message");
  }, onPictureInPictureTerminated: ({message}) {
	debugPrint("${options.room} exited PIP mode with message: $message");
  }));

全局会议事件

要监听全局会议事件，只需使用 <code>JitsiMeet.addListener(myListener)</code> 添加一个 JitsiMeetListener。你可以使用 <code>JitsiMeet.removeListener(listener)</code> 或 <code>JitsiMeet.removeAllListeners()</code> 来删除监听器。

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

_onConferenceJoined({message}) {
  debugPrint("_onConferenceJoined broadcasted");
}

_onConferenceTerminated({message}) {
  debugPrint("_onConferenceTerminated broadcasted");
}

_onPictureInPictureWillEnter({message}) {
debugPrint("_onPictureInPictureWillEnter broadcasted with message: $message");
}

_onPictureInPictureTerminated({message}) {
debugPrint("_onPictureInPictureTerminated broadcasted with message: $message");
}

_onError(error) {
  debugPrint("_onError broadcasted");
}

程序化关闭会议

JitsiMeet.closeMeeting();