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

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

メディアデバイス

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

制約

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

具体的な制約は、MediaTrackConstraint オブジェクト（音声用と動画用）で定義されます。このオブジェクトの属性の型は ConstraintLong、ConstraintBoolean、ConstraintDouble、または ConstraintDOMString です。これは、特定の値（数値、ブール値、文字列など）、範囲（最小値と最大値を含む LongRange または DoubleRange）、ideal 定義または 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
        }
    }
}

Exact

// 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.getTracks() を呼び出して MediaStreamTrack オブジェクトの配列を返すことで、MediaStream からすべてのトラックを取得できます。

MediaStreamTrack

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

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

メディア デバイス

制約

ニア

範囲