メディアキャプチャAPIを使用します

この記事では、メディアのキャプチャとストリーミングAPI（getUsermedia）を調査し、ウェブページがプラグインなしでウェブカメラやマイクにアクセスできるようにします。 Chrome、Opera、Firefox、Edgeなどの主要なブラウザによってサポートされています。

APIでは、ビデオ、オーディオ、画像キャプチャを提供しています。カメラ設定の制御（解像度、フレームレート、フォーカス）;マルチカメラサポート。他のAPIとの統合。 アプリケーションは、ビデオチャットからソーシャルメディアコンテンツの作成にまで及びます。ユーザーの許可が必要であり、機能の可用性はデバイスとブラウザによって異なります。

主要な機能と機能：

APIの中心である メソッドは、

を使用して、キャプチャ設定（FacingMode、Volume、Resolution）を定義します。

getUserMedia()を介して特定のデバイスを選択するのに役立ちます。 成功した呼び出しは、MediaStreamConstraintsオブジェクトを返します。enumerateDevices() deviceIdMediaStreamブラウザ互換性：

APIは幅広いサポートを楽しんでおり、Chrome 21、Opera 18、およびFirefox 17に遡り、最近Edgeに追加されています。 Modernizrは、ブラウザの互換性チェックを簡素化します。 Modernizrがなければ、ブラウザの矛盾を処理するために手動チェックが必要です。 代わりに、Modernizrなし：

なし

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

ビデオ再生：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

HTMLには、キャプチャされたストリームを表示するための

タグ（およびに設定）が含まれています。 javascriptは、ビデオ要素の

（または

）を動的に設定します。 <video></video> autoplaymutedカメラのアクセスと許可：srcObjectsrc

APIはユーザーセキュリティに優先順位を付けます。 起動すると、アプリケーションは、ウェブカメラ（またはウェブカメラとマイク）を使用する許可を要求します。

<video id="videoTag" src="" autoplay muted class="view--video__video"></video>

メディアアクセス要件を指定するオブジェクト（Webcamの

、両方の場合は）を受け入れます。

getUserMedia(){video: true}複数のウェブカメラのサポート：{video: true, audio: true}

利用可能なメディア入出力デバイス（マイク、カメラ、スピーカー）に関する情報を取得します。 それは、それぞれが

、

、などのプロパティを備えた一連のデバイスオブジェクトに解決する約束を返します。 この機能はまだ実験的です。

ビデオの設定出典：MediaDevices.enumerateDevices()kind deviceId label関数は、ビデオタグのソースを受信した

に設定します。 サポートされている場合は、古いブラウザの場合は

に戻ります。

cssフィルター：

initializeVideoStream()

アプリケーションは、ビデオと画像にリアルタイムCSSフィルターを適用します。 JavaScript関数は、事前定義されたフィルター（グレイスケール、セピア、ぼやけなど）を循環し、対応するCSSクラスをビデオ要素に追加します。

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

画像の保存：

（ie10）またはnavigator.msSaveBlobおよびtoDataURL要素を使用したフォールバックは、キャプチャされた画像を保存します。 <a></a>

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

さらなる開発：

将来の可能性には、高度なフィルタリングとインタラクティブな環境のためのWebGL統合、およびオーディオ操作のためのWebオーディオAPI統合が含まれます。 モバイルブラウザのサポートも拡大しています

（FAQやMicrosoft Learning Resourcesを含む元の入力の残りの部分は、コードで示されているように、メディアキャプチャAPIのコア機能に直接関係していないため、簡潔に省略されています。スニペット。）

以上がメディアキャプチャAPIを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。