blocks|key|484314|text|在iPhone+iOS6和安卓ICS之后，HTML5有以下标签，允许你从设备上拍照：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484315|+<input+type="file"+accept="image/*"+capture="camera">|code-block|syntax|javascript|484316|Capture可以获取摄像头、摄像机和音频等值。|offset|length|style|CODE|484317|我想这个标签肯定不能在iOS5中工作，我不确定。|484318|entityMap^0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

In iPhone iOS6 and from Android ICS onwards, HTML5 has the following tag which allows you to take pictures from your device:

<pre><code> &lt;input type="file" accept="image/*" capture="camera"&gt;
</code></pre>

<code>Capture</code> can take values like camera, camcorder and audio.

I think this tag will definitely not work in iOS5, not sure about it.

blocks|key|484665|text|更新一下，现在的标准是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484666|<input+type="file"+name="image"+accept="image/*"+capture="environment">|code-block|syntax|javascript|484667|访问面向环境的(后置)摄像头，以及|484668|<input+type="file"+name="image"+accept="image/*"+capture="user">|484669|用于面向用户的(前置)摄像头。要访问视频，请将名称中的"image“替换为"+video”。|484670|在运行iOS+10.3.3的iPhone+5c上测试，固件为760，工作正常。|484671|https://www.w3.org/TR/html-media-capture/|offset|length|484672|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|15|8|@]|9|@$Q|16|R|17|1|18]]|A|$]]|$1|S|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|P]]]]

Just to update this, the standard now is:

<pre><code>&lt;input type="file" name="image" accept="image/*" capture="environment"&gt;
</code></pre>

to access the environment-facing (rear) camera, and 

<pre><code>&lt;input type="file" name="image" accept="image/*" capture="user"&gt;
</code></pre>

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.

<a href="https://www.w3.org/TR/html-media-capture/" rel="noreferrer">https://www.w3.org/TR/html-media-capture/</a>

blocks|key|700226|text|如今，至少对于android来说，这是相对容易的。只需使用普通的文件输入标签，当用户点击它时，手机将询问用户是否要使用摄像头(或文件管理器等)。要上传文件，请执行以下操作。只需用相机拍照，它就会自动添加并上传。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|700227|对iphone一无所知。也许有人可以在这方面有所启发。编辑:+Iphone的工作原理与此类似。|700228|输入标记的示例：|700229|<input+type="file"+accept="image/*"+capture="camera">|code-block|syntax|javascript|700230|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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. 

No idea about iphone. Maybe someone can enlighten on that.
EDIT: Iphone works similarly.

Sample of the input tag:

<pre><code>&lt;input type="file" accept="image/*" capture="camera"&gt;
</code></pre>

blocks|key|700366|text|iOS+6%2B和安卓2.2%2B上的Safari和Chrome支持HTML，允许你用设备的摄像头拍照或选择一个现有的摄像头：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|700367|<input+type="file"+accept="image/*">|offset|length|style|CODE|700368|下面是它在iOS+10上的工作原理：|700369|​|700370|📷|atomic|700371|700372|安卓3.0%2B和iOS10.3%2B上的Safari也支持capture属性，该属性用于直接跳转到摄像头。|700373|<input+type="file"+accept="image/*"+capture>|700374|capture="camera"+(字符串)和accept="image/*;capture=camera"+(参数)是旧规范的一部分，并被W3C候选推荐的capture+(布尔值)所取代。|700375|支持文档:此2013+O'Reilly+book和my+testing|700376|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d8a0f45981320a05aa1c9af9a2928e51.png|imageAlt|1|LINK|MUTABLE|url|https://books.google.com.au/books?id=gswdarRZVUoC&pg=PA263&dq=%2522file%2Bupload%2Bcompatibility%2Btable%2522|2|https://addpipe.com/blog/correct-syntax-html-media-capture/^0|0|0|10|0|0|0|0|1|0|0|0|Q|7|0|0|18|0|0|G|N|V|26|7|0|6|I|1|P|A|2|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1J|8|@]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|O|3|K|5|6|7|1N|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1O|8|@$D|1P|E|1Q|F|G]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1R|8|@$D|1S|E|1T|F|G]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1U|8|@$D|1V|E|1W|F|G]|$D|1X|E|1Y|F|G]|$D|1Z|E|20|F|G]]|9|@]|A|$]]|$1|V|3|W|5|6|7|21|8|@]|9|@$D|22|E|23|1|24]|$D|25|E|26|1|27]]|A|$]]|$1|X|3|-4|5|6|7|28|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14|15|-4]]|16|$5|17|11|18|A|$19|1A]]|1B|$5|17|11|18|A|$19|1C]]]]

Safari &amp; 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:

<code>&lt;input type="file" accept="image/*"&gt;</code>

Here's how it works on iOS 10:

<a href="https://i.stack.imgur.com/iRcky.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iRcky.png" alt="enter image description here"></a>

Android 3.0+ and Safari on iOS10.3+ also support the <code>capture</code> attribute which is used to jump straight to the camera.

<code>&lt;input type="file" accept="image/*" capture&gt;</code>

<code>capture="camera"</code> (String) and <code>accept="image/*;capture=camera"</code> (Parameter) were part of old specs and were replaced by <code>capture</code> (Boolean) the W3C Candidate Recommendation.

Support documentation: this <a href="https://books.google.com.au/books?id=gswdarRZVUoC&amp;pg=PA263&amp;dq=%22file+upload+compatibility+table%22" rel="noreferrer">2013 O'Reilly book</a> and <a href="https://addpipe.com/blog/correct-syntax-html-media-capture/" rel="noreferrer">my testing</a>

blocks|key|484362|text|好的，有一个新的HTML5特性用于访问本机设备摄像头- “getUserMedia”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484363|注意:+HTML5可以在安卓设备上处理网页上的照片捕捉(至少在最新版本上，由Honeycomb操作系统运行；但它不能在iPhones上处理，而是在iOS+6上)。|484364|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

well, there's a new HTML5 features for accessing the native device camera - "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 ).

blocks|key|484247|text|AppMobi+HTML5+SDK曾承诺从基于html5的应用程序访问原生设备功能，包括摄像头，但不再属于谷歌所有。相反，你可以试试HTML5-based+answers+in+this+post。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|484248|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9431475/html5-camera-access^0|1U|W|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

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 <a href="https://stackoverflow.com/questions/9431475/html5-camera-access">HTML5-based answers in this post</a>.

blocks|key|484449|text|您可以使用WEBRTC，但不幸的是，并不是所有的web浏览器都支持它。下面的链接显示了哪些浏览器支持它http://caniuse.com/stream|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|484450|这个链接让您了解如何访问它(示例代码)。http://www.html5rocks.com/en/tutorials/getusermedia/intro/|484451|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/stream|1|http://www.html5rocks.com/en/tutorials/getusermedia/intro/^0|1F|P|0|0|K|1M|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

You can use WEBRTC but unfortunately it is not supported by all web browsers. BELOW IS THE LINK TO SHOW WHICH BROWSERS supports it
<a href="http://caniuse.com/stream" rel="nofollow">http://caniuse.com/stream</a>

And this link gives you an idea of how you can access it(sample code).
<a href="http://www.html5rocks.com/en/tutorials/getusermedia/intro/" rel="nofollow">http://www.html5rocks.com/en/tutorials/getusermedia/intro/</a>

blocks|key|484749|text|您将需要使用getUserMedia来访问摄像机。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|484750|本教程概述了从浏览器访问设备摄像头的基础知识：https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf|484751|注意:这在大多数安卓设备上都有效，而且只适用于Safari中的iOS。|484752|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia|1|https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf^0|6|C|0|0|N|2B|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

You'll want to use <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" rel="nofollow noreferrer">getUserMedia</a> to access the camera.

This tutorial outlines the basics of accessing a device camera from the browser: <a href="https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf" rel="nofollow noreferrer">https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf</a> 

Note: This works on most Android devices, and in iOS in Safari only.

blocks|key|484736|text|应该注意的是，已经实现了安全功能，这些功能要求应用程序在本地主机下运行，或者通过SSL+for+GetUserMedia()工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484737|我在尝试几个可用的演示时发现了这一点，当它们不起作用时，我感到失望！请参阅：New+Security+Restrictions|offset|length|484738|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/34216154/1819403^0|0|12|P|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

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.

I discovered this when trying several of the demos available and was dissapointed when they didn't work! See: <a href="https://stackoverflow.com/a/34216154/1819403">New Security Restrictions</a>

blocks|key|699985|text|我不知道有什么方法可以在没有其他机制的情况下从web浏览器访问手机的摄像头(即Flash或某种类型的容器，允许访问硬件API)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|699986|对于后者，请查看PhoneGap：http://docs.phonegap.com/phonegap_camera_camera.md.html|offset|length|699987|有了这个，你应该至少可以在iOS和安卓设备上访问摄像头了。|699988|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.phonegap.com/phonegap_camera_camera.md.html^0|0|H|1J|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

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)

For the latter have a look at PhoneGap: <a href="http://docs.phonegap.com/phonegap_camera_camera.md.html" rel="nofollow">http://docs.phonegap.com/phonegap_camera_camera.md.html</a>

With this you should be able to access the camera at least on iOS and Android-based devices.

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?

How to access a mobile's camera from a web app?

PhoneGap

容器

HTML5

在我的手机web应用程序(不是本地应用程序)中，我想拍一张照片并上传，但我不想使用Adobe Flash。有没有办法做到这一点？

问如何从web应用程序访问手机的摄像头？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从web应用程序访问手机的摄像头？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从web应用程序访问手机的摄像头？
EN