ビデオ通話中に(時間制限後などに)退室させるサンプル

# 概要
ビデオ通話中に(時間制限後などに)退室させるサンプルについてご紹介します。

パターンとしては4つになります。

１. クライアント自身のタイマーで追い出す方法
２. Real-time messaging SDKのテキスト送受信で追い出す方法
３. Tokenの有効期限で追い出す方法
４. RESTFul APIで追い出す方法


サンプルリンクは[こちら](https://github.com/fu-jimoto/AgoraIO-WebRTC-Leave)をご利用ください。
（[agoraLeaveSample_v4](https://github.com/fu-jimoto/AgoraIO-WebRTC-Leave/tree/main/agoraLeaveSample_v4)）


# １.クライアント自身のタイマーで追い出す方法

クライアント自身のタイマーで追い出す方法になります。

### サンプル
サンプルの「CASE1_Timer」を利用します。

### 実装
JavaScriptのタイマー処理を利用して、
タイムアウト時に退室するよう実装します。

```javascript:index.js
//タイムアウト
function timeOut(){
  console.log("timeOut");
  leave();
};

//タイマー設定
function startTimer(sec){
  console.log("startTimer:" + sec);
  tm = setTimeout(timeOut, sec);
}

//タイマー削除
function clearTimer(){
 console.log("clearTimer");
 clearTimeout(tm);
}
```

### 動作確認
1. サンプルを起動し、入室します。
2. StartTimer(60)ボタンをクリックし、タイマーを開始（60秒）します。
4. (60秒後)タイムアウトします。
5. 退室処理が行われます。

<サンプル画面/コンソール(F12)>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/3309c99b-42da-5f28-2d12-76223f681e3a.png" width="100%">

# ２.Real-time messaging SDKのテキスト送受信で追い出す方法

Real-time messaging SDKを利用して他拠点にメッセージ(退室依頼を示す)を送り、
それを受け取った拠点を追い出します。

### サンプル
サンプルの「CASE2_RTM」を利用します。

### 実装
メッセージ送信/受信の実装部分になります。

```javascript:index.js
//実行ボタンクリック
function leaveOfremote () {
  sendChannelMessage(prepMessage("leave",options.remoteuid));
}

//送信メッセージ編集
function prepMessage(msg,id){
  console.log(id + ":" + msg);
  return id + ":" + msg;
}

//メッセージ送信部分
function sendChannelMessage(localMessage){
  rtc.channelRtm.sendMessage({text:localMessage}).then(function(){
    console.log("AgoraRTM client succeed in sending channel message: " + localMessage);
  }).catch(function(err){
    console.log("AgoraRTM client failed to sending role" + err);
  });
}

//メッセージ受信部分
function receiveChannelMessage(){
 
  rtc.channelRtm.on("ChannelMessage", function (sentMessage, senderId) {
    console.log("AgoraRTM client got message: " + JSON.stringify(sentMessage) + " from " + senderId);

    console.log(sentMessage.text == options.uid + ":leave");
    if (sentMessage.text == options.uid + ":leave"){
      leave();
      logoutRtm();
    }

  });
}
```

### 動作確認
1. 1拠点目が入室します。
2. 2拠点目が入室します。
3. 1拠点目からLEAVE(*下記イメージ参照)ボタンをクリックします。
4. 2拠点目が1拠点目からのメッセージを受信後、退室します。

<サンプル画面/コンソール(F12)>
・1拠点目(LEAVEボタンクリック時)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/1c0c40e4-6abb-8c7c-f62c-ebc2c248f950.png" width="100%">

・2拠点目(退室時)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/d41b8303-ff1f-42f6-64c6-68d7d23d12d9.png" width="100%">

# ３.Tokenの有効期限で追い出す方法
Tokenの有効期限が切れた際に追いだす方法です。
※agora.ioのTokenについて詳しく知りたい方は[**agora.io の Security Key について**](https://qiita.com/v-cube/items/c43dd8b0241f03fedc1d)をご参照ください。

### サンプル
サンプルの「CASE3_Token」を利用します。

### Token取得方法

1.Tokenを取得する[agoraToken取得用サンプルコード(PHP)](https://github.com/AgoraIO/Tools/tree/master/DynamicKey/AgoraDynamicKey/php)をダウンロードします。

2./sample配下にあるRtcTokenBuilderSample.phpに値を設定します。

```RtcTokenBuilderSample.php
$appID = "*Consoleより取得&設定*";
$appCertificate = "*Consoleより取得&設定*";
$channelName = "demo";
$uid = 12345;
$uidStr = "12345";
$expireTimeInSeconds = 60;
```
3.http実行環境でphpを実行します。
レスポンスとしてTokenが画面に出力されます。(それを利用します)

### 実装

```javascript:index.js
function handleTokenPrivilegeDidExpire() {
    leave();
    console.log("onTokenPrivilegeDidExpire")
}
```

### 動作確認
1. Tokenを取得します。
2. TokenでChannelに入室します。(uid：12345)
4. Token有効期限が切れ、退室します(追い出されます)。

<サンプル画面/コンソール(F12)>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/b96b8276-ecca-925d-dd7c-66504691e7bd.png" width="100%">



# ４．RESTFul APIで追い出す方法
RESTFul API(kicking-rule)をコールして追い出す方法になります。

※agoraのRESTFul APIをご存知ない方は[**agora.io Dashboard RESTful APIの利用例**](
https://qiita.com/v-cube/items/ff945c246cfcec489948)をご参照ください。

### サンプル
サンプルの「CASE4_RESTfulAPI」を利用します。

### RESTful API
RESTFul APIの[*Ban Users at the Server*](https://docs.agora.io/en/Agora%20Platform/dashboard_restful_communication?platform=All%20Platforms#ban-users-at-the-server)(ユーザーの入室制限)を利用します。

このAPIをコールすると、指定したChannelへの入室が一定時間禁止されます。
Channel(必須)とユーザID、IPアドレスの粒度で指定できます。
(*各Recording SDKの録画用ユーザ(uid)を追い出しもできます)

### 実装
```javascript:index.j
function handleConnectionStateChange(curState,revState,reason) {
  console.log(curState + ":" + reason);
  //ユーザ入室制限
  if (reason == "UID_BANNED"){
    leave();
  }
}
```

```banrule.php
<?php
require 'params.php';

$url = $baseUrl.'/v1/kicking-rule/';

$params = [
  'appid' => '***',   //APPID
  'cname' => 'demo',  //Channel名
  'uid' => '',  //ユーザID
  'ip' => '',   //IPアドレス
  'time' => 3,
  'privileges' => ['join_channel']
];
$json_enc = json_encode($params);

$header = array();
$header[] = 'Content-type: application/json;charset=utf-8';
$header[] = 'Authorization: Basic '.base64_encode($plainCredentials);

$curl = curl_init($url);
curl_setopt($curl, CURLOPT_POST, TRUE);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_POSTFIELDS, $json_enc);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
var_dump($response);

curl_close($curl);
```

### 動作確認
1. Channelに入室します。
2. banrule.phpをコールします。
3. Channelから退室します(追い出されます)。
4. 再度Channelに入室しようとしても、入室制限中は、入室できません。

<サンプル画面/コンソール(F12)>
・banrule.phpコール時(追いだし)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/11d3047f-e43e-91bd-9719-2b121e240254.png" width="100%">

・入室禁止中(再入室不可)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/5dbfb7c5-3738-dd85-d9f4-c74b87c370c3.png"  width="100%">

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