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 相关文章推荐
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
amaze ui 的使用详细教程
Aug 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中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
python写xml文件的操作实例
2014/10/05 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python实现的knn算法示例
2018/06/14 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python的等深分箱实例
2019/11/22 Python
python中uuid模块实例浅析
2020/12/29 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
酒店个人培训自我鉴定
2013/12/11 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
银行先进个人总结
2015/02/15 职场文书
思想道德自我评价2015
2015/03/09 职场文书
思想品德课教学反思
2016/02/24 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
如何利用golang运用mysql数据库
2022/03/13 Golang
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
Python 图片添加美颜效果
2022/04/28 Python