Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。
このページは Cloud Translation API によって翻訳されました。
Switch to English

メディアのキャプチャと制約

WebRTCのメディア部分では、カメラやマイクなど、ビデオやオーディオをキャプチャできるハードウェアにアクセスする方法と、メディアストリームのしくみについて説明します。また、アプリケーションが画面キャプチャを行うためのディスプレイメディアについても説明します。

メディアデバイス

ブラウザでサポートされているすべてのカメラとマイクは、 navigator.mediaDevicesオブジェクトを通じてアクセスおよび管理されます。多くのカメラとマイクロフォンはUSB経由で接続し、アプリケーションのライフサイクル中に接続および切断できるため、アプリケーションは接続されたデバイスの現在のリストを取得し、変更をリッスンすることもできます。メディアデバイスの状態はいつでも変化する可能性があるため、変更を適切に処理するために、アプリケーションをデバイスの変更に登録することをお勧めします。

制約

メディアデバイスにアクセスするときは、できるだけ詳細な制約を設けることをお勧めします。単純な制約でデフォルトのカメラとマイクを開くことは可能ですが、アプリケーションにとって最適とはほど遠いメディアストリームを配信する可能性があります。

特定の制約は、1つはオーディオ用、もう1つはビデオ用のMediaTrackConstraintオブジェクトで定義されます。このオブジェクトの属性のタイプは、 ConstraintLongConstraintBooleanConstraintDoubleまたはConstraintDOMStringです。これらは、特定の値(数値、ブール値、文字列など)、範囲(最小値と最大値を持つLongRangeまたはDoubleRange )、またはidealまたはexact定義のオブジェクトのいずれかです。特定の値の場合、ブラウザは可能な限り近いものを選択しようとします。範囲については、その範囲の最良の値が使用されます。 exact一致を指定すると、その制約にexactに一致するメディアストリームのみが返されます。

近く

 // Camera with a resolution as close to 640x480 as possible
{
    "video": {
        "width": 640,
        "height": 480
    }
}
 

範囲

 // Camera with a resolution in the range 640x480 to 1024x768
{
    "video": {
        "width": {
            "min": 640,
            "max": 1024
        },
        "height": {
            "min": 480,
            "max": 768
        }
    }
}
 

正確

 // Camera with the exact resolution of 1024x768
{
    "video": {
        "width": {
            "exact": 1024
        },
        "height": {
            "exact": 768
        }
    }
}
 

メディアストリームの特定のトラックの実際の構成を確認するには、現在適用されているMediaTrackSettingsを返すMediaStreamTrack.getSettings()を呼び出します。

トラックでapplyConstraints()を呼び出すことにより、開いたメディアデバイスからトラックの制約を更新することもできます。これにより、アプリケーションは最初に既存のストリームを閉じる必要なく、メディアデバイスを再構成できます。

メディアを表示する

画面のキャプチャと記録を実行できるようにしたいアプリケーションは、Display Media APIを使用する必要があります。関数getDisplayMedia()navigator.mediaDevices一部getUserMedia()getUserMedia()似てgetUserMedia() 、ディスプレイ(またはウィンドウなどの一部)のコンテンツを開く目的で使用されます。返されたMediaStreamは、 getUserMedia()を使用する場合と同じです。

getDisplayMedia()の制約は、通常のビデオまたはオーディオ入力に使用される制約とは異なります。

 {
    video: {
        cursor: 'always' | 'motion' | 'never',
        displaySurface: 'application' | 'browser' | 'monitor' | 'window'
    }
}
 

上記のコードスニペットは、画面記録の特別な制約がどのように機能するかを示しています。これらは、ディスプレイメディアをサポートするすべてのブラウザでサポートされているわけではないことに注意してください。

ストリームとトラック

MediaStreamは、オーディオとビデオのトラック( MediaStreamTrack )で構成されるメディアコンテンツのストリームを表します。 MediaStreamTrackオブジェクトの配列を返すMediaStream.getTracks()呼び出すことにより、 MediaStreamからすべてのトラックを取得できます。

MediaStreamTrack

MediaStreamTrackは、 audioまたはvideoいずれかのkindプロパティがあり、それが表すメディアの種類を示します。 enabledプロパティを切り替えることで、各トラックをミュートenabledます。トラックには、 RTCPeerConnectionがソースであり、リモートピアからのものであるかどうかを示すブール値プロパティremoteがあります。