2.2、オーディオとビデオのキャプチャ（）

章はじめに：このセクションでは、カメラとマイクからのデータストリームにコレクションを実現し、表示されました。推奨読書の方法：理解+実用的な操作。

　このセクションで使用されるAPI - 「制約」パラメータである「navigator.mediaDevices.getUserMedia（制約）」は、本方法は、プロミスを返します。このデモを実施するために、私は新しいdemo2.2.html、達成するために以下のコードを作成しました。

<！ - demo2.2.html - > 
<HTML> 
    <HEAD> 
        <メタ文字コード= "UTF-8"> 
        <タイトル>デモ2.2音视频采集</ TITLE> 
    </ HEAD> 
    <BODY> 
        <動画自動再生playsinline ID = "myvideo"> </ビデオ> 
    </ BODY> 
　　<SCRIPT SRC =」https://webrtc.github.io/adapter/adapter-latest.js "> </ SCRIPT> 
    <スクリプトSRC =" ./ JS / demo2.2.js "> </ SCRIPT> 

</ HTML>

コードでは、我々はbodyタグのvideoタグを追加し、IDは、リアルタイムのビデオストリームにカメラを通じて取得し表示するため、「myvideo」です。demo2.2.jsロジックコードに対応するJS。次のようにJSでは、まず、ユーザビリティの判断は、オブジェクトを実行します。

'厳格な使用' 
せlocalVideo =のdocument.getElementById（ "myvideoを" ）。
場合（！navigator.mediaDevices || navigator.mediaDevices.getUserMediaは）
{ 
    スロー 新しいエラー（ "getUserMediaがサポートされていません" ）; 
}

getUserMedia、webkitGetUserMedia、mozGetUserMedia：仕様のうちwebrtc1.0前に、様々なブラウザベンダーは、異なるブラウザのかもしれないAPIは、同じ名前ではありません彼らのWebRTCのAPIを実現するために始めている、getUserMediaには、次の3つの名前があり、話してました。関係する開発者のためにこれらのケースを考慮する必要があります。だから、コードはそうなることがあります。

constのgetUserMedia = navigator.mediaDevices.getUserMedia | navigator.mediaDevices.webkitGetUserMedia | navigator.mediaDevices.mozGetUserMedia

Googleは図書館適応が--adapter.js維持ので、だから、開発者に不便をもたらすでしょう。住所：https://webrtc.github.io/adapter/adapter-latest.js（アダプターの最新バージョン）、「にいつでも最新のコードの変更アダプター・latest.js」で、その実際のプロジェクトの開発で、：最高のバージョン、フォーマットのバージョンロックhttps://webrtc.github.io/adapter/adapter-NNNjs例えば、 https://webrtc.github.io/adapter/adapter-1.0.2.jsを。

　　次のように次は、コールバック関数が成功した流れを得るために書き込み、コードがあります。

LET localVideoElement =のdocument.getElementById（ "myVideo"）; //読み取りvideo要素

//メディアストリームの成功を取得する
機能（MediaStreamのへ）getLocalMediaStreamSuccessを{

　　localVideoElement .srcObject = メディア・ストリームにオブジェクトに//直接割り当て、MediaStreamのへ
}

//ローカルメディアが失敗したストリーム取得コールバック

関数 getLocalMediaStreamException（エラー）{

　console.log（ 'navigator.getUserMediaエラー：'、エラー）。

}

その後getUserMedia、次のコードを呼び出しを開始。

// オーディオとビデオキャプチャ構成 
CONST mediaStreamConstraints = { 
    ビデオ：trueに、//ビデオキャプチャ
    オーディオ：trueに、//オーディオキャプチャ
}; 
.then navigator.mediaDevices.getUserMedia（mediaStreamConstraints）（getLocalMediaStreamSuccess）。キャッチ（gotLocalMediaStreamError）

完全なコードは次のとおりです。

Demo2.2.js // 
'利用厳しい' 
LET localVideoElement =のdocument.getElementById（ "myVideo" ）;
 IF（Navigator.mediaDevices ||！！Navigator.mediaDevices.getUserMedia）{
     スロー 新しい新しいエラー（ "getUserMediaへの道がサポートされていません" ） ; 
} 

// ローカルメディアが成功したコールバック・ストリーム取得
機能（MediaStreamのに）getLocalMediaStreamSuccessを{ 
    localVideoElement.srcObject = MediaStreamのに; 
} 

// ローカルメディアが失敗したコールバック・ストリーム取得
機能getLocalMediaStreamException（エラー）{ 
    にconsole.log（ 'navigator.getUserMediaエラー：' 、エラー）; 
} 

// オーディオとビデオコレクションの構成
CONST mediaStreamConstraints = { 
    ビデオ：真、
    オーディオ：真、
}。
navigator.mediaDevices.getUserMedia（mediaStreamConstraints）
    .then（getLocalMediaStreamSuccess）。キャッチ（gotLocalMediaStreamError）

2.2、オーディオとビデオのキャプチャ（）

おすすめ