BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

携帯電話のHtml5を達成するためにカメラのメソッドを呼び出すには

2022-01-13 23:51:31

入力呼び出しデバイスのビデオ、カメラなど...
/{br HTML5の公式ドキュメントに説明があります。capture 属性は、デバイスのカメラまたはマイクを呼び出すために使用されます。 {と説明されています。
accept="audio/ or video/"の場合、captureの値は2つだけです。1つはuser用で、顔向きカメラ（例えば、電話の前面カメラ）を呼び出し、もう1つはenvironment用で、環境カメラ（例えば、電話の背面カメラ）を呼び出すものです。
accept="audio "の場合、キャプチャがあるたびにデバイスのマイクが呼び出され、ユーザーと環境の値は無視されます。
ネット上で言及されているカメラやファイルシステムに関しては、公式には言及されていません。
公式のドキュメントです。 www.w3.org/TR/2018/REC-html-media-capture-20180201

HTML5仕様に最も準拠しているのはiOS、次いでX5カーネル、Androidのwebviewは基本的にキャプチャを無視する。
/{br ウェブビューは以下のように開発されるのが理想的です。

1. accept="image/"のとき、capture="user "はフロントカメラを、capture="other values "はバックカメラを呼び出します。
2. accept="video/"の場合、capture="user "はフロントカメラ、capture="other values "はポストカメラを呼び出します。
3. accept="image/,video/"の場合、capture="user "はフロントカメラ、capture="その他の値 ", リアカメラ、デフォルト写真、切り替え可能なビデオを呼び出します。
accept="audio/*"の場合、capture="空白または任意の値を入れる"、レコーダーを呼び出す。
5. 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('input');
        if (getIos()) {
            file.removeAttribute("capture"); // remove the "capture" attribute if it's an ios device
        }
        function getIos() {
            var ua=navigator.userAgent.toLowerCase();
            if (ua.match(/iPhone\sOS/i) == "iphone os") {
                return true;
            } else {
                return false;
            }
        }
</script>

今回は携帯電話側のカメラを呼び出すHtml5メソッドについて紹介しましたが、より関連するHtml5携帯電話呼び出しカメラコンテンツは、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後もよりスクリプトハウスを応援していただけると嬉しいです 

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します