getUserMedia()で指定できるMediaTrackConstraintsのよもやま

navigator.mediaDevices.getUserMedia({
  video: {}, // <- この引数
  audio: {}, // <- この引数
}); 

指定できるもの

仕様書より。

dictionary MediaTrackConstraintSet {
  ConstrainLong      width;
  ConstrainLong      height;
  ConstrainDouble    aspectRatio;
  ConstrainDouble    frameRate;
  ConstrainDOMString facingMode;
  ConstrainDouble    volume;
  ConstrainLong      sampleRate;
  ConstrainLong      sampleSize;
  ConstrainBoolean   echoCancellation;
  ConstrainBoolean   autoGainControl;
  ConstrainBoolean   noiseSuppression;
  ConstrainDouble    latency;
  ConstrainLong      channelCount;
  ConstrainDOMString deviceId;
  ConstrainDOMString groupId;
};

将来的にはこれらは拡張可能であるとか書いてあるけど、どういう風に拡張可能であるとかは書いてない。

あわせてよくみるキーワード

プロパティに対して値を直接指定する以外に、いろいろキーワードが出てくる。

• ideal
• min
• max
• exact
• advanced

`ideal`は、直接指定するのと同じ意味。

{
  video: { width: 1600 }
}
// 同じ
{
  video: { width: { ideal: 1600 } }
}

`ideal`は理想的には・・なので、ブラウザが合致するメディアデバイスがないと見なした場合は無視される。

`min`と`max`と`exact`は、必ずこの制約を守れ！という指定。

{
  video: {
    width: { min: 320, ideal: 1280, max: 1920 },
    facingMode: { exact: 'environment' }
  }
}

この場合、`facingMode`に`exact`がツイてるので、リアカメラがない端末の場合は、Rejectされる。
`width`でも`height`でもなんでも、ブラウザの都合が悪ければRejectされちゃう。

advanced

最後に`advanced`。
これは値として定義するものではないので、少し毛色が違う。

これは`ideal`みたいなもんではあるが、適うなら適用してくれーっていうリストにできるやつ。
指定できる中身は一緒。

{
  video: {

    // 基本の制約をココにした上で

    advanced: [
      // このリスト内での値の直指定はexactと同じになる
      { aspectRatio: 1.3333333333 },
      // 同じものを指定しておくとフォールバックとして使える
      { aspectRatio: 1 },

      // widthだけOKでも、heightがNGなら、両方NGになる
      { width: 1920, height: 1280 },
    ]
  },
}

細かいところはこういう感じ。

基本の制約と違って、見合わない環境ならスルーされるだけでrejectされることはないのがポイント。

流れのまとめ

なので`getUserMedia()`した時の流れとしては、

• `min` / `max` / `exact`の必須な指定をみる
  • 問題あればここでReject
• `advanced`な指定をみる
  • 有効なものは反映
• 余ってるのを`ideal`、直指定で埋める
• 指定がないもの、指定されたものをブラウザがよしなにする
• Resolve

みたいなイメージ。

最終的にはブラウザが決める

例えばこういう相容れ合い3つが指定された時どうなるか。

{
  video: {
    width: 1280,
    height: 720,
    aspectRatio: 1.5,
  }
}

1280x720ならアス比は1.777になるので、3つ同時には満たせない。

この場合の組合せは 3C2 なので3通り。

• 1280x720
• 1280とアス比1.5
• 720とアス比1.5

どれになるかはブラウザ次第。
手元では1280x720になったので、できるだけ多くの制約を満たすようにしようとする・・？

Media Capture and Streams

この章さえ読んで理解できれば完璧！（あとはブラウザにその通りに実装されてれば

navigator.mediaDevices.getSupportedConstraints();

たとえば width

{
  video: {
    width: 100,
  }
}

サイズ指定してない`video`要素に対してこれで取得したストリームを表示しても、指定通りちっさく表示されたのはChromeだけ。
どのブラウザも`getSupportedConstraints()`ではサポートしてる！って返ってくる。

Safariにいたってはいざ指定すると`ideal`なのにエラーにしてくるひどい。
FirefoxとEdgeは、指定を無視してきます。

Discord

Discord - Free Voice and Text Chat for Gamers

DiscordというWebRTCを使ったボイチャのサービスで使われてた例。

{
  advanced: [{
    echoCancellation: {
      exact: true
    }
  }, {
    googEchoCancellation: {
      exact: true
    }
  }, {
    googExperimentalEchoCancellation: {
      exact: true
    }
  }, {
    googNoiseSuppression: {
      exact: true
    }
  }, {
    googExperimentalNoiseSuppression: {
      exact: true
    }
  }, {
    googAutoGainControl: {
      exact: true
    }
  }, {
    googExperimentalAutoGainControl: {
      exact: true
    }
  }, {
    googHighpassFilter: {
      exact: true
    }
  }, {
    googTypingNoiseDetection: {
      exact: true
    }
  }, {
    googAudioMirroring: {
      exact: false
    }
  }, {
    deviceId: {
      exact: ["default"]
    }
  }]
}

Google ハングアウト

Google ハングアウト

なんか思ってた以上にいろいろ使ってたので表にまとめてみた。

まず`video`の。

名前	型
enableDtlsSrtp	bool
enableRtpDataChannels	bool
googCpuOveruseDetection	bool
googCpuOveruseEncodeUsage	bool
googCpuUnderuseThreshold	number
googCpuOveruseThreshold	number
googScreencastMinBitrate	number
oogHighStartBitrate	number
googPayloadPadding	bool
googNoiseReduction	bool

次に`audio`の。

名前	型
googEchoCancellation	bool
googExperimentalEchoCancellation	bool
googAutoGainControl	bool
googExperimentalAutoGainControl	bool
googNoiseSuppression	bool
googHighpassFilter	bool
googAudioMirroring	bool
googExperimentalNoiseSuppression	bool

ちなみにDiscordで使われてる`googTypingNoiseDetection`は使われてなかったので、もしかしたら存在しなかったりして・・。

と、なんか気になってブラウザのコード追ってみたら他にもいっぱい出てきて心が折れました。

• Chromium
  • https://cs.chromium.org/chromium/src/third_party/webrtc/api/mediaconstraintsinterface.h?sq=package:chromium
• Firefox
  • https://dxr.mozilla.org/mozilla-central/source/dom/media/webrtc/MediaTrackConstraints.h
• Safari(Webkit)
  • https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/platform/mediastream/MediaConstraints.h?rev=218464

Chromeは他にも見たこと無いのが色々あって、FirefoxとSafariは仕様書通りで余計なプロパティは見てない風？

googXxxxは使うべきか

個人的には使わない。そもそもChromeでしか動かんし。

Chromiumのコードサーチでは色々見つかったけど、これが実際にChromeに載ってるかどうかの判断がつかなかったのもある。

たとえば`/src/third_party/webrtc/api/mediaconstraintsinterface.h`に、

This interface is being deprecated in Chrome, and may be removed from WebRTC too.
https://bugs.chromium.org/p/webrtc/issues/detail?id=5617

とか書いてあるし。
似たような指定が `/src/third_party/WebKit/Source/modules/mediastream/MediaConstraintsImpl.cpp`にもあるからそっちを使えって意味・・？

なんしかご利用の際は覚悟を持って自己責任でどうぞ。

まあこの業界で仕事してるなら、仕様書もブラウザの実装もどっちも半信半疑でかかるやろうし、全部自分で動かして確かめるまで信用しないはずよね！