--- title: {{ page_meta.name }}｜{{ group.public_title }}｜{{ site_settings.logo_alt }} description: ビデオ通話やライブ配信を簡単に実装できるAgora SDK。ビデオ通話中に(時間制限後などに)退室させるサンプルについてご紹介します。 --- [Agora Go Real ](https://jp.vcube.com/sdk/blog) # [{{ page_meta.name }}｜{{ group.public_title }}｜{{ site_settings.logo_alt }}](https://jp.vcube.com/sdk/blog/implementation-exit.html) 作成者: [ブイキューブ](https://jp.vcube.com/sdk/blog/author/v-cube)｜May 19, 2022 3:43:26 AM ## サンプル - [こちら](https://github.com/fu-jimoto/AgoraIO-WebRTC-Leave)をご利用ください。 （バージョン3は[agoraLeaveSample_v3](https://github.com/fu-jimoto/AgoraIO-WebRTC-Leave/tree/main/agoraLeaveSample_v3)、バージョン4は[agoraLeaveSample_v4](https://github.com/fu-jimoto/AgoraIO-WebRTC-Leave/tree/main/agoraLeaveSample_v4)） 以降は、バージョン4用サンプルで説明しています。 ## １.クライアント自身のタイマーで追い出す方法 クライアント自身のタイマーで追い出す方法になります。 ### サンプル サンプルの「CASE1_Timer」を利用します。 ### 実装 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秒）します。 3. (60秒後)タイムアウトします。 4. 退室処理が行われます。 ###### サンプル画面/コンソール(F12) ## ２.Real-time messaging SDKのテキスト送受信で追い出す方法 Real-time messaging SDKを利用して他拠点にメッセージ(退室依頼を示す)を送り、 それを受け取った拠点を追い出します。 ### サンプル サンプルの「CASE2_RTM」を利用します。 ### 実装 メッセージ送信/受信の実装部分になります。 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ボタンクリック時) - 2拠点目(退室時) ## ３.Tokenの有効期限で追い出す方法 - Tokenの有効期限が切れた際に追いだす方法になります。 ※agora.ioのTokenについて詳しく知りたい方は[agora.io の Security Key について](https://jp.vcube.com/service/agora/developer/implementation/1601.html)をご参照ください。 ### サンプル サンプルの「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が画面に出力されます。(それを利用します) ### 実装 index.js ``` function handleTokenPrivilegeDidExpire() { leave(); console.log("onTokenPrivilegeDidExpire") } ``` ### 動作確認 1. Tokenを取得します。 2. TokenでChannelに入室します。(uid：12345) 3. Token有効期限が切れ、退室します(追い出されます)。 ###### サンプル画面/コンソール(F12) ## ４．RESTFul APIで追い出す方法 - RESTFul API(kicking-rule)をコールして追い出す方法になります。 ※agoraのRESTFul APIをご存知ない方は[agora.io Dashboard RESTful APIの利用例](https://jp.vcube.com/service/agora/developer/implementation/1501.html)をご参照ください。 ### サンプル サンプルの「CASE4_RESTfulAPI」を利用します。 ### RESTful API - RESTFul APIの[Banning rule management](https://docs.agora.io/en/Agora%20Platform/dashboard_restful_communication?platform=All%20Platforms#banning-rule-management)(ユーザーの入室制限)を利用します。 このAPIをコールすると、指定したChannelへの入室が一定時間禁止されます。 Channel(必須)とユーザID、IPアドレスの粒度で指定できます。 (*各Recording SDKの録画用ユーザ(uid)を追い出しもできます) ### 実装 index.j ``` function handleConnectionStateChange(curState,revState,reason) { console.log(curState + ":" + reason); //ユーザ入室制限 if (reason == "UID_BANNED"){ leave(); } } ``` banrule.php ``` '***', //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コール時(追いだし) - 入室禁止中(再入室不可) [そのほか、最新の実装例・サンプルコード記事はこちら](https://qiita.com/v-cube) [完全な記事を表示](https://jp.vcube.com/sdk/blog/implementation-exit.html) ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "ブイキューブ" }, "dateModified" : "2022-05-19T03:43:26.342Z", "datePublished" : "2022-05-19T03:43:26Z", "headline" : "ビデオ通話中に(時間制限後などに)退室させるサンプル", "image" : { "@type" : "ImageObject", "height" : 630, "url" : "https://1970584.fs1.hubspotusercontent-na1.net/hubfs/1970584/solution/sdk/blog/common/agora_blog_ogp.png", "width" : 1200 }, "mainEntityOfPage" : "https://jp.vcube.com/sdk/blog/implementation-exit.html", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : 60, "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png", "width" : 60 }, "name" : "Agora Go Real" } } ```