问题描述
我们如何借助以下方法在Amazon Chime Sdk中构建Mute / UmMute远程与会者 (https://aws.github.io/amazon-chime-sdk-js/modules/apioverview.html#9-send-and-receive-data-messages-optional)网络套接字以在会议中广播消息。
解决方法
目前,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 || '',),);
});
};```