HTML5页面如何在手机端浏览器调用相机、相册功能

原创 2017年09月28日 16:57:49

        最近在做一个公司的保险信息处理系统项目,开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file"/>标签,iOS直接就支持吊起相机拍照或是相册选择,但android中不支持吊起相机拍照,只能吊起相册选择,网上的帖子说是因为android屏蔽了文件上传功能还是怎么的,没看明白。此篇博文记录如何解决这一问题,使得android也可以直接吊起相机拍照。

        在查资料的之后,总结了一下用input调用相机和相册功能的方法,之前没有深入了解过,现在整理一下:

        不需要特殊环境,使用input标签 type值为file,可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML5页面如何在手机端浏览器调用相机、相册功能</title>
    </head>
    <body>
    
    <div>
        <input type="file" accept="image/*" capture="camera">
        <input type="file" accept="video/*" capture="camcorder">
        <input type="file" accept="audio/*" capture="microphone">
    </div>
    
    </body>
    </html>

accept表示打开的系统文件目录;
capture表示的是系统所捕获的默认设备,camera:照相机;camcorder:摄像机;microphone:录音。

        如果不加上capture,则只会显示相应的,例如上述三种依次是:拍照或图库,录像或图库,录像或拍照或图库,加上capture之后不会调用图库。

        其中还有一个属性multiple,支持多选,当支持多选时,multiple优先级高于capture,所以只用写成:<input type="file" accept="image/*" multiple>就可以,可以在手机上测试一下。

版权声明:转载时请标注http://blog.csdn.net/zhihua_w

HTML5调用手机摄像机、相册功能 <input>方法

最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了...
  • taohai123
  • taohai123
  • 2016年11月23日 11:43
  • 21508

H5移动端调用相机/相册

使用html5自带的 input ,纯html5,并且不涉及到js ,可以实现移动端调用手机摄像头。...
  • github_38516987
  • github_38516987
  • 2017年09月15日 09:55
  • 2792

Html调用系统相册库

H5页面调用系统相册库,需要设置 下面是一个测试html文件:                         camera                 ...
  • pjk1129
  • pjk1129
  • 2015年08月18日 13:10
  • 4660

关于 HTML5 调用用户的 照相机、相册 初步整理

我能找到的是 UC 插件平台(http://plus.uc.cn/document/plugin/doc1.html),当前只支持调用照相机,尚不支持调用相册。如文档截图(http://plus.uc...
  • zhangxin09
  • zhangxin09
  • 2014年07月28日 09:48
  • 46068

HTML5+JS调用手机摄像头本地相册

  • 2015年05月11日 16:46
  • 4.67MB
  • 下载

HTML5调用本地相机服务(实现代码)

Document                         photo                       var video = docume...
  • jiangbo_phd
  • jiangbo_phd
  • 2015年09月10日 13:14
  • 1475

Web调用安卓,苹果手机摄像头,本地图片和文件

由于要给一个客户做一个记账WAP,里面有调用手机拍照功能,这里记录一下,以供需要的朋友,下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,我测...
  • jwzhangjie
  • jwzhangjie
  • 2014年10月23日 09:40
  • 62334

手机的web页面调用相机拍照上传

想在手机里的web页面里上传照片,又希望能调用摄像头拍完了再上传。 看这代码,重要的是capture="camera" accept="image/*"。 结束。...
  • HOOLOO
  • HOOLOO
  • 2015年07月29日 03:58
  • 11490

使用HTML5+调用手机摄像头和相册

主要介绍了采用HTML5plus(HTML5+)的方式调用手机摄像头并拍照,将具体的代码和一些注意事项进行了讲解,并对不同的开发环境使用简单进行了介绍。...
  • u013185616
  • u013185616
  • 2016年11月17日 11:12
  • 35578

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(一)

首先在前端把图片进行压缩,然后转换成为Base64的编码,再把Base64的编码使用AJAX来POST到服务器,然后在Java或者PHP后台进行Base64解码,解出来的路径即为上传图片的路径地址,然...
  • hu1991die
  • hu1991die
  • 2014年10月29日 15:02
  • 58148
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5页面如何在手机端浏览器调用相机、相册功能
举报原因:
原因补充:

(最多只允许输入30个字)