现在的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. 学习：CC断点

    断点介绍: shark恒老师说有四种说法,但是其实都是相同的 第一个读法:普通断点 第二个读法:F2断点 第三个读法:INT3断点( int3其实就是汇编指令 ) 第四个读法:CC断点 (CC其实就是 ...

  2. mybatis学习3

    parameterType(输入类型) 传递简单类型::使用#{}占位符,或者${}进行sql拼接 传递pojo对象: Mybatis使用ognl表达式解析对象字段的值,#{}或者${}括号中的值为p ...

  3. xshell跳转设置 Xshell代理设置

    本机------->A(中转)------>B(目标服务器) 本机---------XXXXX------>B(目标服务器) 本机无法直接连接B服务器 第一步:本机连接中转服务器A, ...

  4. Layui 隐藏左侧菜单

    简单实现 //隐藏菜单 var bl = $("#LAY_app_flexible").hasClass("layui-icon-shrink-right"); ...

  5. Promise以及async和await的用法

    Promise是一个异步加载的方式,处理时使用new Promise返回一个对象,该对象可以调用then方法,then方法中有两个参数,第一个参数是加载成功时执行,第二个参数是加载失败时执行,then ...

  6. nginx 配置参数优化

    nginx作为高性能web服务器,即使不特意调整配置参数也可以处理大量的并发请求.以下的配置参数是借鉴网上的一些调优参数,仅作为参考,不见得适于你的线上业务. worker进程 worker_proc ...

  7. 剑指offer：机器人的运动范围（回溯法DFS）

    题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能 ...

  8. 【caffe编译】 fatal error: hdf5.h: 没有那个文件或目录

    src/caffe/layers/hdf5_output_layer.cpp:3:18: fatal error: hdf5.h: 没有那个文件或目录 查找文件 locate hdf5.h 修改Mak ...

  9. bat 文件追加

    @echo off set str1=disable_modules:set str2= - mine echo %str1% >> c:\minionecho %str2% >&g ...

  10. 第十五节：Asp.Net Core中的各种过滤器(授权、资源、操作、结果、异常)

    一. 简介 1. 说明 提到过滤器,通常是指请求处理管道中特定阶段之前或之后的代码,可以处理:授权.响应缓存(对请求管道进行短路,以便返回缓存的响应). 防盗链.本地化国际化等,过滤器用于横向处理业务 ...