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

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

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

<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">gt;
        <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>
    

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

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);
    
        }
        //省略//
      });
    }