Html 如何从网络应用程序访问手机的相机？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8581081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access a mobile's camera from a web app?
提问by u775856
In my web app (not native app) for mobiles, I want to take a photo and upload it, but I don't want to use Adobe Flash. Is there any way to do this?
在我的移动网络应用程序（不是本机应用程序）中，我想拍照并上传它，但我不想使用 Adobe Flash。有没有办法做到这一点？
回答by Ashish
In iPhone iOS6 and from Android ICS onwards, HTML5 has the following tag which allows you to take pictures from your device:
在 iPhone iOS6 和 Android ICS 之后，HTML5 具有以下标签，它允许您从您的设备拍摄照片：
<input type="file" accept="image/*" capture="camera">
Capturecan take values like camera, camcorder and audio.
Capture可以采用相机、摄像机和音频等值。
I think this tag will definitely not work in iOS5, not sure about it.
我认为这个标签在 iOS5 中肯定不起作用，不确定。
回答by Tuxie
Nowadays at least with android it's relatively easy. Just use normal file input tag and when user clicks it the phone will ask if user wants to use camera (or file managers etc..) to upload a file. Just take a photo with the camera and it will automatically be added and uploaded.
现在至少在 android 上它相对容易。只需使用普通的文件输入标签，当用户点击它时，手机会询问用户是否要使用相机（或文件管理器等）上传文件。只需用相机拍一张照片，它就会自动添加和上传。
No idea about iphone. Maybe someone can enlighten on that. EDIT: Iphone works similarly.
对iphone没有概念。也许有人可以对此有所启发。编辑：Iphone 的工作原理类似。
Sample of the input tag:
输入标签示例：
<input type="file" accept="image/*" capture="camera">
回答by user3204365
Just to update this, the standard now is:
只是为了更新这个，现在的标准是：
<input type="file" name="image" accept="image/*" capture="environment">
to access the environment-facing (rear) camera, and
访问面向环境的（后）摄像头，以及
<input type="file" name="image" accept="image/*" capture="user">
for user-facing (front) camera. To access video, substitute "video" for "image" in name.
用于面向用户的（前置）摄像头。要访问视频，请将名称中的“图像”替换为“视频”。
Tested on iPhone 5c, running iOS 10.3.3, firmware 760, works fine.
在 iPhone 5c 上测试，运行 iOS 10.3.3，固件 760，工作正常。
回答by Octavian Naicu
Safari & Chrome on iOS 6+ and Android 2.2+ support HTML Media Capture which allows you to take pictures with your device's camera or select an existing one:
iOS 6+ 和 Android 2.2+ 上的 Safari 和 Chrome 支持 HTML 媒体捕获，它允许您使用设备的相机拍照或选择现有的照片：
<input type="file" accept="image/*">
<input type="file" accept="image/*">
Here's how it works on iOS 10:
以下是它在 iOS 10 上的工作方式：
Android 3.0+ and Safari on iOS10.3+ also support the captureattribute which is used to jump straight to the camera.
Android 3.0+和iOS10.3+的Safari也支持capture直接跳转到相机的属性。
<input type="file" accept="image/*" capture>
<input type="file" accept="image/*" capture>
capture="camera"(String) and accept="image/*;capture=camera"(Parameter) were part of old specs and were replaced by capture(Boolean) the W3C Candidate Recommendation.
capture="camera"(String) 和accept="image/*;capture=camera"(Parameter) 是旧规范的一部分，并被captureW3C Candidate Recommendation (Boolean)取代。
Support documentation: this 2013 O'Reilly bookand my testing
支持文档：这本2013 年的 O'Reilly 书和我的测试
回答by Louis
well, there's a new HTML5 features for accessing the native device camera -?"getUserMedia?API"
好吧，有一个新的 HTML5 功能可用于访问本机设备摄像头 -?"getUserMedia?API"
NOTE: HTML5 can handle photo capture from a web page on Android devices (at least on the latest versions, run by the Honeycomb OS; but it can't handle it on iPhones but iOS 6 ).
注意：HTML5 可以在 Android 设备上处理网页上的照片捕获（至少在最新版本上，由 Honeycomb OS 运行；但它不能在 iPhone 上处理它，但在 iOS 6 上）。
回答by Dave Everitt
AppMobi HTML5 SDK once promised access to native device functionality - including the camera - from an HTML5-based app, but is no longer Google-owned. Instead, try the HTML5-based answers in this post.
AppMobi HTML5 SDK 曾经承诺从基于 HTML5 的应用程序访问本机设备功能（包括相机），但不再归 Google 所有。相反，请尝试这篇文章中基于 HTML5 的答案。
回答by Michael Sultana
You can use WEBRTC but unfortunately it is not supported by all web browsers. BELOW IS THE LINK TO SHOW WHICH BROWSERS supports it http://caniuse.com/stream
您可以使用 WEBRTC，但不幸的是，并非所有网络浏览器都支持它。以下是显示哪些浏览器支持它的链接 http://caniuse.com/stream
And this link gives you an idea of how you can access it(sample code). http://www.html5rocks.com/en/tutorials/getusermedia/intro/
此链接让您了解如何访问它（示例代码）。 http://www.html5rocks.com/en/tutorials/getusermedia/intro/
回答by Aaron Benjamin
You'll want to use getUserMediato access the camera.
您需要使用getUserMedia来访问相机。
This tutorial outlines the basics of accessing a device camera from the browser: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf
本教程概述了从浏览器访问设备摄像头的基础知识：https: //medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf
Note: This works on most Android devices, and in iOS in Safari only.
注意：这适用于大多数 Android 设备，仅适用于 iOS 中的 Safari。
回答by Anthony Griggs
It should be noted that security features have been implemented which require either the app to be ran locally under localhost, or through SSL for GetUserMedia() to work.
应该注意的是，安全功能已经实现，要求应用程序在本地主机下运行，或者通过 SSL 使 GetUserMedia() 工作。
I discovered this when trying several of the demos available and was dissapointed when they didn't work! See: New Security Restrictions
我在尝试几个可用的演示时发现了这一点，但当它们不起作用时我很失望！请参阅：新的安全限制
回答by Dennis Traub
I don't know of any way to access a mobile phone's camera from the web browser without some additional mechanism (i.e. Flash or some type of container that allows access to the hardware API)
我不知道有什么方法可以在没有一些额外机制的情况下从网络浏览器访问手机的摄像头（即 Flash 或某种允许访问硬件 API 的容器）
For the latter have a look at PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html
对于后者，请查看 PhoneGap：http: //docs.phonegap.com/phonegap_camera_camera.md.html
With this you should be able to access the camera at least on iOS and Android-based devices.
有了这个，您至少应该能够在基于 iOS 和 Android 的设备上访问相机。
