WebRTCのgetUserMediaでビデオ出力する方法

チャットワークのビデオ会議機能で使われている技術ということで調べてみました。
WebRTC(Web Realtime Communications)はHTML5のビデオチャットを可能にするAPIで、これを使うとパソコンにつながってるカメラやマイクから情報を受け取って出力できるそうです。

ソースコードとデモ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <video id="video" autoplay controls></video>
    <script type="text/javascript">
      navigator.getMedia = (
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia
      );
      if (navigator.getMedia) {
        var prop = {
          video: true,
          audio: true,
          toString: function() {
            return 'video, audio';
          }
        };
        navigator.getMedia(
          prop,
          onStream,
          onStreamFailed
        );
      } else {
        alert('エラー: getUserMediaがサポートされていません');
      }
      function onStream(stream) {
        if (!window.URL) {
          window.URL = {};
          window.URL.createObjectURL = function(obj) { return obj; };
        }
        var video = document.getElementById('video');
        video.src = window.URL.createObjectURL(stream);
      }
      function onStreamFailed(err) {
          console.error('エラー: ' + err);
      }
    </script>
  </body>
</html>

[CodePen height=300 show=result href=Bsrtn user=iw3 ]

たったこれだけのソースコードで実現できるってすごいですね。