console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

2017年版 getUserMedia()で画面のストリームを取得する

間違ってたら教えてください。

Chrome

バージョン: 60.0.3112.78

あいかわらず要拡張。

例のごとくのこういう組合せ。
自作してもいいし、ありものを使ってもいい。

ただしCanaryだと、`--enable-usermedia-screen-capturing`で起動すれば`screen`のストリームは取れた。

navigator.mediaDevices.getUserMedia({ video: { mandatory: { chromeMediaSource: 'screen' } } })
  .then(stream => {
    // ...
  });

Firefox

バージョン: 54.0.1

フラグ設定とかホワイトリストとか一切いらんくなってた。

navigator.mediaDevices.getUserMedia({ video: { mediaSource: 'window' } })
  .then(stream => {
    // ...
  });

これだけ。

`mediaSource`に指定できるのはこの3つ。

  • `window`
  • `application`
  • `screen`


Nightlyでも一緒。

ただし、`https`でしか使えなくて、`localhost`でも使えない。
普通のカメラは使えるのに。

IE / Edge

たぶん無理。

Safari(TP)

たぶん無理。

まとめ

サポートされてるとは一言では言えない微妙な感じ。

IEとかSafariでも独自のプラグインをインストールすることで使えるようになるみたいなのもあったけど、どうなんやろうコレ。

GitHub - Temasys/AdapterJS: AdapterJS Javascript Polyfill and Tools for WebRTC - Skylink WebRTC