agora.io  VideoSDKとReal-time MessagingSDKを利用した招待入室

#概要
今回はVideoSDKとReal-time MessagingSDKを利用した招待入室サンプルをご紹介します。
概要としては、各ログインしたユーザを一覧で表示し、その一覧から招待したいユーザを選択し、招待を送ります。招待を受けたユーザは招待元ユーザが用意した部屋（チャネル）に入室することができます。
本サンプルは、agora.ioから提供されているVideoSDK、Real-time MessagingSDKを組み合わせて実現しています。


##サンプル
[こちら](https://github.com/fu-jimoto/AgoraIO-VideoRTMInvite)をご利用ください。
(バージョン3は[AgoraIO-VideoRTMInvite-master-v3](https://github.com/fu-jimoto/AgoraIO-VideoRTMInvite/tree/master/AgoraIO-VideoRTMInvite-master-v3)、バージョン4は[AgoraIO-VideoRTMInvite-master-v4](https://github.com/fu-jimoto/AgoraIO-VideoRTMInvite/tree/master/AgoraIO-VideoRTMInvite-master-v4)）



##実装イメージ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/5a8309d4-f26e-7fbf-190a-9a99ead40aa5.png" width="200%">


##機能一覧
・ログイン
・ユーザ一覧(※ログイン済みユーザのみ)
・招待送付/受領
・入退室
・ログアウト

##画面イメージ
<!--<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/8f007c72-3db7-ab89-9303-639315c2a009.jpeg" width="50%">-->

・ログイン
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/d7678472-e6eb-9d6a-b3d4-7160919db9cf.png"  width="50%">

・ユーザ一覧
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/98574d37-7b5f-f0ab-d1c9-7a746305883d.png" width="50%">

・入室前(招待元)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/9fabbb21-093a-ec4c-5ffc-6110387007b9.png" width="50%">

・入室前（招待先）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/d799062d-094e-6ee5-0b70-4aa54da5abe0.png" width="50%">

・入室後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/b7c164ec-4d31-acd3-9e06-aa4cd0dec19f.png" width="50%">

##シーケンス
ユーザ側の画面遷移とReal-time Messaging SDKのメッセージング処理、およびVideoSDKの入室までのやりとり(流れ)をざっくりと記載したものになります。
(注)ログアウト処理等は一部省略しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/fbee422e-107d-591e-e080-6b509267a817.png" width="65%">

##開発環境
・agora.io VideoSDK（Web）
・Real-time Messaging SDK（Web）

※本サンプルはjquery.mobile-1.4.0を利用しています。
jquery.mobileの機能を使用して1つのHTMLページ内にアンカーのような記述をして複数ページを遷移させています。


##Real-time Messaging SDKの実装部分（メッセージ処理）

・appidの設定

```javascript
//appIdを設定してください。
var appId ="***"; 
```

・インスタンスの生成

```javascript
clientRtm = AgoraRTM.createInstance(appId);
```

・サービスへの接続

```javascript
clientRtm.login({uid: uidRtm}).then(function(){(省略)});
```

・Channelへの入室

```javascript
channelRtm = clientRtm.createChannel(channelRtm);
channelRtm.join().then(function(){ (省略)}
```

・メッセージの送信

```javascript
var localMessage = "RequestCall:" + memberId;　//（例）”RequestCall:998877”
channelRtm.sendMessage({text:localMessage}).then(function(){(省略)});
```
※(例)”RequestCall:998877”の場合、"RequestCall"が招待メッセージ、"998877"が招待先IDとなります。

・メッセージの受信

```javascript
channelRtm.on("ChannelMessage", function (sentMessage, senderId) {
  var msgtxt = sentMessage.text
  var result = msgtxt.split(':');
  console.log("msg1 " + result[0]); //(例) RequestCall
  console.log("msg2 " + result[1]); //(例) 998877 (招待先ID）
  if (result[0]=="RequestCall"){　//"RequestCall"の場合
    if (uidRtm == result[1]){   　//招待先ID(998877)の場合
      //画面遷移処理(省略)
    }
  }
});
```

・退室（ログアウト）

```javascript
channelRtm.leave();　//チャネル退室
clientRtm.logout();　//ログアウト
```

・その他（ログイン済みユーザの取得）

```javascript
var result = new Promise(function(resolve) {
    resolve(channelRtm.getMembers());
})
result.then( function(data){ 
  for(let i = 0; i < data.length; i++) {
    var txt = data[i];
    //ユーザ一覧の更新処理(省略)
  }
} );
```



※メッセージが受信されるとChannelMessage()がコールバックされます。
sentMessageには受信メッセージ、senderIdには招待元IDが入っています。

##Video SDKの実装部分

・インスタンスの生成と初期化

```javascript
var client = AgoraRTC.createClient({ mode: "live", codec: "vp8", role:"host" });
```

・Channelへの入室

```javascript
async function join() {
　/*省略*/
  [ options.uid, localTracks.audioTrack, localTracks.videoTrack ] = await Promise.all([
    // join the channel
    client.join(options.appid, options.channel, options.token || null,options.uid),
    // create local tracks, using microphone and camera
    AgoraRTC.createMicrophoneAudioTrack(),
    AgoraRTC.createCameraVideoTrack()
  ]);
　/*省略*/
}
```

・Track追加時

```javascript
async function subscribe(user, mediaType) {
  const uid = user.uid;
  // subscribe to a remote user
  await client.subscribe(user, mediaType);
  console.log("subscribe success");
  if (mediaType === 'video') {

    if ($('div#video #agora_remote' + uid).length === 0) {
      $('div#video').append('<div id="agora_remote' + uid + '" style="float:left; width:810px;height:607px;display:inline-block;"></div>');
    }
    user.videoTrack.play('agora_remote' + uid);
  }
  if (mediaType === 'audio') {
    user.audioTrack.play();
  }

}

```

・退室

```javascript
async function leave() {
  await client.leave();
}
```


##動作確認

動作を確認してみます。
（注）モバイルデザインのため、PCの場合はブラウザの幅を適宜見やすいように調整してください。

###１. 初期表示とログイン
uid(ユーザ名）を入力し、Loginボタンをクリックします。（※uidは英数10文字以内）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/d7678472-e6eb-9d6a-b3d4-7160919db9cf.png" width="50%">

###２. ユーザ一覧
 ２-１.（ログイン後の）ユーザ一覧
 ログインしたユーザを表示しています。※"(you)"と記載しているのは自分になります。
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/0294729b-cccf-b2a5-24e8-789c7af903c0.png" width="50%">

 ２-２.（別のユーザがログイン後の）ユーザ一覧
”998877”が入室したのでユーザ一覧に追加されています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/98574d37-7b5f-f0ab-d1c9-7a746305883d.png" width="50%">

※ユーザ一覧の同期
Refreshボタンをクリックすると、最新のユーザ情報に同期します。

###３. 招待の送付
招待元(123ABC)が招待先(998877)に招待を送ります。

　３-１.招待元(123ABC)のユーザ一覧で”998877”をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/c0a319c3-4c6f-3731-afd6-2b6fca8eb88d.png" width="50%">

　３-２.招待元(123ABC)の画面が入室画面に切り替わります。
【招待元(123ABC)】
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/6044580e-af3f-4234-6d81-dd6dbb5e75be.png" width="50%">

###４. 招待の受領
招待先（998877）に招待が届きます。
【招待先（998877）】
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/d799062d-094e-6ee5-0b70-4aa54da5abe0.png" width="50%">

###５. 入室
招待元、招待先がそれぞれ入室します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/b7c164ec-4d31-acd3-9e06-aa4cd0dec19f.png" width="50%">


招待入室ができました。


#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=83cc791304ae18f1440b)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=83cc791304ae18f1440b)