写真を撮るためにHTML5のコール携帯電話のカメラ

、getUserMedia APIの紹介

getUserMedia APIは、ハードウェアデバイスの媒体へのアクセス権を持つユーザ（等カメラ、ビデオ、オーディオ、地理的位置、）インタフェースを提供し、このインターフェイスに基づいて、開発者は、任意のブラウザのプラグインの条件に依存することなく、ハードウェア・メディア・デバイスにアクセスすることができます。

getUserMedia APIはもともとnavigator.getUserMediaは、今変更、最新のWeb標準を廃止された）（navigator.mediaDevices.getUserMediaを、しかし、ブラウザのサポートは、人気の古いバージョンのAPIよりも悪いです。

MediaDevices.getUserMedia（）メソッドは、カメラや画面共有及び/又はマイクロホンとして、ビデオ及び/又はオーディオ入力デバイスを使用するようにユーザに促すことができます。ユーザが権限を与えられた場合、ユーザは許可を拒否していない、またはこの約束としてPermissionDeniedError又はNotFoundError利用可能な媒体ならば、コールバックパラメータが、それは、対応する、解決された[成功]の状態にこの約束オブジェクトとしてプロミスオブジェクト、MediaStreamのオブジェクトを返します拒否された[失敗]コールバックパラメータのステータスの。ユーザーが選択を許可または拒否するために行うことが必要とされないので、ことに注意してください、そう約束は、オブジェクトがどちらも決意もトリガが拒否引き起こす可能性が戻りました。

公式のAPIを参照してください。https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

モバイル版のサポート：

第二に、ページコード

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>拍照</ タイトル> 
</ ヘッド> 
< 身体> 
< 動画ID = "ビデオ" 幅= "640 " 高さ=" 480" 自動再生= "自動再生" > </ ビデオ> 
<！ - 拍照按钮- > 
<
    = "キャプチャ" >拍照</ ボタン> 
</ divの> 
<！ - 描绘ビデオ截图- > 
< キャンバスのID = "キャンバス" 幅= "640" 高さ= "480" > </ キャンバス> 
< スクリプト> 
    みましょうビデオ= のdocument.getElementById（" ビデオ" ）; 
    聞かせてキャンバス= のdocument.getElementById（" キャンバス" ）; 
    コンテキストましょう= キャンバスを。）; 

    // 古いブラウザではmediaDevicesを実現していない可能性がありますので、我々は最初のヌルオブジェクトを設定することができます
    IF （navigator.mediaDevicesは=== 未定義）{ 
        navigator.mediaDevices = {}; 
    } 

    // 一部のブラウザでは、部分的にmediaDevicesをサポート。私たちは、getUserMediaセットの直接のターゲットを与えることはできません
    。// これは、既存のプロパティを上書きする可能性があるため。何getUserMediaプロパティが存在しない場合にここで我々はそれを追加します。
    IF （navigator.mediaDevices.getUserMedia === 未定義）{ 
        navigator.mediaDevices.getUserMedia =  関数（制約）{ 

            // まず、そこgetUserMediaは、次に、それが得られた場合
            VARをgetUserMedia = navigator.webkitGetUserMedia ||navigator.mozGetUserMedia; 

            // 一部のブラウザでは、それを理解していない-それは、統一されたインタフェースを維持するために約束拒否するようにエラーを返す
            のIF （！getUserMedia）{
                 返すPromise.reject（新しい新しいエラー（「ザ・この中でIS実装されていませんgetUserMediaをブラウザ' ））; 
            } 

            // そうでない場合は、古いnavigator.getUserMedia方法プロミスのパッケージが
            戻り 、新しい新しいプロミス（関数（解決、拒否）{ 
                ; getUserMedia.call（ナビゲーター、制約解決、拒否）を
            }）; 
        } 
    } 

    / / フロントカメラ、リアカメラは、以下の設定を適用デフォルト
    @動画の制約= {みましょう：{facingMode：{実寸： "環境"}}}; 
    letの制約= {ビデオ：trueに}; 
    navigator.mediaDevices.getUserMedia（制約）
        .then（機能（ストリーム）{
             // 古いブラウザsrcObjectないかもしれません
            IF （「srcObject 」 におけるビデオ）{ 
                video.srcObject = ストリーム; 
            } 他{
                 // その新しいブラウザの使用を防ぐため、それはもはやサポートされないはず
                video.src = window.URL.createObjectURL （ストリーム）; 
            }
            video.onloadedmetadata=  関数（E）{ 
                Video.play（）; 
            }; 
        }） 
        。キャッチ（関数（ERR）{ 
            にconsole.log（err.name +  " ："  + err.message）; 
        }）; 

    // 登録撮影ボタンクリックイベント
    のdocument.getElementById（" 捕獲" ）.addEventListener（" クリック" 、機能（）{
         // 絵描く
        context.drawImage（ビデオ、0 、0 、640 、 480 ）。
    }）; 
</ スクリプト> 
</ ボディ> 
</ HTML >

上記のコードの完了後、ブラウザにhttpで直接使用することができます：// localhostを：8080ビュー。またはローカル視聴に127.0.0.1を使用します。あなたは、たとえば、追加のIPアドレスを設定したい場合はしかし：192.168.0.11のIPアドレスを、などにアクセスすることはできません。

理由：ローカルアドレスにgetUserMediaの追加は、唯一の安全なアクセスプロトコルをサポートしています。それは以下のHTTPSを設定する方法について説明し、にHTTPSを使用してアクセスする必要があります。

三、HTTPSの構成

1、秘密鍵を生成するために使用されるkeytooツールはJDKを提供しました

コマンドラインを開き、次のコードを入力します。

キーツール-genkey -alias tomcatに-keyalg RSA -keystore ./server.keystore

次のように入力してコマンドを入力した後：

操作が完了したら、あなたは現在のパス内の秘密鍵server.keystoreという名前のファイルを取得します。

2、秘密鍵はspringbootプロジェクトに参加します

キーは、ルートアイテムにコピー。注：パスに従ってくださいプロジェクトの第一層のパスを参照し、場所を注意してください。

3、application.properties配置springbootプロファイルは、次のコードを追加します。

server.port=8443
server.ssl.key-store=server.keystore
server.ssl.key-alias=tomcat
server.ssl.enabled=true
server.ssl.key-store-password=123456
server.ssl.key-store-type=JKS

4、启动项目，访问路径 https://localhost:8443/。

**注意协议和端口号**

会看到如下错误提示，这是因为我们自己配置的秘钥（证书）没有官方注册，无法被浏览器识别。可以点高级 -> 继续前往。

这时能正常访问则说明我们的https配置完毕。可以替换成其他IP地址测试能正常使用摄像头了。