WebRTC でスクリーンキャプチャ（動画）をしてみた

はじめに

WebRTC ではカメラからの映像だけでなくスクリーンキャプチャも可能です。イメージとしては Google Hangouts の画面共有のような形です。余り解説を見かけなかったので調べてみましたので紹介します。

デモ

https://html5-demos.appspot.com/static/getusermedia/screenshare.html
- こちらのサイトで体験できます（後述の「準備」の項による設定が必要）。

準備

PC の Chrome で chrome://flags より「getUserMedia() でスクリーンキャプチャのサポートを有効にします。」の項目を有効にします。

もしくは Chrome の起動フラグに「--enable-usermedia-screen-capturing」を付けても構いません。なお、残念ながら Android や iOS の Chrome では未だ使えません（Android の Chrome の chrome://flags では、利用できない試験運用機能に分類されてしまっています）。

コード

以下の様なコードを書きます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WebRTC Test</title>
  <script src="bower_components/jquery/jquery.min.js"></script>
  <script>
    $(function() {
      var video = $('#webcam-movie')[0];
      navigator.webkitGetUserMedia(
        {
          video: {
            mandatory: {
              chromeMediaSource : 'screen',
              minWidth          : 1280,
              maxWidth          : 2560,
              minHeight         : 720,
              maxHeight         : 1440
            }
          }
        },
        function(stream) {
          video.src = window.URL.createObjectURL(stream);
          video.play();
        },
        function(error) {
          console.error(error.code, 'connection failed');
        }
      );
    });
  </script>
</head>
<body>
  <video  id="webcam-movie" width="1280" height="720"></video>
</body>
</html>

カメラやマイクのキャプチャを利用する際は、getUserMedia の第１引数（MediaStreamConstraints）では video / audio のフラグ切り替えを記述（{ video: true, audio: true } 等）しますが、ここでは mandatory を記述してソースを指定しています。なお width / height 周りは省略可能です。