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实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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中如何调用用户自定义函数
2013/08/06 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python pytest进阶之fixture详解
2019/06/27 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python numpy库np.percentile用法说明
2020/06/08 Python
python urllib和urllib3知识点总结
2021/02/08 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
法律专业推荐信范文
2013/11/29 职场文书
运动会广播稿20字
2014/02/18 职场文书
教师节宣传方案
2014/05/23 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL