React：如何访问手机的实际相机应用程序（不在浏览器中加载提要）？

Question

我遇到过很多用于打开流和捕获图像的包和 API，但所有这些解决方案都需要在组件中加载提要，因此“相机”是浏览器内的实用程序。有没有办法在 DOM 之外打开手机的实际相机应用程序？

Answer 1

简短回答：

<input type="file" accept="image/*" capture="environment">

当您使用 属性 时，现代手机浏览器可以选择使用相机应用程序作为输入<input type="file">，而不是文件选择对话框accept="image/*"。这将允许用户选择他们喜欢的输入，但如果您capture在输入元素上使用该属性，浏览器会看到自动使用相机的提示，而根本不提供选择。capture也可以有一个值，以提示应该使用哪个相机：

添加capture不带值的属性让浏览器决定使用哪个摄像头，而"user"和"environment"值分别告诉浏览器首选前置摄像头和后置摄像头。

该capture属性适用于 Android 和 iOS，但在桌面上被忽略。但请注意，在 Android 上，这意味着用户将无法再选择现有图片。相反，系统相机应用程序将直接启动。

一旦有了输入图像，您就可以像读取任何输入文件一样读取它，例如，使用FileReader.

Answer 2

感谢@apsillers 的回答。对于那些尝试创建一个按钮来提示实际相机加载以进行拍照而不是在浏览器中捕获视频源的人来说，这是一个特定于 React 的实现：

按钮：

<div >
  <label>
    <input 
      style={{display: 'none'}} 
      type='file' 
      accept="image/*"
      capture="environment"
      onChange={this.handleImageChange}
     />
    <YourCustomButton/>
  </label>
</div>

处理程序：

handleImageChange = (event) => {
  this.setState({
    image: URL.createObjectURL(event.target.files[0])
  })
}