2.5、実際のケース（B）

この記事：前のセクションの内容に続いて、このセクションでは、映像コンテンツの取得パラメータと動的構成機能のフィルタパラメータを完了するために行う必要があります。推奨読書モード：実用的な操作。

　　より良いコードを説明するために、我々は、図2.5.1のように、ソフトウェアのスクリーンショットを掲載しました。

図2.5.1（スクリーンショット）

ビデオキャプチャのための動的な設定パラメータ：このセクションで達成すべき最初の関数で見てみましょう。フィルタパラメータにしたくないパラメータまたはビデオキャプチャである私たちが管理するための新しいオブジェクトを作成しますので、我々は、ビジネスの同じ種類として見ることができます：CONFIGMANAGER、現在のオブジェクトは2つのメソッドがあります読んビデオ取得パラメータのgetConstrainsを

フィルタのパラメータgetFilterConfigを読みます。最初--getConstrainsを実現する第一の方法は、この方法は、JSフォーム要素の値を読み取る必要があり、したがって、我々は次のように、操作しやすく、対応する要素IDを形成するために追加する必要があります。

< DIV クラス= "制約項目" > 
    < ラベル>是否启用音频</ ラベル> 
    < 入力   ID = "useAudio" タイプ= "チェックボックス" > 
</ DIV > 
< DIV クラス= "制約項目" > 
    < ラベル>视频宽</ ラベル> 
    < 入力値= "300" ID = "videoWidth" タイプ= "番号" > 
</ DIV > 
< DIV クラス= "制約-項目" > 
    < ラベル>ビデオ高</ ラベル> 
    < INPUTの値= "200は"   ID = "videoHeight" タイプ= "数値" > 
</ divの> 
< divのクラス= "制約-項目" > 
    < ラベル>取得装置は、選択された</ ラベル> 
     < SELECT アリア-プレースホルダ= "取得手段を選択し、" 名前= "" ID = "devicesList" > 
    </ 選択> 
</ DIV > 
<DIV クラス= "制約項目" > 
    < ラベル>视频帧率</ ラベル> < 入力値= "30"   ID = "フレームレート" タイプ= "番号" > 
</ DIV >

上記のフォーム要素にIDを設定することに加えて、コード、だけでなく、デフォルト値を設定しますが、カメラを読むことのWebRTCコードによって、マシンで使用可能なデバイスリストカメラに読み込まれるには、このオプションの特別な必要性を「取得手段を選択」デバイスのリスト、それ？getUserMediaによってデフォルトのデバイスのメディアストリームを読み取るために最初にすべてのユーザーの、私たちが知っていることを学んだ2.1によると、このプロセスは、我々はできる、この分野でのアクセスにマイク権限ブラウザをカメラにプログラムを尋ねると、これだけ検証をトリガーしますこのようenumerateDevicesなどのアクセス他のWebRTCのAPIを、（マシンの使用可能なオーディオおよびビデオ機器を含む）に「滑らかな」。我々は列挙に行き、成功したカメラを開いた後に使用可能なデバイスのリストが表示されますので、この考え方によると、唯一の「カメラを開いて、」ロジックは、getUserMediaを呼び出して、我々はcameraManager内に追加して、このロジック部分はまだ、カメラの管理操作に属し名前が示すように、メソッド--enumerateVideoDevicesは、我々は唯一、オーディオ入力などの他のデバイスにビデオ入力デバイスを含める必要があり、オーディオ出力は、読者のために、この章の拡大の一環として、この作業を考慮しません。

　　達成すべきcameraManager下enumerateVideoDevicesの最初の分析、我々は最初に、関連のAPIのWebRTCを通読するために使用可能なデバイスのリストを読み込む必要があり、利用可能なデバイスのデフォルトリストに注意を払うには、「オーディオ入力（audioinpt）、オーディオ出力（audiooutput）、ビデオを含んでいます入力（videoinput）「3つのデバイスタイプ、ビデオ入力（videoinput）機器アウトフィルタに我々が持っているすべてのアウト;第二に、我々は動的にDOM要素を作成したいビデオ入力デバイス上映」<選択ARIA-プレースホルダーを=「コレクションを選択してください選択するユーザーのための装置「名前=」「ID =」devicesList「>」タグ、。機能分析は、以下のコードを完了しています。

// 加载摄像头供用户选择
    非同期enumerateVideoDevices（）{ 
        せデバイス = のawait navigator.mediaDevices.enumerateDevices（）は
        devicesListDomせ = domManager.getDom（ "devicesList" ）。
        devicesListDom.innerHTML = ""; // 清空子元素
        場合（デバイス）{
             用{（デバイスDを聞かせ）
                 場合（D &&（d.kind == 'videoinput' ））{ 
                    素子せ =のdocument.createElement（ "オプション" ）。
                    もし（要素）{ 
                        element.value = d.deviceId。
                        element.innerHTML = d.label。
                        devicesListDom.appendChild（要素）
                    } 
                } 
            } 
        } 

    }、

これまでのところ、cameraManagerオブジェクトが呼び出されるメソッドよりもですか？openCamera cameraManager方法のようなコードを呼び出します。

// カメラがオンになっている
    非同期openCamera（mediaStreamconstrains）{ 
        せメディア = のawait 
        navigator.mediaDevices.getUserMedia（mediaStreamconstrains）; 
        この .enumerateVideoDevicesを（）; // 呼び出しは、リスト利用可能なビデオ機器含むように
        この .mediaStream = ;メディア
         リターンメディア; 
    }

ここで、「初期化」映像取得パラメータは、これらのパラメータを読み始め、その後、行われた作業、我々は管理パラメータだけで、引数は非常にシンプルであること、ビデオを管理するために、管理するためのオブジェクト--configManagerを使用して、上記と述べましたあなたは、フォーム要素の値の対応する値を読み取る必要がある、とのWebRTCオブジェクトを識別することができ制約を構築することができます。コードは以下の通りです。

// 設定パラメータ管理オブジェクト 
のconst CONFIGMANAGER = { 

    // 読み込み設定パラメータ取得
    getConstrains（）{
         / * *映像取得パラメータを読んでスタート   * / 
        拘束してみましょう = { 
            オーディオ：falseに、
            {}：ビデオ
        } 
        // 読み込みするかどうかオーディオに 
        constrains.audio = domManager.getDom（ "useAudioが" ;）.checkedを
        constrains.video.width = domManager.getDom（ "videoWidth" ）.Valueの; 
        constrains.video.height = domManager.getDom（ "videoHeight" ）.Valueの; 
        constrains.video.frameRateDomManager.getDom =（ "フレームレート" ）.Valueの; 
        constrains.video.deviceId = domManager.getDom（ "devicesList" ）.Valueの;
         / * *パラメータは、エンド映像取得読み取る   * / 
        戻り制約を; 

    } 

}

上記のコードは、フォーム要素を「選択ボタン」が「useAudio」は、選択された属性がチェック決定する必要があるかどうかが決定されることに留意されたいです。

　　完全に達成するために、ビデオ取得パラメータ管理（getConstrains）、次のあなたは使いたい、とどここの方法を使用するには？我々はボタン「更新設定」クリックイベントをリッスンし、イベントマネージャ--eventManagerイベントリスナーを追加する必要があるので、あなたは、「更新の構成」をクリックすると、明らかにそれが呼び出すことです。コードは以下の通りです。

       // リスナー構成イベントを更新する 
        。domManager.getDom（ "updateConstrains"）のonclick =（）=> { 

            // ビデオキャプチャの設定情報を読み取り 
           拘束= LET configManager.getConstrains（）は
             // カメラオフ
            （cameraManager.closeCameraを）;
             / / 新しい構成パラメータカメラ開き 
            .then cameraManager.openCamera（制約）を（メディア=> { 
                domManager.getDom（ "myVideo"）= srcObject。媒体; 
                statusManager.openedCamera（）; 
            }）。キャッチ（ERR => { 
                console.log（「フェイル可読媒体」は、エラー）
            }） 
        }

私たちは論理的な順序になったように、コードは、何の難しさ、注意が必要な領域のみを収集するために再オープンしたカメラの設定の更新に必要ではありません：設定パラメータを読んで、新しいパラメータ> ---> ---開閉カメラカメラを開きます。この時点で、「アップデートの設定」機能が取得します。フィルタの更新：そして、第2の機能を完了します。再び、この機能の完了後、我々はこの記事の完全なコードを示しています。

おすすめ