如何从Web应用程序访问手机的相机?

在我的手机应用程序(非本地应用程序)中,我想拍照并上传,但我不想使用Adobe Flash。 有没有办法做到这一点?

在iPhone iOS6和Android ICS之后,HTML5具有以下标签,可让您从设备上拍照:

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

Capture可以采取相机,摄像机和audio的价值。

我认为这个标签绝对不会在iOS5中工作,不确定。

现在,至less在android中是相对容易的。 只需使用正常的文件input标签,当用户点击它时,手机会询问用户是否想用摄像头(或文件pipe理器等)上传文件。 只要用相机拍照,它就会自动添加和上传。

不知道iPhone。 也许有人可以启发这一点。 编辑:iPhone的工作原理类似。

input标签的示例:

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

iOS 6及以上版本的Safari和Chrome浏览器支持HTML媒体捕捉,可让您使用设备的相机拍摄照片或select现有的照片:

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

以下是iOS 10的工作原理:

在这里输入图像描述

Android 3.0+和iOS10.3 +上的Safari也支持用于直接跳转到摄像头的capture属性。

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

capture="camera" (String)和accept="image/*;capture=camera" (Parameter)是旧规格的一部分,被replace为capture (Boolean)W3C Candidate Recommendation。

支持文档: 2013年O'Reilly书和我的testing

好吧,有一个新的HTML5function用于访问本机设备相机 – “getUserMedia API”

注意:HTML5可以处理来自Android设备上的网页的照片(至less在Honeycomb操作系统上运行的最新版本,但不能在iPhone上处理,但iOS 6)。

您可以使用WEBRTC,但不幸的是,它不被所有的网页浏览器支持。 下面是链接显示浏览器支持http://caniuse.com/stream

这个链接给你一个你如何访问它的想法(示例代码)。 http://www.html5rocks.com/en/tutorials/getusermedia/intro/

AppMobi HTML5 SDK曾经承诺从基于HTML5的应用程序访问本机设备function(包括相机),但不再是Google拥有的。 相反,请尝试在这篇文章中的基于HTML5的答案 。

我不认为你可以 – 有一个W3C草案的API来获取audio或video,但没有任何主要的移动操作系统的实施。

第二好的唯一的select是与丹尼斯的build议使用PhoneGap。 这意味着你需要创build一个本地应用程序,并将其添加到移动应用程序商店/市场。

只是为了更新这个,现在的标准是:

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

访问前置摄像头,和

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

面向用户的相机。 要访问video,请将名称中的“图像”replace为“video”。

testingiPhone 5c,运行iOS 10.3.3,固件760,工作正常。

https://www.w3.org/TR/html-media-capture/

我不知道有什么方法可以通过networking浏览器访问手机的相机,而无需额外的机制(例如Flash或允许访问硬件API的某种types的容器)

对于后者看看PhoneGap: http : //docs.phonegap.com/phonegap_camera_camera.md.html

有了这个,你应该至less可以在基于iOS和Android的设备上访问摄像头。