「ノッカー(入室確認)」WebRTCサンプル(Agora.io Video、Real-time Messaging SDK利用)

#概要
今回は[Agora.io Video SDK](https://docs.agora.io/en/Video/product_video?platform=All%20Platforms)、[Agora.io Real-time Messaging SDK](https://docs.agora.io/en/Real-time-Messaging/product_rtm?platform=All%20Platforms)を利用したノッカー(入室確認)サンプルをご紹介します。

例としては、Web面接で学生が入室する前にノック(入室確認)をし、面接者が許可をして入室するシーンなどに利用できると思います。

Web面接の部分はVideo SDK、ノック(入室確認)/入室許可などの内部メッセージをやり取りする部分はReal-time Messaging SDKで実現しています。

なお、Video SDKは[Next Generation(バージョン4)](https://agoraio-community.github.io/AgoraWebSDK-NG/en/)を利用します。

##サンプル
[こちら](https://github.com/fu-jimoto/AgoraIO-WebRTC-Knocker)よりダウンロードしてください。
(※本サンプルは[Video SDK(バージョン4)サンプル](https://github.com/AgoraIO-Community/AgoraWebSDK-NG/tree/master/Demo/basicVideoCall)をベースに作成しています。)


##実装イメージ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/3aeef5e6-d87f-f0b4-a334-9d684b1b5206.png" width="80%">
**[実装イメージの説明]**
①面接者があらかじめ入室しておきます。
②学生がノック(入室確認)します。
③面接者が入室を許可します。
④学生が入室します。
→面接を開始します。

##画面イメージ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/7666f6c6-0536-c482-82ae-542a071344bd.png" width="80%">

<dl>
  <dt>・AppID/Token/Channel</dt>
  <dd>入室時の入力項目</dd>
  <dt>・Interviewer/Student</dt>
  <dd>Interviewerは面接者、Studentは学生どちらかを選択</dd>
  <dt>・Join</dt>
  <dd>入室ボタン</dd>
  <dd>Interviewerの場合はそのまま入室</dd>
  <dd>Studentの場合は入室せず、Interviewerにノック(入室前確認)を送付</dd>
  <dt>・Leave</dt>
  <dd>退室ボタン</dd>
  <dt>・Student Id</dt>
  <dd>ノック(入室前確認)を送付したStudentのIDをセット(Interviewerのみ利用)</dd>
  <dt>・Invitation</dt>
  <dd>招待ボタン</dd>
  <dd>Studentを招待(Interviewerのみ利用可能)</dd>
  <dt>・Status</dt>
  <dd>InterviewerとStudentの内部メッセージのステータスを表示</dd>
</dl>

##シーケンス
入室中の面接者に学生がノック(入室確認)をして入室するまでの、
Real-time Messaging SDKのメッセージング処理の流れを記載しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/c1cb7975-d95c-272b-135b-f2969b4c3c29.png" width="75%">

※シーケンス図に記載したAPIについては下記リファレンスを参照してください。
・[Agora RTM Web API リファレンス](https://docs.agora.io/en/Real-time-Messaging/API%20Reference/RTM_web/index.html)
・[Video SDK Web(Next Generation) API リファレンス](https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/)


##開発環境
・agora.io Video SDK（Web）※Next Generation(バージョン4)
・Real-time Messaging SDK（Web）

##Real-time Messaging SDKの実装部分

・メッセージの送信

```javascript
function sendMessageToPeer(localMessage,id){
  //メッセージの送信
  rtm.clientRtm.sendMessageToPeer({text:localMessage}, id).then(function(){

  }).catch(function(err){
    console.log("AgoraRTM client failed to sending role" + err);
  });
}
```

・メッセージの受信

```javascript
function receiveFromPeerMessage(){

  //メッセージの受信(MessageFromPeer)
  rtm.clientRtm.on('MessageFromPeer', function (sentMessage, senderId) {

    //ノック(入室確認)の場合
    if ((sentMessage.text == senderId + ":requested") && (options.uid == host)){
       var res = confirm("Are you sure " + senderId + " to be joined?");
      (res == true) ? permit(senderId) : deny(senderId);
      return;
    }

    //許可の場合
    if (sentMessage.text == options.uid + ":permitted"){
      join();
      return;
    }

    //不許可の場合
    if (sentMessage.text == options.uid + ":denied"){
      alert("Please wait for a while as we will invite you from the host.");
      return;
    }

  });

}
```

・招待の送信

```javascript
async function invitation () {
  //招待先の設定
  rtm.localInvitation = await rtm.clientRtm.createLocalInvitation($("#audienceId").val());
  //招待の送付
  await rtm.localInvitation.send();
}
```

・招待の受領/拒否

```javascript
function receiveFromPeerMessage(){
  //招待の受信
  rtm.clientRtm.on('RemoteInvitationReceived', function (remoteInvitation) {
    var res = confirm("You got an invitation from the host. Do you want to enter the room?");
    if (res == true){
      remoteInvitation.accept();  //受領
      join();
    }else{
      remoteInvitation.refuse();  //拒否
    }
  });
 }
```


##動作確認

動作を確認します。

**１. 面接者が入室する**
（AppID、Channelの入力、Intervierwerを選択し、Joinをクリック）
[面接者側]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/e4154d15-1c75-1d61-4c87-fd4fe566f543.png" width="50%">

**２. 学生がノック(入室確認)を送る**
（AppID、Channelの入力、Studentを選択し、Joinをクリック）
[学生側]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/de9bfa76-0222-c832-4666-d30ed7d379d6.png" width="50%">

**３. 面接者にノック(入室確認)が届く**
[面接者側]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/cd9f2de0-dad2-f613-c8a7-2bcb8c314798.png" width="50%">
※ダイアログをOKすると入室許可、キャンセルすると入室不許可

**４.面接者が入室を許可する**
(面接者はダイアログをOKする)

学生側で入室が開始し、面接者と対面する。
[学生側]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/b5dbd750-2aff-4268-ecd7-dad7c8f33fbf.png" width="50%">
※面接者がダイアログをキャンセル(不許可)にした場合は５へ

**５.面接者が入室を不許可にする**
学生側で不許可を伝えるダイアログが表示される。
[学生側]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/5dd9dcdf-bf6a-80c5-a5a9-1170ad0588c0.png" width="50%">

**６. (数分後)面接者から学生へ招待を送る**
(面接者はStudent IDを選択し、Invitationをクリック)
[面接者側]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/88dc6885-7f02-afcc-822f-7c76f0e0218f.png" width="50%">

**７. 学生が招待を受領し、入室する**
(学生はダイアログをOKする)
[学生側]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/de215bdb-f11c-7819-a3f9-ceeefe175b47.png" width="50%">
学生側で入室が開始し、面接者と対面する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/0f5be805-f735-0dc2-eea2-ffc8dcbdde1f.png" width="50%">
ノッカー(入室確認)と入室ができました。

#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=c25ba3bceba928d632e8)
[<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=c25ba3bceba928d632e8)