2022年05月19日

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

今回はAgora.io Video SDKAgora.io Real-time Messaging SDKを利用したノッカー(入室確認)サンプルをご紹介します。

 

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

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

なお、Video SDKはNext Generation(バージョン4)を利用します。

お役立ち資料ダウンロード

オンライン体験におけるブイキューブの技術サポートのご案内

【図解】システム開発のお手伝い

ブイキューブのソリューションアーキテクトが、寄り添います!
各種ライブ配信システムのアーキテクチャについて わかりやすい構成図にてご紹介!

無料ダウンロード

サンプル

実装イメージ

[実装イメージの説明]
  1. 面接者があらかじめ入室しておきます。
  2. 学生がノック(入室確認)します。
  3. 面接者が入室を許可します。
  4. 学生が入室します。

→面接を開始します。

画面イメージ

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

シーケンス

入室中の面接者に学生がノック(入室確認)をして入室するまでの、
Real-time Messaging SDKのメッセージング処理の流れを記載しています。

※シーケンス図に記載したAPIについては下記リファレンスを参照してください。

開発環境

  1. Agora.io Video SDK(Web)
    ※Next Generation(バージョン4)
  2. Real-time Messaging SDK(Web)

Real-time Messaging SDKの実装部分

メッセージの送信

function sendMessageToPeer(localMessage,id){
      //メッセージの送信
      rtm.clientRtm.sendMessageToPeer({text:localMessage}, id).then(function(){
    
      }).catch(function(err){
        console.log("AgoraRTM client failed to sending role" + err);
      });
    }
    

メッセージの受信

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;
        }
    
      });
    
    }
    

招待の送信

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

招待の受領/拒否

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();  //拒否
        }
      });
     }
    

動作確認

動作を確認します。

1. 面接者が入室する

(AppID、Channelの入力、Intervierwerを選択し、Joinをクリック)

[面接者側]

2. 学生がノック(入室確認)を送る

(AppID、Channelの入力、Studentを選択し、Joinをクリック)

[学生側]

3. 面接者にノック(入室確認)が届く

[面接者側]

※ダイアログをOKすると入室許可、キャンセルすると入室不許可

4.面接者が入室を許可する

(面接者はダイアログをOKする)

学生側で入室が開始し、面接者と対面する。

[学生側]

※面接者がダイアログをキャンセル(不許可)にした場合は5へ

5.面接者が入室を不許可にする

学生側で不許可を伝えるダイアログが表示される。

[学生側]

6. (数分後)面接者から学生へ招待を送る

(面接者はStudent IDを選択し、Invitationをクリック)

[面接者側]

7. 学生が招待を受領し、入室する

(学生はダイアログをOKする)

[学生側]

学生側で入室が開始し、面接者と対面する。

ノッカー(入室確認)と入室ができました。

ガイドブックダウンロード

【すぐ読める!ガイドブック】ビデオ通話・ライブ配信SDK「Agora」

【大充実】通話・配信SDK「Agora」ガイドブック

通話・配信サービス開発や、配信技術のリプレイスを検討中の方、必見の内容です。
Agora SDKの特徴から活用例まで徹底解説!

無料ダウンロード
ブイキューブ

執筆者ブイキューブ

Agoraの日本総代理店として、配信/通話SDKの提供だけでなく、導入支援から行い幅広いコミュニケーションサービスに携わっている。

関連記事

先頭へ戻る