在您的 App 中添加“实时文本”交互

♪ 柔和乐器演奏的嘻哈音乐 ♪ ♪ 您好 我是 Adam Bradford 是 VisionKit 团队的 工程师 如果您想在您的 App 中 添加实时文本 那么本视频将能够为您提供帮助 但首先 什么是实时文本？ 实时文本能够分析图像 并为用户提供各种功能 如选择和复制文本等 与其内容进行交互 执行查找和翻译 提供包括映射地址 拨号 或跳转到 URL 的 数据检测工作流程等操作 实时文本甚至允许二维码交互 想象一下 如何将它应用于您的 App 中？ 想了解更多吗？请继续观看 在本次讲座中 首先我将介绍 实时文本 API 的一般概述 然后探讨在现有的 App 中 如何实现此 API 在此之后 我将深入探讨在您的 App 中 添加实时文本时 可能会有所帮助的一些技巧和窍门 那么让我们开始 实时文本 API 概述 在高级别下 在 Swift 中 可使用实时文本 API 它在静态图像上效果很好 并且可适用于暂停的视频帧 如果您需要分析 实时视频流媒体的视频 来搜索文本或二维码等项目 VisionKit 也有 一个可用的数据扫描仪 可从我同事 Ron 的相关讲座中 了解更多信息 实时文本 API 在配备了 Apple 神经网络引擎 操作系统为 iOS 16 以及上的设备中可用 并在所有支持 macOS 13 的设备中可用 它由四个主要类别组成 若要使用它 首先 您需要一张图像 然后将该图像 导入执行异步分析的 ImageAnalyzer 分析完成后 根据您所用的平台 将生成的 ImageAnalysis 对象 提供给 ImageAnalysisInteraction 或 ImageAnalysisOverlayView 到目前为止看起来比较简单 对吧？ 现在 我将演示如何将它 添加到现有的 App 中 这是我们的App 是一个简单的图像查看器 它在滚动视图内有一个图像视图 请注意 我可以缩放和平移 但是无论我如何尝试 我也无法选择任何文本 或激活任何这些数据检测器 它没有此功能 这是 Xcode 中的项目 要将实时文本添加到此 App 中 我将修改视图控制器子类 首先 我需要一个 ImageAnalyzer 和一个 ImageAnalysisInteraction 在这里 我简单重写了 viewDidLoad 并在 imageview 中 添加了 interaction 接下来 我需要知道何时执行分析

请注意 当设置了新图像后 我首先重置了 preferredInteractionTypes 和 analysis 其修改的是旧图像 现在在写新 analysis 前 所需的内容都已完成 接下来 我将创建将使用的函数 然后检查我们的图像是否存在

如果存在 则创建一个 Task 接下来 创建一个 configuration 来告诉分析器 它应该检索什么 在这种情况下 我将使用 text 和 machineReadableCode 生成 analysis 可抛出 所以酌情处理 最后 我已准备好调用 analyzeImageWithConfiguration 方法 这将开始分析过程 分析完成后 已经过去了一段时间 App 的状态可能也已经改变 所以我会检查分析是否已成功 显示的图像是否未改变 如果所有这些检查都通过 我可以简单地在 interaction 中 设置 analysis 并设置 preferredInteractionTypes 我在这里 使用 .automatic 它会提供默认的系统行为 我觉得可以进行测试了 哦 看那个 我看到实时文本按钮出现了没错 我现在可以选择文本了 注意 这些界面元素 会自动定位 并将它们的位置保持在图像边界内 和可见区域中 无需我额外操作 好的 请注意 点击实时文本按钮 将能够突出显示任何可选项目 为数据检测器显示下划线 并显示快速操作 我点击此快速操作 即可拨打电话 甚至可以通过长按查看更多选项 不得不说 这很酷 只需这几行代码 我使用了一张普通的图像 并实现了诸多功能 这个简单的 App 现在能够 选择图像上的文本 激活数据检测器 二维码 查找 翻译文本等 在我看来 这区区几行代码实现的功能 也还不错 现在您已经了解了 如何实现实时文本 我将介绍一些技巧和窍门 可能能帮助您更好地操作 我将从探索交互类型开始 大多数开发人员 会使用 .automatic 它提供文本选择 但也会 在启用实时文本按钮后 突出显示数据检测器 这将在所检测到的 任何适用项目下方画一条线 并允许一键访问来激活 这与常见的内置 App 的行为 完全相同 如果您的 App 只用文本选择 而无需使用数据检测器 您可以将类型设置为 .textSelection 它不会随着实时文本 按钮状态的改变而改变 如果您的 App 只用数据检测器 而无需使用文本选择 将类型设置为 .dataDetectors 请注意 在此模式下禁用选择 因此您不会看到实时文本按钮 但数据检测器将添加下划线 并可一键访问 将一个空集设置为 preferredInteractionTypes 将禁用交互 最后一点 无论在文本选择 还是在自动模式下 长按 仍然可以激活数据检测器 此功能受 allowLongPressForDataDetectorsInTextMode 属性控制 设置为 true 时 将启用功能 其为默认设置 如有必要 设置为 false 即可禁用功能 我想稍微花点时间 讲一下底部的这些按钮 它们统称为补充接口 其中包括实时文本按钮 通常位于右下角 快速操作位于左下角 快速操作代表 analysis 中的任何数据检测器 并在实时文本按钮启用时可见 大小、位置和可见性 由 interaction 控制 默认位置和外观与系统匹配 您的 App 可能有 自定义界面元素 这可能会干扰或使用不同的字体 和符号权重 让我们来看看如何自定义此界面 首先是 isSupplementaryInterfaceHidden 属性 如果我想 让我的 App 仍然可选择文本 但不显示实时文本按钮 当我设置 SupplementaryInterfaceHidden 为 true 您的实时文本按钮 或快速操作都不会显示 还有一个的 ContentInsets 属性 如果您的界面元素 会重叠在补充接口上 您可以调整 ContentInsets 那么在可见的状态下 实时文本按钮和快速操作都能 完美适应您现有的 App 内容 如果您的 App 使用自定义字体 您希望界面能够与之适应 设置 SupplementaryInterfaceFont 可为实时文本按钮和快速操作 设置指定字体 和指定的符号字体粗细 请注意 为了按钮大小的一致性 实时文本将忽略磅值 换个话题 如果您没有使用 UIImageview 您可能会发现 突出显示并不能匹配您的图像 这是因为使用 UIImageView 后 VisionKit 可以使用 其 ContentMode 属性 为您自动计算 contentsRect 在这里 交互的视图边界 比其图像内容的边界更大 但应用的却是 默认的内容矩形 一个单位矩形 这很容易通过实现委托方法 contentsRectForInteraction 来解决 且会在单位坐标空间中返回一个矩形 描述图像内容 与交互边界的关系 来纠正这个问题 例如 返回一个标示这些值的矩形 能够纠正这个问题 但请基于 您 App 的当前内容和布局 来返回正确的标准化矩形 但每当交互的边界发生变化时 将调用 contentsRectForInteraction 如果您的 contentsRect 已更改 但交互边界未更改 您可以通过调用 setContentsRectNeedsUpdate() 来使交互更新 采用实时文本时 您可能会遇到的另一个问题是 放置此交互的最佳位置是哪里？ 理想情况 实时文本交互直接放置在 托管您的图像内容视图上 如前所述 UIImageView 将计算 contentsRect 虽然不是必需的 但还是首选的 如果您使用的 是 UIImageview 只需在 ImageView 上设置交互 VisionKit 将处理其他的内容 但如果 您的 ImageView 位于 在 ScrollView 内部 您可能很想 将交互 放在 ScrollView 上 但不建议这样做 且因它将有一个 不断变化的 contentsRect 可能难以管理 此处的解决方案是相同的 将交互放在 托管您的图像内容的视图上 即使它在应用缩放的 ScrollView 内 接下来我将谈一下手势 至少可以说 实时文本有一套 非常非常丰富的手势识别器 根据您的 App 的结构 您可能会发现交互 响应您的 App 应该处理的 手势和事件 或 App 响应交互的 不要担心 如果发生了这些问题 这里有一些技巧可以用来帮助纠正 纠正此问题的一种常见方法 就是实现委托方法 interaction shouldBeginAt point for interactionType 如果返回 false 则不会执行该操作 一个比较好的切入点 是检查 interaction 在 at: point 是否有可交互项 或者 是否有 活动中的 text seleciton 此处使用文本选择检查 所以您能够点击文本 来取消选择 另一方面 如果您发现您的交互 似乎对手势没有反应 可能是因为您的 App 中 有手势识别器来处理手势 在这种情况下 您可以制定类似的解决方案 使用您的 gestureRecognizer 的 gestureRecognizerShouldBegin 委托方法 在这里 我执行了类似的检查 如果该位置有交互式项目 或者启用文本选择 会返回 false 还有一点需要注意 在这个例子中 我首先通过传入 nil 将 gestureRecognizer 的位置 转换成窗口坐标空间位置 然后将其转换为交互的视图 如果您的交互 位于应用缩放的 ScrollView 内 这可能是必要的 如果发现您的定点不匹配 则可尝试此技巧 我认为有用的另一类似方法 是重写 UIView 中的 hitTest: WithEvent 这里也是类似的操作 我执行与之前相同类型的检查 在这种情况下 返回适当的视图 一如既往 我们希望 您的 App 尽可能响应迅速 神经网络引擎的分析非常高效 在此基础之上 我想分享有一些 ImageAnalyzer 的提示 以获得最佳性能 理想情况下 您的 App 只需 共享一个 ImageAnalyzer 此外 我们支持多种类型的图像 您应该始终通过 传入您拥有的本机类型 来尽量减少图像转换 但如果您恰好 有一个 CVPixelBuffer 将会是最高效的 此外 为了最好地利用系统资源 您应仅在图像出现在屏幕上时 或在此之前 开始分析 如果您的 App 包含内容滚动 例如 包含了一个时间轴 仅在滚动停止后再开始分析 现在 实时文本 并不仅仅出现在此 API 中 在您的 App 使用的系统中 已自动为部分架构 提供实时文本支持 例如 UITextField 或 UITextView 的 实时文本支持 使用相机进行键盘输入 WebKit 和 Quick Look 也支持实时文本 如想了解更多信息 请查看这些讲座 iOS 16 今年的新功能 我们在 AVKit 中 添加了实时文本支持 AVPlayerView 和 ViewController 默认通过 allowsVideoFrameAnalysis 属性 在暂停的帧中 自动支持实时文本 请注意 这仅适用于 非 FairPlay 保护的内容 如果您使用的是 AVPlayerLayer 那么您负责的是管理分析 和交互 使用 currentlyDisplayedPixelBuffer 属性 来获取当前帧非常重要 这是保证 分析正确框架的唯一途径 如果视频播放速率为零 这将仅返回一个有效值 此为浅拷贝 写入将极不安全 而且 仅适用于 非 FairPlay 保护的内容 我们很高兴能帮助实现 您的 App 的实时文本功能 代表实时文本团队的每一位成员 感谢您参加本次讲座 非常期待看到您如何将它 用于您 App 中的图像 一如既往地 祝您从中获得乐趣 ♪