Use the camera for keyboard input in your app
System & Services 进阶 9m

在 App 中使用相机作为键盘输入

Use the camera for keyboard input in your app

2021年6月8日

在 Apple 官方观看视频

一句话判断

如果你的 App 有任何需要用户手动输入长文本或扫描内容的场景，相机输入是能把转化率拉高一个量级的功能，接入成本几乎为零。

这场 Session 讲了什么

iOS 15 给键盘引入了一个很实用的新能力：用户在输入文字时，可以直接调用相机扫描真实世界的文字并插入到输入框中。这不是 OCR SDK——它是系统键盘的内置功能，通过 UIKeyInput 协议自动获得，不需要导入任何额外框架。

Session 展示了几个典型使用场景：在备忘录里扫描一段印刷文字变成可编辑文本，在浏览器地址栏扫描网址，在翻译 App 里扫描外文。底层技术基于 Vision 框架的文本识别能力，但系统把它封装到了键盘层级，用户不需要离开当前 App 就能使用。

对于开发者来说，关键信息是：如果你的 App 使用了标准的 UITextField、UITextView 或任何遵循 UIKeyInput 协议的控件，相机输入按钮会自动出现在键盘上方的快捷栏中。你需要做的只是确保你的输入框没有禁用这个功能（通过 textInputContextIdentifier 等属性），以及在 SwiftUI 中确认 TextField 正常工作。

值得深挖的点

UITextInputAssistantItem 的定制空间。 相机输入按钮出现在键盘的快捷栏（shortcut bar）区域，你可以通过 textInputAssistantItem 来控制这个区域显示哪些按钮。如果你已经在使用快捷栏放自定义按钮（比如搜索 App 的常用关键词），要注意和相机按钮的布局冲突。Session 建议不要隐藏系统的相机按钮——这是一个所有用户都能受益的功能，你无法预知哪些用户会依赖它来输入。

从扫描到输入的完整链路。 用户点击相机按钮后，系统会展示一个全屏的相机取景器，用户框选文字后，识别结果直接插入到当前光标位置。整个过程你的 App 不需要处理任何回调或代理方法——系统直接修改了 UITextView 的 text 属性。但如果你需要拦截或处理插入的文本（比如做格式校验），可以通过 UITextViewDelegate 的 textView(_:shouldChangeTextIn:replacementText:) 来拦截。

代码片段

// UITextField 和 UITextView 自动支持相机输入
// 不需要额外代码，键盘上方会出现相机按钮
class ViewController: UIViewController {
    let textField = UITextField()
    let textView = UITextView()

    override func viewDidLoad() {
        super.viewDidLoad()

        // 标准配置即可，相机输入自动可用
        textField.placeholder = "扫描或输入文本"
        textView.isEditable = true
    }
}
// 如果需要拦截扫描插入的文本
class MyViewController: UIViewController, UITextViewDelegate {
    let textView = UITextView()

    func textView(_ textView: UITextView,
                  shouldChangeTextIn range: NSRange,
                  replacementText text: String) -> Bool {
        // 可以在这里校验扫描到的文本
        // 比如检查是否是有效的 URL 或电话号码
        if text.count > 50 {
            // 扫描的长文本可能需要用户确认
            showConfirmationDialog(for: text)
            return false
        }
        return true
    }
}
// SwiftUI 中的 TextField 同样自动支持
struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        VStack {
            TextField("搜索或扫描", text: $searchText)
                .textFieldStyle(.roundedBorder)
                .padding()

            // 相机输入按钮自动出现在键盘上方
        }
    }
}

最佳实践

  • 不要通过设置 textInputContextIdentifier 为空或其他方式来隐藏相机输入按钮——这会让依赖这个功能的用户无法使用你的 App
  • 如果你的输入框只接受特定格式（比如只接受数字），可以在 shouldChangeTextIn 中过滤扫描结果，给用户一个友好的提示
  • 测试时用不同语言的印刷文字（中文、英文、日文混合排版）验证识别效果，Vision 的多语言识别能力在 iOS 15 有显著提升

还有什么值得关注

  • 实时文本（Live Text）功能在系统相册、Safari 等系统 App 中也可以直接使用，体验一致
  • Mac 上也可以通过 iPhone 的相机进行文本扫描（Continuity Camera），同样的底层能力
  • Vision 框架的 VNRecognizeTextRequest 在 iOS 15 支持了更多语言，识别准确度有大幅提升
WWDC 2021