I’m tryin to test the large-audio-room with the quickstart-calls-reactjs app provided.
First, I have created the LARGE_ROOM_FOR_AUDIO_ONLY from SB dashboard.
And then fetch and enter using the room id. I have checked the number of participants and participant id in the room information and it looked it was all working good.
However, the microphone and audio did not seem to work. I followed the guide in the docs but still failed to play the audio.
The setAudioForLargeRoom() fails with errors:
SendBirdCall.min.js:6 Uncaught (in promise) Error: The participant is not in the room and the request can't be processed.
at i.value (SendBirdCall.min.js:6:1)
at i.<anonymous> (SendBirdCall.min.js:6:1)
at tryCatch (runtime.js:63:1)
at Generator.invoke [as _invoke] (runtime.js:294:1)
at Generator.next (runtime.js:119:1)
at xn (SendBirdCall.min.js:6:1)
at i (SendBirdCall.min.js:6:1)
at SendBirdCall.min.js:6:1
at new Promise (<anonymous>)
at i.<anonymous> (SendBirdCall.min.js:6:1)
It fails even if there is already a participant.
Here are some code snippets for clearance.
In index.html, added audio element after root:
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<audio id="sb_audio" autoplay></audio>
</body>
In provider.tsx:
const fetchRoomById = useCallback<ContextType["fetchRoomById"]>(
async (roomId) => {
const room = await SendbirdCall.fetchRoomById(roomId);
if (room.roomType === SendbirdCall.RoomType.LARGE_ROOM_FOR_AUDIO_ONLY) {
const audioElement = document.getElementById(
"sb_audio"
) as HTMLAudioElement;
room.setAudioForLargeRoom(audioElement);
}
...
Please help to resolve the above error and enable microphone and audio.
