使用摄像头在您的 app 中进行键盘输入

了解如何支持实况文本并从摄像头智能拉取信息，以填充 app 中的表单和文本字段。我们将展示如何应用内容过滤，以在有人将摄像头用作键盘输入时获取正确信息，并将其运用于相关 UITextField，帮助您的 app 输入数据，例如电话号码、地址和航班信息。同时，我们还将探索如何创建自定义界面，扩展 UIImageView 等其他控制功能，以支持此功能。关于支持 app 中自动填充功能的更多信息，我们建议观看 WWDC20 的“随时随地自动填充”和 WWDC17“获得更好文本输入体验的关键”。

资源

- 高清视频
- 标清视频

相关视频

下载

♪播放重低音音乐♪ ♪ 大家好我是朗桑托斯我是专门处理“键盘”的软件工程师今天要跟各位介绍如何善用新功能输入文本不是通过打字或听写而是通过相机我们非常努力的工作使这个功能得以发布现在终于到了WWDC大会我准备好要去度假了等到安全之后我想要休个假去旅行不过旅行有件事很困扰我就是要处理所有非数码的文本你们懂我意思吧？发票、活动传单还有他们在酒店房间留给你的巨型文件夹幸好 iOS 15有新功能可以让你从周遭环境中捕捉文本让我示范给你看来看看吧！我在构建这个旅行日志app 我会用它来记载我的行程以及我停留的地点像是我上一趟去夏威夷的旅行在顶端这里我可以添加图像标头也许是我的“相机胶卷”里美丽的风景照接着有几个栏位要填入酒店信息例如名称、电话号码和地址其实这些信息我全都有就在我眼前的文件上

但是我不想全部用打字输入现在我不用打字了例如如果我在“电话号码”栏位轻点两下就会在编辑菜单中看到新选项使用“照片中的文本” 启动之后相机会立即辨识文件上这一堆文本我可以锁定画面只选择电话号码然后轻点“插入” 就完成了我想这功能非常棒让我想起一句俗语一画胜千言可是有了这个功能我们真的可以从一张照片中提取千言万语总之就像我前面说的我想让你知道如何善用这个功能先从介绍筛选内容开始吧如果你还记得的话我必须从文本的大方框中拖选电话号码但是如果app知道我在找电话号码我就不必这么做它应该忽略其他内容只提取数字所以首先我会让你看看筛选你想要的内容有多简单使用TextContentType 就能完成筛选而在文本框和文本视图有 keyboardType性质可选事实上你可能已经使用这些性质来支持“自动填充”这类的功能如果是的话那很棒你会从相机输入获得额外的效益如果你还没用过那些功能这里有一些前几年的视频可以供你参考好的回到TextContentType TextContentType 可以是其中一个数值但是相机不会筛选所有类型它只会筛选这七种现在来看一些示例这是前四个电话号码完整街道地址、链接和邮箱以上在现今的iOS里原本就有而在新的iOS 15里我们多加了三种类型航班号、运货跟踪号码以及日期、时间和持续时间的组合你可以想象对旅游app而言航班号多有用或运货跟踪号码对包裹跟踪app来说有多酷总之这就是使用这些内容类型的方法超级简单如果你在Interface Builder 请在“属性”检查器中查找“内容类型”与“键盘类型” 如果你要在代码里做这件事只要指派你想要的数值即可在我的旅行日志app中 “电话号码”栏位是使用电话按键键盘 “地址”栏有 fullStreetAddress的 textContentType 请注意电话号码的部分我把autocorrectionType 设定为否因为如果没有自动改正或预测文本候选的话 iOS会给你一个按钮可以快速访问相机好的现在回到我的app 我们可以试着再次捕捉酒店电话号码不过这次用我们改动的代码现在当我叫出相机它会聪明地忽略所有其他文本只留下电话号码现在在“地址”栏再试一次

快多了不用再一直轻点和轻扫这就是你筛选内容的方法接下来进入不同的挑战我们要怎么让这项功能更为人所知真正促进其使用呢？身为app开发者我们喜欢简化的用户界面也就是说我们有时候会有额外的功能隐藏在菜单背后以及用户不知道的手势例如如果我使用我app里的 “笔记”栏看不出来我可以在这里用相机输入要轻点第二次才会出现编辑菜单候选栏有预测文本而非我之前给你看的按钮所以如果你想要在屏幕上出现暗示可用相机输入的按钮你就会想要添加你自己专用的启动按钮要这么做首先需要创建一个UIAction 使用captureTextFromCamera 工厂方法这是iOS 15的新功能这个动作知道如何启动相机同时在它与按钮和菜单一起使用时提供图像和标签现在来为我的app添加一个菜单上面要有从相机插入文本的项目所以又回到我的app 编辑笔记栏时我的键盘上方会出现这个工具栏轻点有相机图标的第二个项目时我希望出现一个有一堆相机相关动作的菜单如我们的新功能“照片中的文本” 我们来创建这个动作请注意除了可选的标识符之外工厂方法只需要响应者接受文本即可接着我帮其他菜单项目创建动作最后把我刚才创建的每个动作合并成菜单并输入数据包括textFromCamera的动作切记我不需要指定标题也不需要指定使用的图像动作都会提供标题甚至会为了我本地化好的来试试看吧我们回到app 这里是“笔记”栏及有相机菜单的工具栏先让我输入一些我眼前活动传单上的文本

完成！只要短短几行代码就完成一个用户可发现的启动器不过还有一件事要留心在你添加任何相机启动器之前你会想要先确认 canPerformAction withSender的结果那是因为我们的UIAction是通过调用UIResponder的新方法来运行这个对象称为 captureTextFromCamera 运行方式类似标准编辑动作像剪下、复制和贴上而那些动作并不总是适用取决于上下文例如如果你什么都没选择就不能剪下文本这里也一样 captureTextFromCamera动作需要一些先决条件那个方法可以确保所有要求都符合可是现在先查看各个内容这样一来你就更能了解为什么那个方法可能终止处理首先有一些硬件要求不是所有可以运行iOS 15的设备都支持该功能设备应为iPhone 但不是随便的iPhone 要具备神经网络引擎拥有机器学习超级能力的 iPhone才行除了硬件之外你的响应者还必须处理文本插入我们之后会再谈更多接下来这可能很明显但是如果你的响应者是一个文本视图或文本框那必须要能编辑最后用户的首选语言中一定要有这七种可支持语言至少其中一种现在你已经做好万全准备可以处理相机输入了可是在我们结束之前让我给你看一些我添加在我的app里有趣的东西还记得标头相片吗？相片很美可是我觉得如果在上面加一个图片说明感觉满酷的也许可用我的相机捕捉图片说明所以我在这里加一个启动钮就跟我在菜单项目所做的一样

现在我可以捕捉文本放在我的图像上可是我要怎么做呢？我是说那是图像视图而不是文本控制我们先倒退回想文本控制的原理之后再谈图像视图文本控制是采用名为UIKeyInput的协议其定义了一组基本方法让响应者接受键盘输入该协议有三种方法其中一种是insertText法那个方法正是我们把文本从相机传送到你的app的方法所以要让响应者支持相机输入就需要采用这个协议我知道我刚才说文本控制是采用UIKeyInput 可是在现实世界它们采用的协议称为UITextInput 也就是UIKeyInput的延伸如果你采用UITextInput 在使用相机时会得到额外的功能可以预览插入的文本这里显示的setMarkedText法可以做到不过有预览功能是可选的选择如果你不想要有那个功能你只需要采用 UIKeyInput就可以了剩下最后一个协议要介绍几分钟前你可能已经发现了 UIKeyInput本身延伸了 UITextInputTraits 那个协议只包含可选的性质像是keyboardType 和textContentType 你之前就知道是用来筛选特定内容的相机输入所以针对相机输入你会想要采用UIKeyInput 但这可选择依你想要的功能程度决定采用UITextInputTraits 或UITextInput 好了现在再回到ImageView吧我要创建一个新的类别叫做HeadlineImageView 子类为UIImageView 并采用UIKeyInput 这是它在代码里的样子就是一个UIImageView的子类有UILabel子视图我们会用来显示图片说明记得要采用UIKeyInput 我们需要三个方法 hasText、deleteBackward 以及insertText 响应者通常会采用UIKeyInput 来召唤键盘可是因为我只想要相机输入而不是键盘输入我们只需要实现insertText 这个方法就行了 hasText可以直接终止处理而deleteBackward 不需要做任何动作至于insertText 它的实现相当简单只要从相机获得文本并交给我们的标签就好就这样而已！现在我们有图像视图也知道怎么显示用相机捕捉的图片说明谢谢各位与我共度这趟旅程！我希望你们离开时可以清楚记得好好利用文本内容类型它们可通过不只一种方式协助你包括筛选相机捕捉的文本当你真的想要推广相机输入时创建你自己的启动器我们提供外观一致的标签和图像用户可跨越不同app 与相机输入联系在一起可是一定要先确认该功能是否可用最后记得你可以在不是文本控制的自定义响应者使用相机输入只需要采用 UIKeyInput协议就行了祝各位旅途平安好好享受 2021年WWDC接下来的旅程吧！ ♪

3:33 - Filtering text field input

phone.keyboardType = .phonePad
phone.autocorrectionType = .no

address.textContentType = .fullStreetAddress

5:07 - Custom action to capture text from camera

let textFromCamera = UIAction.captureTextFromCamera(responder: self.notes, identifier: nil)

5:41 - Adding custom UIAction for capture text to a menu

let textFromCamera = UIAction.captureTextFromCamera(responder: self.notes, identifier: nil)

let choosePhotoOrVideo = UIAction(…)
let takePhotoOrVideo = UIAction(…)
let scanDocuments = UIAction(…)

let cameraMenu = UIMenu(children: [choosePhotoOrVideo, takePhotoOrVideo, scanDocuments, textFromCamera])

let menuToolbarItem = UIBarButtonItem(title: nil, image: UIImage(systemName: "camera.badge.ellipsis"), primaryAction: nil, menu: cameraMenu)

9:59 - Implementing UIKeyInput on a custom image view

class HeadlineImageView: UIImageView, UIKeyInput {
    var headlineLabel: UILabel = UILabel()
    var hasText: Bool = false

    override init(image: UIImage?) {
        super.init(image: image)
        initializeLabel()
    }
    
    func insertText(_ text: String) {
        headlineLabel.text = text
    }

    func deleteBackward() { }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

使用摄像头在您的 app 中进行键盘输入

资源

相关视频

WWDC23

WWDC21

WWDC20