WebRTCでビデオチャットアプリ作成① メディア情報の取得

WebRTCを使ってビデオチャットアプリ作成。
何回かに分けてアップします。

基本的な映像・音声の通信に加えてファイル転送、
複数人での通信、NAT超え対応あたりまでやりたいと思います。

環境は以下です。
OS: AWSのEC2でUbuntuを利用
Webサーバ : Tomcat
ブラウザ: Chrome

OSやWebサーバは何でも良いですが後で会議室機能を作りたくなるかも知れないので
Tomcatにしておきます。

事前準備

AWS上でJDK8とTomcat7をインストールします。

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer
sudo apt-get install tomcat7

/etc/default/tomcat7 でJAVA_HOMEを設定

JAVA_HOME=/usr/lib/jvm/java-8-oracle

Tomcatの起動・終了・再起動

sudo /etc/init.d/tomcat7 start
sudo /etc/init.d/tomcat7 stop
sudo /etc/init.d/tomcat7 restart

Tomcatの設定ファイルは /etc/tomcat7、
CATALINA_BASEは /var/lib/tomcat7
CATALINA_HOMEは /usr/share/tomcat7 です。

メディア情報の取得

ローカルのカメラ、マイクの情報を取得してブラウザ上で表示します。
対応しているブラウザは以下を参照してください。ここではChromeで動作確認しています。
Can I use... Support tables for HTML5, CSS3, etc

カメラやマイクの情報を取得するには getUserMedia を利用します。

    // メディア情報の取得
    navigator.getUserMedia( {
        video: true,  // ビデオ情報取得を指示
        audio: true,  // 音声情報取得を指示
      }, 
      // メディア情報取得 成功／失敗時のコールバック
      gotUserMedia, didNotGetUserMedia
    );

第１引数でどのメディア情報を取得するかを指定します。
ここではビデオ、音声情報の取得を指定しています。
第２、第３引数はメディア情報取得に成功k失敗した場合のコールバック指定です。

ビデオの最小・最大サイズや最低限のフレームレート、
音声フィルタといった制約（条件）を指定する事も出来ます。

制約を指定するには constraints オブジェクトを利用して以下のように指定します。
このように指定した場合、取得したMediaStreamオブジェクト全体に制約が反映されます。

    // メディア情報の取得
    navigator.getUserMedia( {
      video: {
        "mandatory": {
          "minWidth": 500,
          "minHeight": 400,
          "maxFrameRate": 30,
        },
        "optional": [
          { "minFrameRate": 5 }]
      },
      audio: {
        "mandatory": {
          "googEchoCancellation": true,
          "googAutoGainControl": true,
          "googNoiseSuppression": true,
          "googHighpassFilter": true
        },
      },},
      // メディア情報取得 成功／失敗時のコールバック
      gotUserMedia, didNotGetUserMedia
    );

"mandatory"は必須の制約、 "optional"は任意の制約を意味し、
必須で指定した制約は満たされない場合、基本的にはエラーが発生します。
任意で指定した制約は「可能であれば制約をかける」という意味なので
満たされない場合でもエラーは発生しません。

なので、サービスとして最低限必要なフレームレートは"mandatory"で指定し、
快適な映像を見るために出来れば欲しいフレームレートは"optional"で指定する
といった形になります。

サンプルソース

とりあえず自PCのカメラ映像を表示するだけですが、
適当なWebサーバに配置して確認してください。

<!doctype html>
<html>
  <head>
    <title>WebRTC Application</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
  </head>
  <body>
    <video id="localVideo" width="640" height="480" autoplay="1" ></video>
 
    <script type="text/javascript">
    // ブラウザ間の差異を吸収する
    navigator.getUserMedia = 
      navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
    window.URL = window.URL || window.webkitURL;

    // メディア情報の取得
    navigator.getUserMedia( {
      video: {
        "mandatory": {
          "minWidth": 500,
          "minHeight": 400,
          "maxFrameRate": 30,
        },
        "optional": [
          { "minFrameRate": 5 }]
      },
      audio: {
        "mandatory": {
          "googEchoCancellation": true,
          "googAutoGainControl": true,
          "googNoiseSuppression": true,
          "googHighpassFilter": true
        },
      },},
      // メディア情報取得 成功／失敗時のコールバック
      gotUserMedia, didNotGetUserMedia
    );

    function gotUserMedia(stream) {
      $("#localVideo")[0].src = window.URL.createObjectURL(stream);
    }
    function didNotGetUserMedia(err) {
      console.log(err);
    }
    </script>
 </body>
</html>

以上

ぷろぐらま

Web、JavaEEの話題を中心に

WebRTCでビデオチャットアプリ作成① メディア情報の取得