Error occurred when I exit the room

[Junhee_Lee]

Hi there,

I made ‘group call’ features by using sendbird apis, and I have a few questions.

I connected audio and ref by using room.setAudioForLargeRoom() method.

 const mediaViewRef = useCallback(
    (node) => {
      SendBirdCall.fetchRoomById(roomId)
        .then((room) => {
          room.setAudioForLargeRoom(node);
        })
        .catch((err) => {
          console.error('error occured in fetchRoomById', err);
        });
    },
    [SendBirdCall, roomId, caller],
  );

...
return (
...
<>
  <audio ref={mediaViewRef} autoPlay controls muted={caller === person.user.userId} />
</>
)

If I test in app every things are fine.

But If I exit the room, error is occurred.

The code below is related to ‘exit room’.

  const exitRoom = useCallback(() => {
    SendBirdCall.fetchRoomById(roomId)
      .then((room) => {
        room.exit();
        setRoomDone(false);
        console.log('Room exited');
      })
      .catch((error) => {
        console.log('error exit room', error);
      });
  }, [SendBirdCall, setRoomDone, roomId]);

If I use setMediaView method not using setAudioForLargeRoom method,
I could just hear what I say. (Not other speakers saying)

If I use setAudioForLargeRoom method, I can hear what other say. But that error was occurred.

I think I should have to use both methods ( setMediaView / setAudioForLargeRoom ).

How can I solve this problems?

whole codes in github

on vercel

[Junhee_Lee]

Hi there,

Finally I check the issue and make whole process.

I think, when we create the room, we need to use room.setAudioForLargeRoom method

const createRoom = useCallback(() => {
    const roomParams = {
      roomType: SendBirdCall.RoomType.LARGE_ROOM_FOR_AUDIO_ONLY,
    };

    SendBirdCall.createRoom(roomParams)
      .then((room) => {
        console.log('room created', room);
        setRoomCtx(room);
        room.setAudioForLargeRoom(null);
      })
      .catch((e) => {
        console.log('Failed to create room', e);
      })
      .finally(() => {
        console.log('Room processing complete');
      });
  }, [SendBirdCall, setRoomCtx]);

I fill null parameter for room.setAudioForLargeRoom method, because the components are splited.

After make the room, we should bind <audio/> with and room.setAudioForLargeRoom method.

  const mediaViewRef = useCallback(
    (node) => {
      SendBirdCall.fetchRoomById(roomId)
        .then((room) => {
          room.setAudioForLargeRoom(node);
        })
        .catch((err) => {
          console.error('error occured in fetchRoomById', err);
        });
    },
    [SendBirdCall, roomId],
  );
...
<audio
  ref={(node) => {
    if (!node) {
      return;
    } else {
      mediaViewRef(node);
    }
  }}
  autoPlay
  controls
  muted={caller === person.user.userId}
/>

And then we can use group call features each others.

Thanks for giving us good SDK and documents.

[Tyler]

Hi @Junhee_Lee,

I just wanted to follow up on this and apologize for the delayed response. It seems like you were able to solve the problem, is that correct? If not, let me know where you’re at and I’ll do my best to help.

[Junhee_Lee]

Hi @Tyler ,

It was my problems and I solved this problem.

Thank you for your answer.