现在的h5功能越来越强大。之前做项目时上传功能input type=file时，在IOS下居然可以直接照相。。。但是在安卓上是不能。后面研究 了下，其实安卓下也可以的。

就是在input上加上capture属性。至于capture是属性是什么。查到是下图这样解释。

然后举个例子。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>html5直接调用手机相机照相/录像</title>

</head>

<body>

</body>

<div>

    <h3>使用设备的面向用户的相机拍摄照片</h3>

    <form>

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

        <input type="submit" value="照相上传">

    </form>

</div>

<div>

    <h3>使用面向环境的设备本地摄像机捕获视频：</h3>

    <form>

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

        <input type="submit" value="录像上传">

    </form>

</div>

</html>

个人手机测试 了下确实 没问题

html5直接调用手机相机照相/录像的更多相关文章

  1. html5调用手机相机并压缩、上传

    近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差 ...

  2. HTML5调用手机相机拍照

    前端调用手机相机拍照 实现方式常见有两种: 一种是通过video控件,通过捕获video的流,截取video中的图像实现拍照, 还有一种是通过input[file]控件调用移动端的摄像头,实现拍照. ...

  3. android 7.0以上共享文件（解决调用系统照相和图片剪切出现的FileUriExposedException崩溃问题）

    在android7.0开始试共享“file://”URI 将会导致引发 FileUriExposedException. 如果应用需要与其他应用共享私有文件,则应该使用 FileProvider, F ...

  4. 关于html5调用手机相机（原创）

    很久没写随笔了 从ios6开始,webview支持html <input type="file">标签,用来调取手机的相册和相机,但是没有权限提示,不知道是不是我写的有 ...

  5. 亲测可用）html5 file调用手机摄像头

    在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  6. HTML5拨号 调用手机拨号功能

    <a href="tel:123456789">拨号</a> 这个就是HTML5 运行在手机浏览器上的可以调用手机的拨号tel就是你想要拨打的电话号码

  7. html5页面调用手机打电话功能

    <head>里面加上:<meta name="format-detection" content="telephone=yes"/> 需 ...

  8. HTML5 页面调用微信接口

    参考微信微信官方文档JS_SDK:https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.B ...

  9. java input 实现调用手机相机和本地照片上传图片到服务器然后压缩

    在微信公众号里面需要上传头像,时间比较紧,调用学习jssdk并使用 来不及  就用了input 使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说 ...

随机推荐

  1. python nose测试框架全面介绍十三 ---怎么写nose插件

    之前有一篇文章介绍了自己写的插件 nose进度插件,但最近有朋友问我,看着nose的官方文档写的插件没用,下面再详细介绍一下 一.准备 1.新建一个文件夹,随便文件夹的名字,假设文件夹放在f://aa ...

  2. Anaconda3（1）Windows10下安装Anaconda3(64位)详细过程

    https://blog.csdn.net/ychgyyn/article/details/82119201 前言Anaconda指的是一个开源的Python发行版本,其包含了conda.Python ...

  3. Ansible常用模块整理

    问答题 请总结今天所学的ansible模块,以及各个模块的作用! ping ping模块用来检查目标主机是否在线 例子:ansible webserver -m ping yum yum模块用来在Ce ...

  4. 关于Exgcd

    %%lkx 学习博客 exgcd(扩展欧几里得) 可以用来判断并求解形如\(ax+by=c\)的方程,当且仅当\(gcd(a,b)|c\)时,存在整数解\(x,y\) 也就是说,\(exgcd\)可以 ...

  5. 【JZOJ5738】【20190706】锁屏杀

    题目 $n \le 2000 $ 题解 \(B\)的数字可以对1440取模,对三个图分别进行\(dp\)即可 时间复杂度\(O(n\times 1440 \times 10)\) Code #incl ...

  6. VueCli3新特性

    升级VueCli3的理由: 1.构建速度大大加快,之前看到一个升级的例子是2的3倍速度,具体可以在自己迁移一个项 目测试下,这里的优化有默认开启了多核构建.缓存 并行和缓存 2.webpack被内置到 ...

  7. TCP/IP协议族体系结构：死也不能忘记的四个层

    1.死也不能忘记的四个层 ①数据链路层实现了网卡接口的网络驱动程序,以处理数据在物理媒介(比如以太网.令牌环等)上的传输.主要的协议ARP和RARP经过数据链路层封装的数据成为帧,有以太网帧.令牌环帧 ...

  8. 记忆的轮廓 期望 四边形不等式dp|题解

    记忆的轮廓 题目描述 通往贤者之塔的路上,有许多的危机.我们可以把这个地形看做是一颗树,根节点编号为1,目标节点编号为n,其中1-n的简单路径上,编号依次递增,在[1,n]中,一共有n个节点.我们把编 ...

  9. Unity开发：5.0+版本标准资源包无内置问题

    一.问题如下: 在Unity中,一般都会内置有基础的资源包,可以在Assets->Import Package中,点击其下的子项进行导入: 但是我发现,5.0版本与之前的4.x版本相比,安装包变 ...

  10. PR代码提交规范

    1.在提交pull request之前,先要把 master上面的合并到 这个分支上面,看看是不是有冲突,然后在提交pr