amazon-chime - 在 Amazon Chime Sdk 中静音/取消静音远程与会者
问题描述
我们如何借助 ( https://aws.github.io/amazon-chime-sdk-js/modules/apioverview.html#9-send-and-receive-在 Amazon Chime Sdk 中构建 Mute/UmMute Remote Attendee- 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 || '',
),
);
});
};```
推荐阅读
- vue.js - 将 nuxt.js 集成到我们的 vue.js 应用程序中需要大修吗?
- opengl - 什么是 GPU 驱动的渲染?
- flutter - 为什么在拖动图像期间缩放重置?
- mysql - 限制列值
- python-3.x - Keras 功能 API 比 Sequential 慢 / 没有改进
- javascript - react-native 中的 {' '} 是什么?
- php - 为什么 PHP 和 PostgreSQL 对什么是有效的 UTF-8 有截然不同的想法?
- php - 使用 PHP72 和 ImageMagick 在 Google App Engine 上是否可以进行 WEBP 输出?
- python - 根据列表中的另一列内容创建新列值
- php - 使用 php 将文件上传到谷歌驱动器并检索链接?