在 Amazon Chime Sdk 中静音/取消静音远程与会者

Question

我们如何在 Amazon Chime Sdk 的帮助下构建 Mute/UmMute Remote Attendee (https://aws.github.io/amazon-chime-sdk-js/modules/apioverview.html#9-send-and-receive-data-messages-optional) 网络套接字在会议中广播消息。

Answer 1

目前，Amazon Chime SDK 中没有将远程与会者静音/取消静音的选项 但是是的，我们可以为此使用实时消息传递

Add `realtimeSubscribeToReceiveDataMessage` on attndeeId so when the user joins meeting then it will get the message on this channel. 

就像在下面的代码片段中提到的那样

import { Button } from 'react-bootstrap';
import React, { useContext, useEffect, useState } from 'react';
import getChimeContext from '../context/getChimeContext';
import useRoster from '../hooks/useRoster';


export default function RosterCompoment(props) {
  const { realTimeRequestAttendees, leaveMeeting } = props;
  const chime = useContext(getChimeContext());
  const roster = useRoster();
  const [videoAttendees, setVideoAttendees] = useState(new Set());
  const [isVideo, setIsVideo] = useState(false);
 
  const realtimeSubscribeToReceiveDataMessage = async () => {
    chime.audioVideo &&
      (await chime.audioVideo.realtimeSubscribeToReceiveDataMessage(chime.attendeeId, async (data) => {
        const receivedData = (data && data.json()) || {};
        const { type, name } = receivedData || {};
        if ((type === 'UNMUTE' || type === 'VIDEO-ENABLE')) {
          return;
        }
        if (type === 'UNMUTE') {
          chime.audioVideo && (await chime.audioVideo.realtimeUnmuteLocalAudio());
        } else if (type === 'MUTE') {
          chime.audioVideo && (await chime.audioVideo.realtimeMuteLocalAudio());
        } else if (type === 'KICK') {
          await new Promise((resolve) => setTimeout(resolve, 200));
          await chime.chooseVideoInputDevice(null);
          chime.audioVideo && (await chime.audioVideo.stopContentShare());
          chime.audioVideo && (await chime.audioVideo.stop());
          if (leaveMeeting) leaveMeeting(); // You can call leave meeting function here to kick any user
        } else if (type === 'VIDEO-DISABLE') {
          chime.audioVideo && (await chime.audioVideo.stopLocalVideoTile());
        } else if (type === 'VIDEO-ENABLE') {
          await chime.chooseVideoInputDevice(chime.currentVideoInputDevice);
        chime.audioVideo && (await chime.audioVideo.startLocalVideoTile());
        } 
      }));
  };

  useEffect(() => {
    realtimeSubscribeToReceiveDataMessage();
    const tileIds = {};
    const realTimeVideoAttendees = new Set();
    const removeTileId = (tileId) => {
      const removedAttendeeId = tileIds[tileId];
      delete tileIds[tileId];
      realTimeVideoAttendees.delete(removedAttendeeId);
      setVideoAttendees(new Set(realTimeVideoAttendees));
    };

    chime.audioVideo &&
      chime.audioVideo.addObserver({
        videoTileDidUpdate: (tileState) => {
          if (!tileState.boundAttendeeId || tileState.isContent || !tileState.tileId) {
            return;
          }

          if (tileState.active) {
            tileIds[tileState.tileId] = tileState.boundAttendeeId;
            realTimeVideoAttendees.add(tileState.boundAttendeeId);
            setVideoAttendees(new Set(realTimeVideoAttendees));
          } else {
            removeTileId(tileState.tileId);
          }
        },
        videoTileWasRemoved: (tileId) => {
          removeTileId(tileId);
        },
      });
  }, []);

  let attendeeIds;
  if (chime.meetingSession && roster) {
    attendeeIds = Object.keys(roster).filter((attendeeId) => !!roster[attendeeId].name);
  }

  return (
    <div>
      <div className="roster">
        {attendeeIds &&
          attendeeIds.map((attendeeId) => {
            const rosterAttendee = roster[attendeeId];
            return (
              <div key={attendeeId} className="attendee">
                <div className="name">{rosterAttendee.name}</div>
                { realTimeRequestAttendees && realTimeRequestAttendees.has(attendeeId) && (
                  <div className="">
                    <a
                      className="cursor"
                      onClick={() => {
                        realTimeRequestAttendees.delete(attendeeId);
                        chime.sendMessage(attendeeId, {
                          type: 'ADMIT',
                        });
                      }}
                    >
                      Answer
                    </a>
                  </div>
                )}
                
                  <a
                    className="cursor"
                    onClick={() => {
                      chime.sendMessage(attendeeId, {
                        type: 'KICK',
                      });
                    }}
                  >
                    Remove
                  </a>
                
                {videoAttendees && (
                  <div className="video">
                    <a
                      className="cursor"
                      onClick={() => {
                        
                          chime.sendMessage(attendeeId, {
                            type: videoAttendees.has(attendeeId) ? 'VIDEO-DISABLE' : 'VIDEO-ENABLE',
                          });
                       
                        }
                      }}
                    >
                      {videoAttendees.has(attendeeId) ? (
                        <i className="fa fa-video-camera" />
                      ) : (
                        <i className="camera-icon-muted" />
                      )}
                    </a>
                  </div>
                )}
                {typeof rosterAttendee.muted === 'boolean' && (
                  <div className="muted">
                    <a
                      className="cursor"
                      onClick={() => {
                          chime.sendMessage(attendeeId, {
                            type: rosterAttendee.muted ? 'UNMUTE' : 'MUTE',
                          });
                      }}
                    >
                      {rosterAttendee.muted ? (
                        <i className="fa fa-microphone-slash" />
                      ) : (
                        <i
                          className={cx(
                            'fa fa-microphone',
                            { 'active-speaker': rosterAttendee.active },
                            {
                              'weak-signal': rosterAttendee.signalStrength && rosterAttendee.signalStrength < 50,
                            },
                          )}
                        />
                      )}
                    </a>
                  </div>
                )}
              </div>
            );
          })}
      </div>
    </div>
  );
}

Here is the method to send messages to remote attendees through his/her attndeeId. 

  sendMessage = (topic, data) => {
    new AsyncScheduler().start(() => {
      const payload = {
        ...data,
        attendeeId: this.attendeeId || '',
        name: this.rosterName || '',
      };
      this.audioVideo &&
        this.audioVideo.realtimeSendDataMessage(topic, payload, ChimeSdkWrapper.DATA_MESSAGE_LIFETIME_MS);

      this.publishMessageUpdate(
        new DataMessage(
          Date.now(),
          topic,
          new TextEncoder().encode(payload),
          this.meetingSession.configuration.credentials.attendeeId || '',
          this.meetingSession.configuration.credentials.externalUserId || '',
        ),
      );
    });
  };```