反应：如何访问手机的实际相机应用程序(而不是在浏览器中加载提要)？

Question

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

Answer 1

简短回答：

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

当您使用属性accept="image/*"时，现代手机浏览器可以选择使用相机应用作为<input type="file">输入的输入，而不是文件选择对话框。这将允许用户选择他们喜欢的输入，但是如果您在输入元素上使用属性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])
})
}

Answer 3

谢谢@apsillers和@struensee的答案，我设法用这两个答案做了我一直在寻找的事情。但是，@struensee答案中缺少一些东西，我想为我的React 解决方案做出贡献：

import React, { useState, useRef } from "react";
const UploadImageComponent = () => {
const [imageObject, setImageObject] = useState(null);
const handleFileInput = useRef(null);
const handleClick = () => {
handleFileInput.current.click();
};
const handleImageChange = (event) => {
setImageObject({
imagePreview: URL.createObjectURL(event.target.files[0]),
imageFile: event.target.files[0],
});
};
return (
<div>
<button onClick={handleClick}>Upload Photo</button>
<label>
<input
style={{ display: "none" }}
type="file"
accept="image/*"
capture="environment"
ref={handleFileInput}
onChange={handleImageChange}
/>
</label>
{imageObject && <img src={imageObject.imagePreview} />}
</div>
);
};
export default UploadImageComponent;

使用 ref 将确保单击按钮将触发隐藏输入中的 onChange。<img>标签用于显示当前正在上传的图像。