如何通过网络应用访问手机的相机?


190

我想在手机的网络应用程序(不是本机应用程序)中拍照并上传照片,但是我不想使用Adobe Flash。有什么办法吗?


2
“网页”是指,它应该能够轻松地从任何类型的客户端/设备进行访问。所以,我应该设置限制吗?
夏期剧场

1
我想,您想访问硬件摄像机,对吗?
丹尼斯·特劳布

嗯。来自网页的智能手机等的“相机”。
夏期剧场

嗨,这是我目前正在为自己的项目学习的主题。通过PWA,您可以在现代浏览器中使用本机设备功能:developers.google.com/web/updates/2016/12/imagecapture
palmaone

Answers:


260

在iPhone iOS6和更高版本的Android ICS中,HTML5具有以下标签,该标签可让您从设备上拍照:

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

Capture 可以采用相机,便携式摄像机和音频之类的值。

我认为这个标签绝对不能在iOS5中使用,对此不确定。



2
此处不需要GetUserMedia。
Ray Nicholus 2013年

我收到“此设备不支持的getUserMedia()”-但是我正在使用Safari并安装了ios7-为什么?– Dan刚编辑
Dan

10
我认为也许应该<input type="file" accept="image/*;capture=camera">改为使用代码。根据MDN,元素没有capture属性input
肯尼·埃维特

9
两者capture="camera"(字符串)和较早的accept="image/*;capture=camera"被替换在2012年capture="capture"(布尔)。该属性用于强制捕获,而不是从库中选择。请参阅规范HTML媒体捕获的正确语法
Octavian Naicu

36

如今,至少使用android相对容易。只需使用普通文件输入标签,当用户单击它时,电话就会询问用户是否要使用相机(或文件管理器等)上传文件。只需使用相机拍摄照片,它就会自动添加和上传。

不知道有关iphone的信息。也许有人可以对此有所启发。编辑:Iphone工作类似。

输入标签的示例:

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

您可以对多个文件执行以下操作吗:Multiple =“ multiple”
parseguy 16'Apr

示例:<input type =“ file” accept =“ image / *” multiple =“ multiple” capture =“ camera”>
parseguy

multiple在Android和iOS上均可使用,请参见HTML媒体捕获的正确语法
Octavian Naicu

不确定对于其他Apple设备,至少此解决方案现在也可以在iPad上使用。
cytsunny

29

仅更新一下,现在的标准是:

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

访问面向环境的(后置)摄像头,以及

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

用于面向用户的(前置)相机。要访问视频,请在名称中将“视频”替换为“图像”。

在运行iOS 10.3.3,固件760的iPhone 5c上进行了测试,可以正常工作。

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


23

iOS 6+和Android 2.2+上的Safari和Chrome支持HTML Media Capture,可让您使用设备的相机拍照或选择现有的相机:

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

这是在iOS 10上的工作方式:

在此处输入图片说明

Android3.0 +和iOS10.3 +上的Safari也支持capture用于直接跳转到相机的属性。

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

capture="camera"(String)和accept="image/*;capture=camera"(Parameter)是旧规范的一部分,并由captureW3C候选推荐标准(Boolean)取代。

支持文档:这本2013 O'Reilly书籍我的测试


Android上的Mine会直接跳至“选择照片”,但即使我设置了capture =“ camera” .... totally完全卡住,也没有给我提供Camera的选项
Benyaman

@Benyaman尝试使用capture而不是capture="camera"。好奇什么设备和Android版本。
Octavian Naicu

我确实做到了,在Android 5.0上,Phonegap显然没有内置HTML捕获功能。因此它无法捕获东西,没有camrecord,没有音频,没有Camera。我不得不做个工作。
Benyaman

5

好了,有一个用于访问本机设备摄像头的新HTML5功能-“ getUserMedia API”

注意:HTML5可以在Android设备上处理网页上的照片捕获(至少在由Honeycomb OS运行的最新版本上;但是在iOS 6上不能在iPhone上处理)。


哦,抱歉,调用setUserMedia API
路易(Louis)




1

应该注意的是,已经实现了安全功能,这些安全功能要求要么在本地主机下本地运行应用程序,要么通过SSL运行GetUserMedia()。

我在尝试一些可用的演示时发现了这一点,但是当它们无法正常工作时,我感到失望!请参阅:新的安全限制


0

我认为您不能-有一个W3C草案API可以获取音频或视频,但是在任何主要的移动OS上都没有实现。

次优唯一的选择是接受丹尼斯的建议使用PhoneGap。这意味着您需要创建一个本机应用程序并将其添加到移动应用程序商店/市场中。


抱歉,我希望重新发布-我一直在寻找是否在Android上使用jersey客户端解决了NPE异常问题。卡住:(
necromancer

0

没有任何其他机制(例如Flash或允许访问硬件API的某种类型的容器),我不知道从Web浏览器访问手机相机的任何方法

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

这样,您至少应该能够在基于iOS和Android的设备上访问相机。


4
这仍然需要在移动设备上安装一个应用程序,这是我认为OP希望避免的事情。
Michael Petrotta 2011年

@MichaelPetrotta你知道更好的方法吗?
丹尼斯·特劳布

2
我不认为OP要求什么是可能的。
Michael Petrotta 2011年

@MichaelPetrotta这也是我的想法。我能想到的最好的方法是PhoneGap,因为它可在iOS上运行(Flash无法运行)。它仍然是本机的,真实的,但是至少允许从网页跨一点访问照相机。
丹尼斯·特劳布
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.