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轻松实现圆角效果
Nov 09 HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
PHP处理会话函数大总结
2015/08/05 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python socket实现简单聊天室
2018/04/01 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Django model update的多种用法介绍
2020/03/28 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
武汉瑞得软件笔试题
2015/10/27 面试题
如何开启linux的ssh服务
2013/06/03 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
大门门卫岗位职责
2013/11/30 职场文书
超级搞笑检讨书
2014/01/15 职场文书
捐助倡议书范文
2014/04/15 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书