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

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

メディアデバイス

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

制約

メディアデバイスにアクセスする場合は、可能な限り詳細な制約を指定することをおすすめします。単純な制約でデフォルトのカメラとマイクを開くことはできますが、アプリにとって最適なメディアストリームとはかけ離れたものが配信される可能性があります。

具体的な制約は、音声用と動画用の 2 つの MediaTrackConstraint オブジェクトで定義されます。このオブジェクトの属性は、ConstraintLong、ConstraintBoolean、ConstraintDouble、ConstraintDOMString のいずれかの型です。これらは、特定の値（数値、ブール値、文字列など）、範囲（最小値と最大値を含む LongRange または DoubleRange）、または ideal または exact の定義を含むオブジェクトのいずれかになります。特定の値の場合、ブラウザはできるだけ近い値を選択しようとします。範囲の場合、その範囲内の最適な値が使用されます。exact が指定されている場合、その制約に完全に一致するメディアストリームのみが返されます。

Near

// 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() に類似しており、ディスプレイのコンテンツ（またはその一部（ウィンドウなど））を開く目的で使用されます。返される MediaStream は、getUserMedia() を使用する場合と同じように機能します。

getDisplayMedia() の制約は、通常の動画や音声入力で使用される制約とは異なります。

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

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

ストリームとトラック

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

MediaStreamTrack

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

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

メディア デバイス

制約