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实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
详解CSS玩转图片Base64编码
May 25 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
Phpbean路由转发的php代码
2008/01/10 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
js实现验证码功能
2020/07/24 Javascript
pandas 数据实现行间计算的方法
2018/06/08 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
Java模拟试题
2014/11/10 面试题
总经理的岗位职责
2014/02/23 职场文书
行政副总岗位职责
2014/02/23 职场文书
小学作文评语大全
2014/04/21 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
儿园租房协议书范本
2014/12/02 职场文书
投资合作意向书范本
2015/05/08 职场文书
股东协议书范本2016
2016/03/21 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby
Android存储中最基本的文件存储方式
2022/04/30 Java/Android