Flutter视频会议插件jitsi_meet_v1的使用

Flutter视频会议插件jitsi_meet_v1的使用

支持我们使用我们的Patreon账户。

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

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

更多关于 Jitsi Meet 的信息可以在这里找到：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

将 NSCameraUsageDescription 和 NSMicrophoneUsageDescription 添加到您的 Info.plist。

<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

设置 build tools gradle 的依赖项至少为 3.6.3：

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

设置 distribution 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 并添加工具库和 application 标签中的 tools:replace=“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

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 文件，则尝试加入会议或会议屏幕尝试打开时应用程序会崩溃。您将在 logcat 中看到以下错误之一。

## App crashes ##
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)
    .....

## Meeting won't open and you go to previous screen ##
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; // Limit video resolution to 360p
      
      var options = JitsiMeetingOptions()
        ..room = "myroom" // Required, spaces will be trimmed
        ..serverURL = "https://someHost.com"
        ..subject = "Meeting with Gunschu"
        ..userDisplayName = "My Name"
        ..userEmail = "myemail@email.com"
        ..userAvatarURL = "https://someimageurl.com/image.jpg" // or .png
        ..audioOnly = true
        ..audioMuted = true
        ..videoMuted = true
        ..featureFlag = featureFlag;

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

JitsiMeetingOptions

FeatureFlag

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

我们使用的是 官方列表中的标志。

注意：关于呼叫集成。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");
  }));

全局会议事件

要监听全局会议事件，只需使用 JitsiMeet.addListener 添加一个 JitsiMeetingListener。您可以使用 JitsiMeet.removeListener 或 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 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();