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>
推荐教程:《HTML教程》
原文地址:https://www.jb51.cc/html/1207256.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。