Html5在手机端调用相机的方法实现


Posted in HTML / CSS onMay 13, 2020

input调用设备录像,相机等…
HTML5官方文档解释:capture属性用于调用设备的摄像头或麦克风。
当accept=”audio/或video/”时capture只有两种值,一种是user,用于调用面向人脸的摄像头(例如手机前置摄像头),一种是environment,用于调用环境摄像头(例如手机后置摄像头)。
当accept=”audio”时,只要有capture就调用设备麦克风,忽略user和environment值。
至于网上提到的camera和filesystem,官方没提。
官方文档:www.w3.org/TR/2018/REC-html-media-capture-20180201/

iOS最遵守遵守HTML5规范,其次是X5内核,安卓的webview基本忽略了capture。
理想情况下应该按照如下开发webview:

1.当accept=”image/”时,capture=”user”调用前置照相机,capture=”其他值”,调用后置照相机
2. 当accept=”video/”时,capture=”user”调用前置录像机,capture=”其他值”,调用后置录像机
3. 当accept=”image/,video/”,capture=”user”调用前置摄像头,capture=”其他值”,调用后置摄像头,默认照相,可切换录像
4. 当accept=”audio/*”时,capture=”放空或者任意值”,调用录音机
5. 当input没有capture时,根据accppt类型给出文件夹选项以及摄像头或者录音机选项
6. input含有multiple时访问文件夹可勾选多文件,调用系统摄像头或者录音机都只是单文件
7. 无multiple时都只能单文件

判断设备类型

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/android/i)) == "android") {
 alert("android");
}
if(ua.match(/iPhone/i)) == "iPhone") {
 alert("iPhone");
}
if(ua.match(/iPad/i)) == "iPad") {
 alert("iPad");
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" accept="image/*" capture="camera">  
    <input type="file" accept="video/*" capture="camcorder">  
    <input type="file" accept="audio/*" capture="microphone">  
</body>
</html>
<script>
    var file = document.querySelector('input');
        if (getIos()) {
            file.removeAttribute("capture"); //如果是ios设备就删除"capture"属性
        }
        function getIos() {
            var ua=navigator.userAgent.toLowerCase();
            if (ua.match(/iPhone\sOS/i) == "iphone os") {
                return true;
            } else {
                return false;
            }
        }
</script>

到此这篇关于Html5在手机端调用相机的方法实现的文章就介绍到这了,更多相关Html5手机端调用相机内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

HTML / CSS 相关文章推荐
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 #HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 #HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 #HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 #HTML / CSS
HTML5 body设置自适应全屏
May 07 #HTML / CSS
iframe与window.onload如何使用详解
May 07 #HTML / CSS
HTML5录音实践总结(Preact)
May 07 #HTML / CSS
You might like
php使用base64加密解密图片示例分享
2014/01/20 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
JS实现放烟花效果
2020/03/10 Javascript
Python实现配置文件备份的方法
2015/07/30 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
python 19个值得学习的编程技巧
2020/08/15 Python
python中xlutils库用法浅析
2020/12/29 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
最新党员思想汇报
2014/01/01 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript