How to call camera on mobile phone in HTML5?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to call camera on mobile phone in HTML5?

Guanhui

Jun 23, 2020 pm 06:07 PM

html5 Mobile terminal

How to call camera on mobile phone in HTML5?

input calls device recording
HTML5 official document explains: The capture attribute is used to call the device's camera or microphone.
When accept="audio/or video/", capture has only two values, one is user, used to call the camera facing the face (such as the front camera of the mobile phone), and the other is environment, used to call the environment Camera (such as the rear camera of a mobile phone).
When accept="audio", the device microphone is called as long as there is capture, ignoring the user and environment values.
As for the camera and filesystem mentioned online, they were not officially mentioned.
Official document: www.w3.org/TR/2018/REC-html-media-capture-20180201/

iOS complies most with HTML5 specifications, followed by the X5 kernel, and Android webview is basically ignored capture.
Ideally, webview should be developed as follows:

1. When accept="image/", capture="user" calls the front camera, capture="other value" calls the rear camera
2. When accept="video/", capture="user" calls the front video recorder, capture="other value", calls the rear video recorder
3. When accept="image/,video/" , capture="user" calls the front camera, capture="other value" calls the rear camera, default camera, can switch recording
4. When accept="audio/*", capture=”Empty or any value”, call the recorder
5. When the input does not have capture, the folder options and camera or recorder options are given according to the accppt type
6. Access the folder can be checked when the input contains multiple With multiple files, only a single file can be used to call the system camera or recorder
7. When there is no multiple, only a single file can be used

Determine the device type

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");
}

Copy after login

<!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(&#39;input&#39;);
        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>

Copy after login