HTML5怎样在手机端调取相机?
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教程》
以上就是HTML5怎样在手机端调取相机?的具体内容,更多请关注百分百源码网其它相关文章!