HTML5에서 휴대폰으로 카메라를 호출하는 방법은 무엇입니까?-HTML 튜토리얼-php.cn

HTML5에서 휴대폰으로 카메라를 호출하는 방법은 무엇입니까?

Guanhui

풀어 주다： 2020-06-24 13:44:19

앞으로

4474명이 탐색했습니다.

HTML5에서 휴대폰으로 카메라를 호출하는 방법은 무엇입니까?

입력 통화 장치 녹음
HTML5 공식 문서 설명: 캡처 속성은 장치의 카메라 또는 마이크를 호출하는 데 사용됩니다.
accept="audio/or video/"인 경우 캡처에는 두 가지 값만 있습니다. 하나는 얼굴 지향 카메라(예: 휴대폰의 전면 카메라)를 호출하는 데 사용되는 사용자이고 다른 하나는 환경입니다. 환경 카메라(예: 휴대폰의 후면 카메라)를 호출하는 데 사용됩니다.
accept="audio"인 경우 캡처가 있는 한 장치 마이크가 호출되며 사용자 및 환경 값은 무시됩니다.
온라인에서 언급되는 카메라와 파일 시스템에 대해서는 공식적으로 언급되지 않습니다.
공식 문서: www.w3.org/TR/2018/REC-html-media-capture-20180201/

iOS는 HTML5 사양을 가장 많이 준수하고 X5 커널이 그 뒤를 따르며 Android 웹뷰는 기본적으로 캡처를 무시합니다.
이상적으로는 webview를 다음과 같이 개발해야 합니다.

1.accept="image/"일 때, Capture="user"는 전면 카메라를 호출하고, 캡처="다른 값"은 후면 카메라를 호출합니다.
2. "video/", 캡처="사용자"가 전면 비디오 녹화기를 호출하면, 캡처="다른 값"은 후면 비디오 녹화기를 호출합니다.
3 accept="image/,video/"일 때, 캡처="사용자"는 전면 카메라, 캡처="다른 값", 후면 카메라, 기본 카메라, 전환 가능video
을 호출합니다. accept="audio/*", 캡처="비어 있거나 임의의 값"인 경우 레코더를 호출합니다
5. 입력 캡처가 없는 경우 accppt 유형에 따라 폴더 옵션과 카메라 또는 레코더 옵션이 제공됩니다.
6. 입력에 여러 파일이 포함된 경우 시스템 카메라 또는 레코더에 액세스하기 위해 여러 파일을 확인할 수 있습니다. 단일 파일
7. 여러 개가 없으면 단일 파일로만 장치 유형을 결정할 수 있습니다

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(&#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>

로그인 후 복사