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

JavaScript
By: Gabriela Pinto

チャットワークのビデオ会議機能で使われている技術ということで調べてみました。
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 ]

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

 

サポート状況

今のところChromeとFirefoxで実装が進められているそうです。

◯ : Google Chrome 27, Firefox 21
△ : Opera 12(映像のみ出力され音声はダメでした)
✕ : Internet Explorer, Safari

 

コメント

タイトルとURLをコピーしました