getUserMedia()の設定項目

2020年5月22日 08:51

JavaScriptでWebカメラやマイクのメディアストリームを取得するgetUserMedia()の設定項目をまとめてみました。

1. getUserMedia()

getUserMedia()は、ユーザーのWebカメラやマイクの「メディアストリーム」を取得するメソッドです。

引数では、「audio」(音声)と「video」(動画)の有効・無効を指定できます。

const mediaStream = await navigator.mediaDevices
  .getUserMedia({
    audio: true,
    video: true
  })

true・falseの代わりに「制約」を指定することもできます。
以下は、160x120の動画ストリームを取得する例になりますです。

let mediaStream = await navigator.mediaDevices
  .getUserMedia({
    audio: false,
    video: {
      width: 160,
      height: 120 
    }
  })

2. MediaStream

「MediaStream」は、メディアストリームを表すオブジェクトです。
メディアストリームは複数の「トラック」を持ち、トラックは「設定」と「制約」を持ちます。

プロパティとメソッドは、次のとおりです。

◎ プロパティ
・active: アクティブかどうか。
・id: ID。

◎ メソッド
・getTracks(): トラック群の取得。
・getVideoTracks(): 動画トラック群の取得。
・getAudioTracks(): 音声トラック群の取得。
・getTrackById(id): 任意のIDのトラックの取得。
・addTrack(track): トラックの追加。
・removeTrack(): トラックの削除。
・clone(): クローン。

3. MediaStreamTrack

「MediaStreamTrack」は、MediaStreamTrackの持つ1つのトラックを表すオブジェクトです。「音声トラック」と「動画トラック」があります。

プロパティとメソッドは、次のとおりです。

◎ プロパティ
・contentHint: ヒント
・enabled: 有効・無効
・id: ID
・isolated: トラックが分離されている場合はtrue
・kind: 種別 ('video', 'audio')
・label: ラベル
・mute: ミュート
・readonly: 読み取り専用
・readyState: トラック状態 ('live', 'ended')
・remote: トラックのソースがRTCPeerConnectionかどうか

◎ メソッド
・applyConstraints([constraints]): 許容できる制約の範囲。
・getCapabilities(): 有効な制約。
・getConstraints(): 設定されている制約。
・getSettings(): MediaTrackSettingsの取得。
・stop(): 停止。
・clone(): クローン

4. MediaTrackConstraints

「MediaTrackConstraints」は、MediaStreamTrackの持つ複数の制約を表すオブジェクトです。

プロパティとメソッドは、次のとおりです。

◎ プロパティ
・deviceId: 端末ID。
・groupId: グループID。

◎ 音声トラックのプロパティ
・autoGainControl: 自動ゲイン制御 (ConstrainBoolean)
・channelCount: チャネル数 (ConstrainLong)
・echoCancellation: エコーキャンセル (ConstrainBoolean)
・latency: 遅延 (ConstrainDouble)
・noiseSuppression: ノイズ抑制 (ConstrainBoolean)
・sampleRate: サンプルレート (ConstrainLong)
・sampleSize: サンプルサイズ (ConstrainLong)
・volume: ボリューム (ConstrainDouble)

◎ 画像トラックのプロパティ
・whiteBalanceMode: ホワイトバランス ("none", "manual", "single-shot", "continuous")
・exposureMode: 露出 ("none", "manual", "single-shot", "continuous")
・focusMode: フォーカス: ("none", "manual", "single-shot", "continuous")
・pointsOfInterest: ポイントセンサーのピクセル座標。
・exposureCompensation: 露出補正 (ConstrainDouble)
・colorTemperature: 色温度 (ConstrainDouble)
・iso: ISO (ConstrainDouble)
・brightness: 明るさ (ConstrainDouble)
・contrast: コントラスト (ConstrainDouble)
・saturation: 彩度 (ConstrainDouble)
・sharpness: シャープネス (ConstrainDouble)
・focusDistance: 焦点距離 (ConstrainDouble)
・zoom: ズーム (ConstrainDouble)
・torch: トラックがアクティブである限りライト有効 (Boolean)

◎ 動画トラックのプロパティ
・aspectRatio: アスペクト比 (ConstrainDouble)
・facingMode: フェーシング (CostrainDOMString)
・frameRate: フレームレート (ConstrainDouble)
・height: 高さ (ConstrainLong)
・width: 幅 (ConstrainLong)
・resizeMode: リサイズ (ConstrainDOMString)

◎ 画面共有のプロパティ
この制約は、getDisplayMedia()を使用して画面共有ストリーム取得時に、MediaTrackConstraintsに適用されます。DisplayMediaStreamConstraintsのvideoプロパティの一部として指定されるオブジェクトになります。

・cursor: マウスカーソル (ConstrainDOMString)
　・always: 常に表示
　・motion: 動いてる場合に表示
　・never: 表示しない
・displaySurface: 画面の種類 (ConstrainDOMString)
　・application: アプリケーション
　・browser: ブラウザタブ
　・monitor: モニター
　・window: ウィンドウ
・logicalSurface: ユーザーが表示領域に直接対応しないサーフェイスを選択できるようにするかどうか (ConstrainBoolean)

メディアストリームを生成し、制約を確認するコードは次のとおりです。

  // MediaStreamの取得
  const mediaStream = await navigator.mediaDevices
    .getUserMedia({
      audio: {
        sampleRate: {ideal: 32000},
        sampleSize: {ideal: 16},
        echoCancellation: true,
        echoCancellationType: 'system',
        noiseSuppression: false,
        latency: 0.01
      },
      video: {
        width: 640,
        height: 480
      },
    })

  // MediaTrackの取得
  let tracks = mediaStream.getTracks();
  for (let i = 0; i < tracks.length; i++) {
    // 種類
    console.log('kind: '+tracks[i].kind)
    let constraints = tracks[i].getConstraints()

    // 音声トラックの制約
    if (tracks[i].kind == 'audio') {
      console.log('autoGainControl: '+constraints.autoGainControl)
      console.log('channelCount: '+constraints.channelCount)
      console.log('echoCancellation: '+constraints.echoCancellation)
      console.log('latency: '+constraints.latency)
      console.log('noiseSuppression: '+constraints.noiseSuppression)
      console.log('sampleRate: '+constraints.sampleRate)
      console.log('sampleSize: '+constraints.sampleSize)
      console.log('volume: '+constraints.volume)
    }

    // 動画トラックの制約
    if (tracks[i].kind == 'video') {
      console.log('aspectRatio: '+constraints.aspectRatio)
      console.log('facingMode: '+constraints.facingMode)
      console.log('frameRate: '+constraints.frameRate)
      console.log('height: '+constraints.height)
      console.log('width: '+constraints.width)
      console.log('resizeMode: '+constraints.resizeMode)
    }
  }

kind: audio
autoGainControl: undefined
channelCount: undefined
echoCancellation: true
latency: 0.01
noiseSuppression: false
sampleRate: 32000
sampleSize: 16
volume: undefined

kind: video
aspectRatio: undefined
facingMode: undefined
frameRate: undefined
height: 480
width: 640
resizeMode: undefined

5. MediaTrackSettings

「MediaTrackSettings」は、MediaTrackStreamの設定を表すオブジェクトです。
設定項目は「制約」に準拠します。

プロパティとメソッドは、次のとおりです。

◎ プロパティ
・deviceId: 端末ID。
・groupId: グループID。

◎ 音声トラックのプロパティ
・autoGainControl: autoGainControlの現在値。
・channelCount: channelCountの現在値。
・echoCancellation: echoCancellationの現在値。
・latency: latencyの現在値。
・noiseSuppression: noiseSupressionの現在値。
・sampleRate: sampleRateの現在値。
・sampleSize: sampleSizeの現在値。
・volume: volumeの現在値。

◎ 動画トラックのプロパティ
・aspectRatio: aspectRatioの現在値。
・facingMode: facingModeの現在値。 ('user', 'environment', 'left', 'right')
・frameRate: frameRateの現在値。
・height: heightの現在値。
・width: widthの現在値。
・resizeMode: resizeModeの現在値。 ('none', 'crop-and-scale')

◎ 共有画面トラックのプロパティ
・cursor: マウスカーソル
　・always: 常に表示
　・motion: 動いてる場合に表示
　・never: 表示しない
・displaySurface: 画面の種類
　・application: アプリケーション
　・browser: ブラウザタブ
　・monitor: モニター
　・window: ウィンドウ
・logicalSurface: ユーザーが表示領域に直接対応しないサーフェイスを選択できるようにするかどうか

6. InputDeviceInfo

「制約」に端末ID(どのカメラ、どのマイクを利用するか)を指定するには、で端末一覧（InputDeviceInfoのリスト）を取得し、端末を選択し、端末IDを指定します。

const devices = await navigator.mediaDevices.enumerateDevices()
for (let i = 0; i < devices.length; i++) {
  console.log(devices[i].deviceId+','+devices[i].label+','+devices[i].kind)
}

default,既定 - MacBook Proのマイク (Built-in),audioinput
main.js:294 5f2d59d7b5e657902b4a583af9718a191f7b937cfe00afa8b63a08112ee5849f,MacBook Proのマイク (Built-in),audioinput
main.js:294 792af8bf677c38e19c4e7cf9d8c9d5b934985994b0cd2a529ecc100673761cb4,FaceTime HD Camera (05ac:8514),videoinput
main.js:294 default,既定 - MacBook Proのスピーカー (Built-in),audiooutput
main.js:294 922e5f4dff12e99bd495d7b2c55c7234a12e04b81b5effc1cc46e2fc0859fad8,MacBook Proのスピーカー (Built-in),audiooutput

プロパティは、次のとおりです。

◎ プロパティ
・deviceId: デバイスID
・groupId: グループID
・kind: 種別 ('videoinput', 'audioinput', 'audiooutput')
・label: ラベル

getUserMedia()の設定項目

1. getUserMedia()

2. MediaStream

3. MediaStreamTrack

4. MediaTrackConstraints

5. MediaTrackSettings

6. InputDeviceInfo

参考

いいなと思ったら応援しよう！