🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

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

WebRTC JavaScript

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

Chrome

バージョン: 60.0.3112.78

あいかわらず要拡張。

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

{
  video: {
    mandatory: {
      chromeMediaSource:   'desktop',
      chromeMediaSourceId: '', // 取れたscreenId
  },
}

`desktop`固定でも、拡張からscreenIdをもらうときにダイアログで選べるので関係ないっぽい。

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

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

指定できるのは`desktop`か`screen`で、それ以外を指定するとエラーになる。
ただどっちを選んでもアラートが出て共有しますか？ってなるだけで、どのウィンドウとかは選べないし、外部モニタに出してたとして2つのスクリーンから選びたくても選べない謎・・(˘ω˘ )

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