Flutter视频会议插件custom_jitsi_meet_with_pointer_test的使用

Flutter视频会议插件custom_jitsi_meet_with_pointer_test的使用

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

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 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: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: 添加自己的签名配置用于发布构建。
        // 目前使用调试密钥，以便`flutter run --release`工作。
        signingConfig signingConfigs.debug
        
        // 添加以下三行用于proguard
        minifyEnabled true
        useProguard true
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
}

然后在同一目录中添加一个名为proguard-rules.pro的文件。查看示例应用的proguard-rules.pro文件以了解需要粘贴的内容。

注意

如果您不创建proguard-rules.pro文件，那么当您尝试加入会议或者会议屏幕试图打开但立即关闭时，您的应用将会崩溃。您将在logcat中看到以下错误之一。

## 应用崩溃 ##
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>
  <!-- 这个脚本安装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 = "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");
  }));

全局会议事件

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