使用 Flutter UIKit 为声网实时视频通话添加会议 URL

如果你想给视频通话开发一个分享链接,方便用户的朋友通过链接直接加入某个视频通话或直播推流,方法一是让用户向朋友分享聊天室代码,让其朋友把这个代码敲到他们自己的应用上;方法二是让用户的朋友通过用户分享的链接直接进入聊天室。很明显方法二更好,而方法二需要搭建通用链接。


什么是通用链接?

大部分情况下,应用程序中的视图都有对应的网页视图。例如,你可以在手机上的网页浏览器上打开 instagram 个人中心,也可以在 instagram 应用里打开这个视图,而通用链接就是把网页浏览器上的内容显示到应用程序上的“通道”。

在有些情况下,我们无法通过通用链接打开网页,比如,有些复杂的游戏不能在网页浏览器上运行,如果点击专属链接,就会直达模板页面并将模板页面传递给应用,应用会渲染所有内容或加入游戏。

安卓和 iOS 系统上的通用链接不一样,想通过 URL 直接打开应用程序,需要分别在两种系统上设置通用链接。


前期准备

  • VS Code 或 Android Studio
  • Xcode 12.3 或更高版本
  • 安卓和 iOS 设备
  • 配置了 SSL 证书的公共服务器(HTTPS)


设置通用链接

通用链接很好设置,主要分两步:

  1. 设置网站
  2. 设置应用程序

我们先从网站设置开始。


设置网站

我们必须在 Flutter 中为 URL 创建两个参考点,以便在安卓和 iOS 系统上都能打开链接。先来分别看看如何在安卓和 iOS 系统上设置网站以打开通用链接。


安卓

对于安卓系统,首先创建一个存储在 .known/assetlinks.json 的 JSON 文件,通过创建这个文件来声明网站与应用程序的关联。

JSON 文件中添加以下属性:

[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
    "namespace": "agora_uikit",
    "package_name": "io.agora.agora_uikit_example",
    "sha256_cert_fingerprints": [""]
}
}]
  • namespace :Flutter 应用程序的名称。
  • package_name :在应用程序的 build .gradle 文件中声明的应用程序 ID。
  • sha256_cert_fingerprints :使用以下命令通过 Java keytool 生成指纹:
keytool -list -v -keystore my-release-key.keystore

iOS

对于 iOS 系统,我们会创建一个名为 apple-app-site-association 的文件,用这个文件来声明网站与应用程序的关联。注意,该文件在保存时没有任何扩展名。

Apple 应用网站协会(AASA)应配置在根目录下,为你的 CDN 添加合适的标头,确保为该文件配置 Content-Type=application/pkcs7-mime 标头。AASA 文件如下:

{
  "applinks": {
    "apps": [],
    "details": [{
        "appIDs": ["DEVELOPMENT_TEAM.PRODUCT_BUNDLE_IDENTIFIER"],
        "components": [
          {
            "/": "*"
          }
        ]
    }]
  }
}

你只需用应用程序中的关联值替换 DEVELOPMENT_TEAM PRODUCT_BUNDLE_IDENTIFIER 。找到你的项目中的 iOS 目录,在该目录的终端中运行下列命令,就可以找到DEVELOPMENT_TEAMPRODUCT_BUNDLE_IDENTIFIER ,如下:

grep -r -m 1 "DEVELOPMENT_TEAM" .; grep -r -m 1 "PRODUCT_BUNDLE_IDENTIFIER" .

你的终端如下:

=> grep -r -m 1 "DEVELOPMENT_TEAM" .; grep -r -m 1 "PRODUCT_BUNDLE_IDENTIFIER" ../AppName.xcodeproj/project.pbxproj:    DEVELOPMENT_TEAM = 278494H572;
./AppName.xcodeproj/project.pbxproj:    PRODUCT_BUNDLE_IDENTIFIER = io.agora.AppName;

这种情况下,我们想要的值分别是 278494H572io.agora.AppName

如果想查看是否正确设置网站,可前往 Branch.io’s validator

如果想查看更多的示例,可查看 Apple 文档。

添加 AASA 后,你的服务器目录如下:

2

以上是所有设置,接下来设置应用程序。


设置应用程序

首先,设置应用程序信任,即应用程序已获得网站批准,可以自动打开该域名的链接。如果系统验证你拥有该 URL,就会自动将这些 URL intent 路由到你的应用程序。

下面一起看看如何在安卓系统和 iOS 系统中设置 URL 和应用程序之间的信任。


安卓

对于安卓系统,我们只需在 AndroidManifest.xml 中添加 intent 过滤器。

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https"
        android:host="[YOUR_HOST]" />
</intent-filter>

在上述代码中,用你的 HTTPS 服务器替换 [YOUR_HOST]


iOS

对于 iOS 系统,可以使用 Xcode 将关联域的兼容性添加到项目中。在 Xcode 上打开的Flutter 应用程序的 iOS 目录,选择 Runner

  • 在Runner中,选择 Signing & Capabilities。

3

  • 点击 +Capability
  • 选择列表中的 Associated Domains。

4

  • 点击 + icon,添加你的服务器 URL。
applinks:www.link-to-your-server.com

5

以上就是所有设置。我们来一起看一下如何在 UIKit 中使用 URL 来分享邀请。


Flutter UIKit

Flutter UIKit 现在可以使用通用链接啦,通用链接可以自动分享邀请信息,还可以验证 URL 和应用程序之间的信任。

想了解如何使用通用链接,可以找到 Flutter UIKit 的深度链接分支:https://github.com/AgoraIO-Community/Flutter-UIKit/tree/deeplink

如果想用 Flutter UIKit 生成邀请信息和会议 URL,只需将 deeplinkBaseUrl 添加到 AgoraClient 中,就可以声明客户对象,如下所示:

final AgoraClient client = AgoraClient(    
    agoraConnectionData: AgoraConnectionData(      
        appId: "<--Add your APP ID here-->",      
        channelName: "test",    
    ),    
    enabledPermission: [Permission.camera,Permission.microphone],
    deepLinkBaseUrl: "link-to-your-server.com",  
);


测试

可以在安卓系统或 iOS 上进行测试。在根目录下的在终端输入下列命令:

flutter run


总结

我们成功搭建了一个视频聊天应用程序,这个应用可以分享会议 URL 并直接邀请他人加入你的通话,无需输入频道名称。

如果想在你的 Flutter UIKit 中使用通用链接,请看完整代码


其他资源

要了解更多关于声网 Flutter SDK 的信息及其他用例,请查看开发者指南

点击这里查看上述功能的完整文档,还可以查看其他功能。

原文作者:Meherdeep Thakur
原文链接:Adding Meeting URLs to your Agora Live Video Call using the Flutter UIKit
推荐阅读
相关专栏
SDK 教程
164 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。