agora.io で オンライン○○のグループ通話を実装する

# agora.io

agora.io はサービス内に簡単にオンライン通話機能を実装するための SDK を提供しています。
例えば、現在マッチングアプリを運営しているとすると、agora.io の SDK を使うことでそのサービスに簡単にビデオ通話機能を付けることができます。
類似サービスに NTT Communications が提供している SkyWay などがありますが、この種の高速なデータ通信を実現する規格のことを WebRTC(Web Real-Time Communication) といいます。
agora.io は中国系の企業が運営しているのがネックに感じますが、日本では5000社のサービス導入実績がある [V-CUBE](!https://jp.vcube.com/case?c=service&k=service_15) が代理店となっているので信頼性は高いと思われます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/54635b12-12f1-1f4c-a715-77634fc2894a.png)

参考：https://www.agora.io/en/

## 特徴
便利な機能が沢山あることが大きな特徴です。例えば写真にあるようにグループ通話やARを簡単に実装するための機能も付いています。ほかにも、ゲーム向けだと 3Dスペシャルオーディオといったイヤホンをしているときに聞こえてくる方向を制御するための機能も付いています。
すごく未来を感じますね！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/2c639e91-5cec-324e-ad46-d956ef4a9e4d.png)

参考: https://www.agora.io/en/social/

# 実装

agora.io には 10000分/月 の無料利用枠が用意されているのでほぼ無料で始められます。
実装に入る前にこのブログで紹介する範囲について確認しておいてください。
基本サンプルを動かしているだけなので簡単そうに見えますが、自分が試したときは落とし穴が多く大変だったのでそれを共有したいとおもいます。

 * agora.io の公式 git から落としてサンプルを起動できる
 * firebase にホスティングしてほかの端末がグループ通話に参加できるようにする
 * 表示されている映像のサイズと形を編集できるようにする

※今回の完成イメージ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/39c32798-f1e4-ea1a-d0bf-5031558b00dd.png)


## agora.io 公式 git からのクローン
agora.io の[公式git](!https://github.com/AgoraIO/Basic-Video-Call) からサンプルコードをクローンします。

```
git clone https://github.com/AgoraIO/Basic-Video-Call.git
```

## フォルダの展開
git をクローンするとすごくたくさんのサンプルコードがありますが、実際に今回使用するのは `OpenVideoCall-Web`　のみです。
フォルダ `Basic-Video-Call -> Group-Video -> OpenVideoCall-Web` といった構成になっているのでお好みのエディターで開きましょう。ちなみに私は [VSCode](!https://code.visualstudio.com/) を使用します。

## agora.io の認証情報のセッティング
まず、`src/Utils/Setting.js` を開いてください
そこにある `APP_ID` と `Token` を公式サイトからもらってくることでオンライン通話が可能になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/f3879f3b-24dd-8839-371a-8f4f70e02056.png)

### agora.io Developer Center の登録

[agora.io Developer Center](!https://docs.agora.io/en) からサインアップします。
必要事項を記入していきますが、メールアドレス、電話番号だけしっかり書いておけば大体おｋです。
また、**登録が終わるとメールが届くので確認して URL から認証してください**。


## APP ID と TOKEN の取得
まずは New Project から新しいプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/9ecf52b5-5a18-aebf-c352-79946e9898f1.png)

Project Name を記入し APP ID + APP Certificiate + Token を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/d90e5429-b9ff-b9d2-c882-731ca4ba76ac.png)

ここに表示されている APP ID をコピーして `Setting.js` の貼り付けます。 


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/81b07712-af37-b852-57a9-d6c307f7ab5e.png)


Stage を Live に変更して Save を押し、 Features にある `Generate temp token` を選択します。
そのあと表示される画面に Channel Name を記入し` Generate Temp Token` を押すとトークンが発行されます。
ちなみにこの再記入する Channel Name がトークルームの名前になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/07ea8e4e-4e9c-94e4-592c-b759622ac9f8.png)


ちなみにこの方法ではトークンの認証期限が1日しか持たないので注意してください。

APP_ID と同様に発行したTOKEN を `setting.js` に貼り付けます。

``` javascript:setting.js
export const APP_ID = "ここにAPP_ID";

// Assign Token to null if you have not enabled app certificate
export const Token = "ここにTOKEN";

```

コマンドラインで次のコマンドを実行します。
この際パスが `\OpenVideoCall-Web` にあることを確認してください。

```
npm install
npm run start
```

すると `http://localhost:8080/`　でサイトが立ち上がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/666951fd-cea3-aabf-b162-685785b616f9.png)

先ほど入力した Channel Name を入力し join します。
その次の画面で Quick Join を押すと次のような画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/fdd61292-8796-d856-c49f-ba8879a26e99.png)

これでローカル上で agora.io による実装は完了しました。

## FireBase でのホスティング
しかし、このままではほかのデバイスからアクセスができないのでこれから FireBase にホスティングしていきます。

FireBase のアカウントがない方は下記の URL から作成してください。
https://firebase.google.com/?hl=ja

下記のコマンドを実行しログインと初期化を実行してください

```
firebase login
firebase init
```

hosting をスペースで選択してエンターを押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/0016ef63-d66b-4dc2-2d26-ed5097543cc4.png)

Create a new project を選んでエンター

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/93dcb394-51b5-14ce-7bc0-3f7e045507c2.png)

プロジェクトの id を入力します。ほかのものと重複しなければなんでもいいので自由に記述してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/56173a6e-0888-6281-b60e-e955b5146036.png)

あとはただエンターを押してもらって大丈夫です。(y/n)を問われたらyを押してください。

最後に `firebase.json` を開いて `"public": "dist"` に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/d5d33f40-16f6-ecc8-129b-b7b3c18576ec.png)

下記のコマンドを実行してビルド&デプロイします

```
npm run build
firebase deploy
```

デプロイがおわったら画像で指定した URL を開いて local上と同じように動作することを確認してみましょう。
URL を開く際は Chrome がオススメです。(他のブラウザでの動作は未確認のため)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/8aa448d0-bde6-8b79-c986-b68e3f1f2109.png)

スマホからもアクセスして確認しました。
こんな感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/2778a44e-2779-a1e0-4284-2060f10e2a09.png)

# 画面の編集

それでは少しこの表示画面を少しオシャレにしてみましょう！

`src/pages/meeting/meeting.scss` を開いてください!

ファイルの最下部まで行き、height,width,borderrudius を変更します。
これにより表示画面のサイズと形を変えることができます。

```scss:meeting.scss
  .video-item {
    border-radius: .5rem;
    border: .14rem $light-blue solid;
    background: url('../../assets/images/avatar.png') center no-repeat;
    height: 350px;
    width: 350px;
    border-radius: 50%;
    position: relative;
    div {
      border-radius: 50%
    }
  }
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274030/df95bc68-d209-e242-67bc-f932e4bea6e7.png)

画面に関しては基本的には grid で制御されてますが aspect を検出すると表示画面が変わるようになっているので、スマホ画面になるとすこし違和感のあるデザインになります。
その辺の編集方法は次回があれば説明しようかと思います。

# 最後に

今回はざっくりと agora.io の導入について説明しました。
オンラインフィットネスやオンライン勉強会など色んなサービスに活用できると思います。
画面編集やその他の機能に関してまだまだ説明しきれないことが沢山あるので人気があれば今後も更新していきたいです。
このサイトが役に立ったなら LGTM で教えてください！