読者です 読者をやめる 読者になる 読者になる

凹みTips

C++、JavaScript、Unity、ガジェット等の Tips について雑多に書いています。

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

HTML5 JavaScript

はじめに

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

デモ

準備

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

もしくは Chrome の起動フラグに「--enable-usermedia-screen-capturing」を付けても構いません。なお、残念ながら AndroidiOSChrome では未だ使えません(AndroidChromechrome://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 の第1引数(MediaStreamConstraints)では video / audio のフラグ切り替えを記述({ video: true, audio: true } 等)しますが、ここでは mandatory を記述してソースを指定しています。なお width / height 周りは省略可能です。

タブのキャプチャ

タブのキャプチャが出来るエクステンションもあります。

おわりに

結構解像度高く設定できるのでデモ用途など色々なところで使えそうです。裏で通信して相手の画面をインタラクティブに操作するみたいなコトもできそうで色々と捗りそうです。