お問い合わせ ・資料請求

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

  • サンプル
  • WebRTC
  • Agora.io
  • Web面接

概要

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

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

サンプル

実装イメージ

[実装イメージの説明]
  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する)

[学生側]

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

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

Agora SDK イメージ
Agora SDK

大規模・安価・すぐに使える
ライブ配信・ビデオ通話・音声通話SDK

 

Agoraに関するお問い合わせ

03-4405-2688

受付時間:平日10:00〜18:00

先頭へ戻る