全国服务热线:4008-888-888

技术知识

Html5在手机上端启用照相机的方式完成

input启用机器设备录相,照相机等…
HTML5官方文本文档解释:capture特性用于启用机器设备的摄像头或话筒。
当accept=”audio/或video/”时capture仅有两种值,1种是user,用于启用朝向人脸的摄像头(比如手机上外置摄像头),1种是environment,用于启用自然环境摄像头(比如手机上后置摄像头)。
当accept=”audio”时,要是有capture就启用机器设备话筒,忽视user和environment值。
至于在网上提到的camera和filesystem,官方没提。
官方文本文档:www.w3.org/TR/2018/REC-html-media-capture⑵0180201/

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⑻">
    <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手机上端启用照相机內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家! 



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服