WebRTCでビデオチャット(Firebaseを添えて①)

WebRTC Firebase

WebRTCでビデオチャットを作成しました
最初は普通のシグナリングでやろうと思いましたが、サーバーを立てる気もないし時間もないので、WebサーバーはGitHub Pagesを使い、シグナリングサーバーを使う代わりにFirebaseを使用しました。
半分以上はWebRTCハンズオンとがねこまさしさんのFirebaseで楽々シグナリングからコードをコピペでしてますが、それに少し少し変えてます。

今回は、Firebase周りのすることだけです。(タイトルでできる感じに見えますがすいません）

サイト

f:id:NISHI3:20170520122600p:plain BootStrapを使用してまあまあ見やすいと思うサイトにしました(なにをしてるかわかりませんよね)

シグナリングサーバー

シグナリングにはsocket.ioやWebSocketを使用します。あとは、手動でシグナリングを行うこともできますが、一般的にはWebSocketが多く使われます。
また、ローカルで開発/使用するときはセキュアでなくてもいいですが、外部へ公開するときやhttps://~から取得されたHTML/JavaScriptからWebSocketサーバーに接続する場合は、セキュアでなくてはならないので証明書が必要になります。そこで今回はFirebaseのRealtime Databaseを使用して、シグナリングを行います。

Firebaseでシグナリング！

Firebaseへログインして、プロジェクトを作成しておいてください。

ブラウザでFirebaseを使用するために、ライブラリを読み込みます。前は数個入れなければならなかったですが、現在は下のjsファイルを読み込めば使えます。

<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>

次に、取得した情報を入れてます。

var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  firebase.initializeApp(config);

(たぶん、apiKeyとdatabaseURLだけでいいと思います)

Databaseの構造

Firebaseの構造は、がねこまさしさんのやつを見たほうが早いです！

  • myAppRoot -> アプリのルート
    • multi -> ルート
      • room_*** -> ルームのルート
        • join -> メンバーの振り出し用
        • _broadcast -> ルーム内のブロードキャスト用
        • direct -> 特定メンバー宛てのメッセージ用 自分もはっきりわかってないので実際にやって見てほしいです(たぶん別の記事で書きます)

Firebaseのルール設定

これを忘れることが多分多いと思います(自分も忘れて１週間近くできね〜ってなったので)

{
  "rules": {
    ".read": "auth !=null",
    ".write": "auth !=null",
    "yourAppRoot": {
      "multi": {
        ".read": true,
        ".write": true
      }
    }
  }
}

次回

たぶん、WebRTCでビデオチャット(Firebaseを添えて②)なのでちゃんとビデオチャットをやる予定です（でも、webRTCでのビデオチャットのやり方を書いてなかったのでそれを挟むと思います）