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

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のルール設定

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

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

次回

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

5/8

GWが終わったので、今週から週イチで書いていきますマル

せっかくなのでGWやったこと 4/28~5/3 岡山

鳥取砂丘でドローン飛ばした

帰りに寄った

コレ以降は、病院と家でゴロゴロしてた

明日から大学なので頑張る

Firebase for Swift3(導入)

前にIonic2のFirebase導入記事(こちら)を書いたので、今度はSwift3の導入記事です

といっても、公式ドキュメントを見た方がいいです
(公式ドキュメント => Firebase)

Firebaseプロジェクトに追加(console)

Firebase Consoleよりプロジェクトを作成します

追加しましたら、console画面でiosアプリにFirebaseを追加を選択します
f:id:NISHI3:20170216124736p:plain

1.Register app

ここで、必要な情報を入れます f:id:NISHI3:20170324134747p:plain

2.Download config file

次にGoogleService-Info.plistをダウンロードして、 Xcode プロジェクトのルートに移動し、すべてのターゲットに追加します

3.Add Firebase SDK

cocoaPodsからFirebaseのライブラリを入れてください。
(cocoaPodsを入れてない人はここでインストールしておきましょう -> CocoaPods.org) 終わったら、 .xcworkspaceを開いておきましょう

4. 初期化コードを追加

あとは、 AppDelegateクラスに初期化コードを入れておきましょう

これで、Firebaseの導入は終了です

ionic serve時のブラウザ指定

Mac環境で数分躓いて、できたので備忘録

ionic serve --browser "google chrome"

FirefoxSafariOperaは下記のコマンドで行ける

ionic serve -w (Firefox/Safari/Opera)

Chromeだけ行けなかったので、分かる人教えてください!

追記

Mac Book Air(13-inch, Early 2015)
CPU: i5 1.6GHz
RAM: 8GB
SSD: 256GB
OS: macOS Sierra

Ionic2+ng2-charts(導入)

概要

数日コレで悩んでやっとできたので、備忘録です。
ng2-chartsとは棒グラフとか円グラフとかを表示できるやつです。

github.com

ng2-chartsのインストール

npm install --save ng2-charts

node_modulesにchart.js/ng2-charts/ができるはずです(たぶん)

app.module.tsに追加

import { ChartsModule } from 'ng2-charts/ng2-charts';
import '../../node_modules/chart.js/dist/Chart.bundle.min.js';

// In your App's module:
imports: [
   ChartsModule
]

import { ChartsModule } from 'ng2-charts/ng2-charts';だけだとエラーができるので、import '../../node_modules/chart.js/dist/Chart.bundle.min.js';を追加することでちゃんと動くようになります。

sample

f:id:NISHI3:20170223112808p:plain

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <div style="display: block">
      <canvas baseChart
                  [data]="doughnutChartData"
                  [labels]="doughnutChartLabels"
                  [chartType]="doughnutChartType"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"></canvas>
    </div>
</ion-content>
import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }
// Doughnut
  public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
  public doughnutChartData:number[] = [350, 450, 100];
  public doughnutChartType:string = 'doughnut';

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }
}

Firebase for Ionic2(導入)

(自分用の記録)
1.ionic2のプロジェクトを作成
2.npmでFirebaseを入れる

npm install angularfire2 --save

3.app.module.ts

import { AngularFireModule } from 'angularfire2';

とFirebase consoleのウェブアプリにFirebaseを追加からConfig部分を f:id:NISHI3:20170216124736p:plain

export const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: ""
};

と@NgModuleのimports内に

imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig)
  ],

導入終了

(Sample)

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { AngularFireModule } from 'angularfire2';

export const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: ""
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

追記 npm installでangularfire2にするの忘れててエラーインストールできてなかった人がいたかもしれないのですいません