在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 input file=""  ,纯html5,并且不涉及到js ,就可以实现。代码如下:

(亲测可用)html5调用手机摄像头

html 代码效果预览

123
    <input type="file" accept="image/*" capture="camera">
    <input type="file" accept="video/*" capture="camcorder">
    <input type="file" accept="audio/*" capture="microphone">

capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。
accept表示,直接打开系统文件目录。

其实html5的input:file标签还支持一个multiple属性,表示可以支持多选,如:

html 代码效果预览

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

加上这个multiple后,capture就没啥用了,因为multiple是专门yong用来支持多选的。

内容切图社区(qietu.cn) 首发,注明来源可转载。

http://www.qdfuns.com/notes/26716/2d4fea81a990f8532ce7fa43af286add.html

限制只能选择图片

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

限制只能选择视频

  1. <input type="file" accept="video/*">

限制只能选择音频

  1. <input type="file" accept="audio/*">

直接打开摄像头拍照

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

直接打开摄像头录像

  1. <input type="file" accept="video/*" capture="camera">

亲测可用)html5 file调用手机摄像头的更多相关文章

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

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  2. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  3. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  4. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. mybatis自动生成代码插件mybatis-generator使用流程(亲测可用)

    mybatis-generator是一款在使用mybatis框架时,自动生成model,dao和mapper的工具,很大程度上减少了业务开发人员的手动编码时间 坐着在idea上用maven构建spri ...

  6. 阿里云服务器centos7,docker部署mysql+Redis+vue+springboot+Nginx+fastdfs,亲测可用

    一.购买云服务器 我是今年双十一期间在阿里云购买的服务器, 简单配置2核_4G_40G_3M,三年用了不到800块,不过当时我记得腾讯云更便宜,个人感觉,阿里的云服务器更加的稳定, 毕竟身经百战, 经 ...

  7. 亲测可用!!!golang如何在idea中保存时自动进行代码格式化

    亲测可用,golang在idea中的代码自动格式化 1.ctrl+alt+s打开设置界面,选择[Plugins] -> [Install JetBrains plugin...] -> 搜 ...

  8. jetbrains的JetBrains PyCharm 2018.3.1破解激活到2100年(最新亲测可用)

    破解补丁激活 之前看了好多的其它的方法感觉都不是很靠谱还是这个本人亲试可以长期有效不仅能激活pycharm.jetbrains的JetBrains PyCharm 2018.3.1破解激活到2100年 ...

  9. CSS响应式:根据分辨率加载不同CSS的几个方法,亲测可用

    有时候你需要把同一个页面在手机和pc同时打开,其中有一个办法就是判断不同分辨路加载不同的css 小编总结了几种分别加载css的方法: 1.比较复杂的使用js判断加载不同css (亲测可用) 但是这种方 ...

随机推荐

  1. bzoj 1511: [POI2006]OKR-Periods of Words【kmp】

    n-ne[n]是n的最长循环节长度,其实就是n-最短前缀=后缀长度 然后我们要求最短循环节,其实就是ne一直往前跳,跳到不能跳为止,这时的n-ne[n]就是n的最短循环节长度 #include< ...

  2. 洛谷 P2763 试题库问题【最大流】

    s向所有类别属性连流量为当前类别属性需要的个数的边,所有题目向t连流量为1的边(表示只能选一次),所有属性向含有它的题连容量为1的边.跑一变dinic,结果小于m则无解,否则看每一个类别属性连出去的题 ...

  3. 深入学习Ajax

    1.什么是Ajax? AJAX的全称是Asynchronous Javascript And XML (异步的JavaScript和XML).是一种在无需重新加载整个网页的情况下,能够更新部分网页的技 ...

  4. Element-wise operations

    Element-wise operations An element-wise operation operates on corresponding elements between tensors ...

  5. CF767C Garland 【树形dp】By cellur925

    一句话题意:给定一个树,树有点权,要求把树的某些边删去,使树变成三个部分,每部分点权值和相等. 我们很容易想到,再读入的时候记录所有点的点权之和,点权除以3是最后权值相等的值.如果不能整除3一定无解, ...

  6. pytest单侧模块_入门汇总

    Pytest简单介绍 (pytest是python的一个测试框架,主要是用来进行一些小的测试) 安装:pip install -U pytest 查看是否安装成功:pytest --version 运 ...

  7. Unix\Linux | 总结笔记 | man帮助

    0.目录 手册页分类说明 man手册中的段落说明     1.  man手册页分类 man1  普通用户可以执行的命令帮助 man2  系统调用.内核函数的说明帮助 man3   库函数说明帮助 ma ...

  8. 51nod 1126 求递推序列的第N项

    1126 求递推序列的第N项  基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 有一个序列是这样定义的:f(1) = 1, f(2) = 1, f( ...

  9. 找规律 Codeforces Round #309 (Div. 2) A. Kyoya and Photobooks

    题目传送门 /* 找规律,水 */ #include <cstdio> #include <iostream> #include <algorithm> #incl ...

  10. 题解报告:hdu 1212 Big Number(大数取模+同余定理)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1212 Problem Description As we know, Big Number is al ...