HTML5 で携帯電話のカメラを呼び出すにはどうすればよいですか?-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5 で携帯電話のカメラを呼び出すにはどうすればよいですか?

Guanhui

Jun 23, 2020 pm 06:07 PM

html5 携帯端末

HTML5 で携帯電話のカメラを呼び出すにはどうすればよいですか?

input はデバイスの記録を呼び出します
HTML5 公式ドキュメントでは、次のように説明されています。capture 属性は、デバイスのカメラまたはマイクを呼び出すために使用されます。
accept="audio/or video/" の場合、capture には 2 つの値しかありません。1 つは顔に面したカメラ (携帯電話の前面カメラなど) を呼び出すために使用されるユーザー、もう 1 つは環境です。環境カメラ (携帯電話の背面カメラなど) を呼び出すために使用されます。
accept="audio" の場合、キャプチャがある限りデバイスのマイクが呼び出され、ユーザーと環境の値は無視されます。
オンラインで言及されているカメラとファイルシステムについては、正式には言及されていませんでした。
公式ドキュメント: www.w3.org/TR/2018/REC-html-media-capture-20180201/

iOS は HTML5 仕様に最も準拠しており、次に X5 カーネルに準拠しており、Android WebView は基本的にキャプチャを無視しました。
理想的には、WebView は次のように開発する必要があります:

1. accept="image/" の場合、capture="user" は前面カメラを呼び出し、capture="other value" は背面カメラを呼び出します
2. accept="video/" の場合、capture="user" はフロントビデオレコーダーを呼び出し、capture="other value" はリアビデオレコーダーを呼び出します。
3. accept="image/,video/" の場合、 Capture="user" は前面カメラを呼び出し、capture="other value" は背面カメラ (デフォルトのカメラ) を呼び出します。recording
4 を切り替えることができます。 accept="audio/*" の場合、capture=”空または任意の値」の場合、レコーダーを呼び出します。
5. 入力にキャプチャがない場合、フォルダーオプションとカメラまたはレコーダーのオプションは、acccppt タイプに従って与えられます##6. フォルダーへのアクセスは、入力に複数のファイルが含まれています複数のファイルがある場合、システムのカメラまたはレコーダーを呼び出すために使用できるのは 1 つのファイルのみです
7。複数のファイルがない場合、使用できるのは 1 つのファイルのみです

デバイスの種類

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>

ログイン後にコピー

推奨チュートリアル: "

HTMLTutorial"

以上がHTML5 で携帯電話のカメラを呼び出すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。