はじめまして

• Yuji Sugiura / @leader22
• フロントエンド・エンジニア at PixelGrid Inc.
  • 最近はWebRTC（ついに）、普段はReactとかMobXとか
• ブログもよろしく
  • console.lealog();
  • 今日の発表の元ネタ記事もあります

本日のテーマ
getUserMedia()

みなさん！
getUserMedia()
してますか？

まずはおさらい

10.2 MediaDevices Interface Extensions | Media Capture and Streams

partial interface MediaDevices {
  Promise<MediaStream>  getUserMedia(optional MediaStreamConstraints constraints);
};

・使い方

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {})
  .catch(err => {});

Promiseが返り、resolveされるとMediaStreamが取得できます。

こういうのはもう忘れてください

// navigatorに生えてるし、コールバックベースである
navigator.getUserMedia(constraints, successCallback, errorCallback);

// なんか変な接頭辞ついてる
navigator.mozGetUserMedia(constraints, successCallback, errorCallback);
navigator.webkitGetUserMedia(constraints, successCallback, errorCallback);

2017年になっても謎の圧力によって古いブラウザを切れない人は、がんばってください・・。

本日の主役

// コレ
const constraints = { video: true };

navigator.mediaDevices.getUserMedia(constraints); // <- コレ！！

getUserMedia()には、どういうMediaStreamが欲しいかを決めるオプションを渡すことができます。

オプションというより、Constraints: 制約を課すイメージ。

MediaStreamConstraints

10.3 MediaStreamConstraints | Media Capture and Streams

dictionary MediaStreamConstraints {
  (boolean or MediaTrackConstraints) video = false;
  (boolean or MediaTrackConstraints) audio = false;
};

audioとvideoそれぞれ、どうしたいか決められる。

// カメラもマイクもくださいな
navigator.mediaDevices.getUserMedia({ video: true, audio: true });

// マイクのストリームだけくださいな
navigator.mediaDevices.getUserMedia({ audio: true });

falseまたは未定義の場合は、取得しない。

続・MediaStreamConstraints

dictionary MediaStreamConstraints {
  (boolean or MediaTrackConstraints) video = false;
  (boolean or MediaTrackConstraints) audio = false;
};

実はコレ・・・、bool以外にも指定できます！！

指定してるとこ、見たことありますよね？その指定の意味、把握してますよね？！

よく見る例 1

{
  video: {
    width: 1280,
    height: 720,
    frameRate: 15,
  },
}

これはわかる！

よく見る例 2

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

これもわかる・・と思ったけど、この場合のアスペクト比はどうなる・・？

よく見る例 3

{
  video: {
    width: { min: 320, ideal: 1280, max: 1920 },
    height: { min: 240, ideal: 720, max: 1080 },
    frameRate: 30,
    facingMode: { exact: 'environment' },
  }
}

なんとなくわかる気はするけど、謎のキーワードがいっぱいある・・うっ・・。

よく見る例 4

{
  audio: {
    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"]
      }
    }]
  },
}

全然わからない（^ω^#）

俺たちは雰囲気で
getUserMedia()
をやっている！

今日はコレを解説します！

MediaTrackConstraints

4.3.6 MediaTrackConstraints | Media Capture and Streams

dictionary MediaTrackConstraints : MediaTrackConstraintSet {
  sequence<MediaTrackConstraintSet> advanced;
};

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;
};

これがvideoとaudioの直下に指定できるものたち。それに加えて、advancedにも指定できる。

さっきのgoogXxxxはChromeが勝手にやってる独自プロパティで、仕様書にはない😇

min / max / exact

「絶対これに制限したいです！」という指定。

{
  video: {
    facingMode: { exact: 'environment' }
  }
}

リアカメラのないMacbook Proとかでコレやると、rejectされます。

{
  video: {
    width: { min: 1920, },
  }
}

Macbook ProのFaceカメラは720pなので、width: 1280以上を指定するとrejectされます。

なのでとりあえず付けておくものではない！

ideal

「なにも制限せずブラウザに委ねます」という指定。

{
  video: {
    width: { ideal: 1920, },
  }
}

実はこれ、値を直指定するのと同じ。

{
  video: {
    width: 1920,
  }
}

ただ、指定したからといってそうなる保証はない。←重要

advanced

「できたら制限したいんですよねー、無理なら別に良いんですけど」という指定。

{
  video: {
    width: { min: 640, ideal: 1280 },
    height: { min: 480, ideal: 720 },

    // 値として使うキーワードではない
    advanced: [
      { width: 1920, height: 1280 },
      { aspectRatio: 1.3333333333 },
    ]
  },
}

最低でも640x480以上の解像度がいいです！

「でもできたら解像度は1920x1280がいいんですよねー。 それがダメならアス比は4:3のやつにしてもらえます？」

もしそれもダメならもう1280x720に近いやつでいいです・・。

続・advanced

{
  video: {
    advanced: [
      // exactと同じ
      { aspectRatio: 1.3333333333 },
      // こっちはフォールバック
      { aspectRatio: 1 },

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

• リスト内での値の直指定は、exactと同じ意味
• リストの先頭から順にチェックされるので、同じ指定をフォールバックとして使える
• リストアイテムごとのチェックになる

まとめ

処理の流れ。

• min / max / exact
  • 問題ないなら次へ OR reject
• advanced
  • リストの上から順に
  • 問題ないなら有効化して次へ
• ideal（値の直指定）
  • 指定ないもの含めブラウザがよしなに最終決定
• resolve

11. Constrainable Pattern | Media Capture and Streams

大事なことはすべてこの章から教わりました。

択一の答えにならないとき

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

width / heightは1.777なので、3/3は満たせない。

この場合の組合せは3C2の3通りだが、どれになるかはブラウザがよしなにする。

手元のChromeはwidth x heightになりました。

もう雰囲気ではなく
getUserMedia()
できそうですよね？

そんな皆さんに問題です

どうなるでしょうか？

navigator.mediaDevices.getUserMedia({ video: { width: 100 } });

サイズ指定をしてないvideoに、これで取得したストリームを表示した際、どうなるか。

• Chrome Canary
• Firefox Nightly
• Safari TP
• Edge

今日時点の最新バージョン、いずれもMacbook Proの付属カメラにて。

こうなった

• Chrome: 制約通りに小さいストリームが表示
• Firefox: ストリームは表示されるが制約は無視
• Safari: エラーになる（reject）
• Edge: ストリームは表示されるが制約は無視

https://jsbin.com/viwiqamozu

結局はブラウザ次第

{ video: { width: 100 } }

この指定はidealなので、制約が受け入れられるかはブラウザ次第。FirefoxもEdgeも、挙動としては仕様書通り。

{ video: { width: { exact: 100 } } }

ちなみにこうするとRejectされる。

・・・Safari？知らない子ですね・・。

まとめ

• オプションの指定ではなく制約をブラウザに課すイメージ
  • なので記述方法に幅がある
• 制約は必ず受け入れられるわけではない（ideal）
  • Chromeがやり過ぎなのか、他が怪しいのかは謎
  • カメラのHD相性とかもありそう？

navigator.mediaDevices.getSupportedConstraints();

仕様書的には、これで事前に確認しろって書いてあるけど、ブラウザは解釈できないプロパティを無視するので気休め。 （ちなみにSafariはwidth: trueって返してくる😇)

Thanks！

（まだ時間ある ? 次へ : 末尾へ）

謎の制約
googXxxx

ナニコレ

// Google ハングアウトより
{
  audio: {
    advanced: [
      {
        googEchoCancellation: {
          exact: true
        }
      },
      {
        googExperimentalEchoCancellation: {
          exact: true
        }
      },
      {
        googAutoGainControl: {
          exact: true
        }
      },
      {
        googExperimentalAutoGainControl: {
          exact: true
        }
      },
      {
        googNoiseSuppression: {
          exact: true
        }
      },
      {
        googHighpassFilter: {
          exact: true
        }
      },
      {
        googAudioMirroring: {
          exact: false
        }
      },
      {
        googExperimentalNoiseSuppression: {
          exact: true
        }
      }
    ]
  }
}

chrome://webrtc-internalsで色んなサービスを探すと色々見つかる。

Chromeでだけ有効っぽい

MediaConstraintsImpl.cpp - Code Search

Chromiumのコードサーチでのみ色々見つかる。

• enableDtlsSrtp
• enableRtpDataChannels
• googCpuOveruseDetection
• googCpuOveruseEncodeUsage
• googCpuUnderuseThreshold
• googCpuOveruseThreshold
• googScreencastMinBitrate
• googHighStartBitrate
• googPayloadPadding
• googNoiseReduction
• etc..

chrome://webrtc-internalsにより、videoだけでもこれだけの発掘に成功・・・！

Chromeでだけ有効っぽい・・が

それらしいプロパティは山ほど見つかるけど、

This interface is being deprecated in Chrome, and may be removed from WebRTC too.

とか書いてあるファイルもありよくわからん。（誰かChromiumのコードの追い方教えてください・・）

ただまぁ実際に動いてるから各サービスも使ってるんやろうけど・・。

我々はどうするべきか

触らぬ神に祟りなし！ <- おすすめ

or

自己責任で使う

• どうしても困ってることがあり
• Chromeだけでよくてこれで解決できそうなら
• いつ変わっても消えても泣かないしいつ変なバグを踏んでも泣かないし動かなくても泣かない
• そんな覚悟を持って

Thank you!

• このスライド
• 仕様書: Media Capture and Streams
• 元ネタのブログ記事: getUserMedia()で指定できるMediaTrackConstraintsのよもやま - console.lealog();