More than 3 years have passed since last update.

ライブ配信時の「受講者発言リクエスト」WebRTCサンプル（Agora.io Video、Real-time Messaging SDK利用）

Last updated at 2021-03-26Posted at 2020-03-31

概要

今回はAgora.io Video SDK、Agora.io Real-time MessagingSDKを利用したライブ配信サービスでの「受講者発言リクエスト」機能のWebRTCサンプルをご紹介します。

「受講者発言リクエスト」機能とは、ライブ配信中に質問や意見を発したい受講者(視聴のみ)に対応するための機能で、受講者が発言リクエストを配信者に送信し許可されると、受講者の映像・音声が有効になり、配信者と受講者にてリアルタイムに会話ができる機能になります。

利用するSDK

・agora.io VideoSDK（Web）
・agora.io Real-time Messaging SDK（Web）

サンプルコード

サンプルコード
（バージョン3はAudienceRemarks-v3、バージョン4はAudienceRemarks-v4）

以降は、バージョン4用サンプルで説明しています。

機能一覧

[受講者側]
・受講者発言リクエスト
[配信者側]
・受講者発言リクエスト応答（許可/拒否）
・受講者発言オン
・受講者発言オフ
※基本機能(入室/退室など)は省略しています。

シーケンス

受講者発言リクエストの流れは以下になります。

※ざっくりと流れをつかむ目的のため、細かい部分は省略しています。

実装のポイント

【配信者、受講者の役割を分けるには】
・入室時、配信者の場合はストリームをパブリッシュし、受講者の場合はパブリッシュしません。
　（これにより配信者のみが映像・音声を送信し、受講者は視聴のみとなります。）
・受講者発言リクエスト許可時、受講者のストリームをパブリッシュします。
　（これにより受講者の映像・音声が送信され発話できるようになります。）

【受講者発言リクエストを送信/応答するには】
・Agora.io Real-time Messaging SDKを利用して接続し、テキストメッセージを受講者から配信者に送信します。
　（これにより配信者側でテキストメッセージごとに応答処理を切り分けます。）

実装

※追加・変更分のみ記載します。

・Join時のパブリッシュ制御
Join時は配信者のみストリームをパブリッシュするように変更します。

index.js


async function join() {
  /*省略*/
  //hostの場合のみpublishする
  if(options.role == "host"){
    [localTracks.audioTrack, localTracks.videoTrack ] = await Promise.all([
      // create local tracks, using microphone and camera
      AgoraRTC.createMicrophoneAudioTrack(),
      AgoraRTC.createCameraVideoTrack()
    ]);
    // play local video track
    localTracks.videoTrack.play("local-player");
    $("#local-player-name").text(`localVideo(${options.uid})`);
    // publish local stream
    // publish local tracks to channel
    await client.publish(Object.values(localTracks));
    console.log("publish success");
  }
}

・Real-time Messaging SDKの追加

index.html

  <script src="agora-rtm-sdk-1.4.1.js"></script>

・受講者発言用UIの追加

index.html

<form id="join-form">
.....(省略)
 <div class="form-group w-25">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="role" id="role" value="host" checked>
    <label class="form-check-label" for="host">host</label>
  </div>
 <div class="form-check">
    <input class="form-check-input" type="radio" name="role" id="role" value="audience">
    <label class="form-check-label" for="audience">audience</label>
  </div>
 </div>
</form>

<div class="input-group mb-2 w-50">
  <div class="input-group-prepend">
    <span class="input-group-text">Message</span>
  </div>
  <textarea type="text" class="form-control" id="messageDisp" ></textarea>
</div>
<div class="button-group mb-2">
  <button id="request" class="btn btn-info btn-sm">REQUEST</button>
</div>

<div class="input-group mb-2 w-25">
  <div class="input-group-prepend">
    <span class="input-group-text">Audience ID</span>
  </div>
  <select type="text" class="form-control" id="audienceId" ></select>
</div>

<div class="button-group mb-2">
  <button id="muteOfRemote" class="btn btn-info btn-sm">MUTE</button>
  <button id="unmuteOfRemote" class="btn btn-info btn-sm">UNMUTE</button>
</div>

・各種ボタンクリック時処理の追加

index.js

$("#unmuteOfRemote").click(function (e) {
  console.log("unmuteOfRemote")
  unmuteOfRemote();
})

$("#muteOfRemote").click(function (e) {
  console.log("muteOfRemote")
  muteOfRemote();
})

$("#request").click(function (e) {
  console.log("request")
  request();
})

・メッセージ処理の追加（送信部分）

index.js

function sendChannelMessage(localMessage){
  setDispMessage(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);

    setDispMessage(sentMessage.text);
    console.log((sentMessage.text == senderId + ":requested") && (options.uid == host));
    if ((sentMessage.text == senderId + ":requested") && (options.uid == host)){
      var res = confirm("Are you sure " + senderId + " to be speaker?");
      (res == true) ? permit(senderId) : deny(senderId);
  
    }
    //省略//
  });
}

動作確認

実装が完了したので動作を確認します。

１. 初期表示

１-１．index.htmlファイルをクリックし起動します。

２. 入室（配信開始）

２-１.(配信者/受講者)"APPID"を入力します。
２-２.(配信者)Roleで"host"を選択し"Join"ボタンをクリックします。
２-３.(受講者)Roleで"audience"を選択し"Join"ボタンをクリックします。
この時点で配信者の映像・音声が受講者側に送信されます。
[配信者側]

[受講者側]