Sendbird Calls - 음성연결시 아이폰으로 상대방의 목소리가 안들리는 이슈

[pjw6531]

[Problem/Question]
Next.js를 이용하여 Group Calls를 진행하던중 이슈가 발견되어 문의드립니다.

1. SDK 설치
2. User Authenticat
3. Enter a room

순서로 코드를 진행하였습니다. (하단에 코드 첨부)
Mac - Mac → 정상
Mac - 갤럭시스마트폰 → 정상
Mac - 아이패드 → 정상
Mac - 아이폰 마이크 기능 정상 / 사운드 비정상(상대방 목소리 안들림)
갤럭시스마트폰 - 아이폰 마이크 기능 정상 / 사운드 비정상(상대방 목소리 안들림)
아이패드- 아이폰 마이크 기능 정상 / 사운드 비정상(상대방 목소리 안들림)
아이폰 - 아이폰 마이크 기능 정상 / 사운드 비정상(상대방 목소리 안들림)

---

[SDK Version]
1.10.6

[Reproduction Steps]
lobby2 페이지에서 “상담실 입장” 버튼을 클릭하면 connectSendbird 페이지로 이동하여 연결되는 구조입니다.

const lobby2 = () => {
  const router = useRouter();
  const setConf = useSetRecoilState<any>(Conf);
  const [roomId, setRoomId] = useState('b63de219-eb4c-4080-883f-1139291e687d');

  const login = async () => {
    const authOption = { userId, accessToken: ACCESS_TOKEN };
    SendBirdCall.init(APP_ID);

    const user = await SendBirdCall.authenticate(authOption);
    setConf(user);

    SendBirdCall.updateMediaDevices({ audio: true, video: false });

    await SendBirdCall.connectWebSocket();

    router.push({
      pathname: '/mentoring/progress/connect-sendbird',
      query: { roomId },
    });
  };

  return (
    <div
      style={{ paddingTop: '100px', display: 'flex', flexDirection: 'column' }}
    >
      <h1>멘토링 대기</h1>
      <div>
        <span>상담실 입장 전 마이크와 비디오를 꼭 허용해주세요.</span>
      </div>
      <div>마이크 모양</div>
      <div>{userId}</div>
      <button onClick={login}>입장하기</button>
    </div>
  );
};

export default lobby2;


const connectSendbird = () => {
  const router = useRouter();
  const [localParticipant, setLocalParticipant] = useState<any>(null);
  const [remoteParticipant, setRemoteParticipant] = useState<any>(null);
  const [mentoringRoom, setMentoringRoom] = useState<any>(null);
  const [audio, setAudio] = useState<any>(true);

  useEffect(() => {
    SendBirdCall.updateMediaDevices({ audio: true, video: false });
  }, [SendBirdCall]);


  const enterRoom = useCallback(
    async (roomId) => {
      const room = await SendBirdCall.fetchRoomById(roomId);
      setMentoringRoom(room);

      room
        .enter({
          audioEnabled: true,
          videoEnabled: false,
        })
        .then(() => {
          setLocalParticipant(room.localParticipant);
          // Called when a remote participant is connected to the media stream and starts sending the media stream.
          room.on('remoteParticipantStreamStarted', (remoteParticipant) => {
            setRemoteParticipant(remoteParticipant);

            // Create a new HTMLMediaElement to set remote participant's media stream.

            const remoteMediaView = document.createElement('video');
            // It is recommended to set a media view element's autoplay property to true.
            remoteMediaView.autoplay = true;
            remoteMediaView.hidden = true;
            remoteParticipant.setMediaView(remoteMediaView);
            document.body.appendChild(remoteMediaView);
          });

          room.on('remoteParticipantExited', () => {
            setRemoteParticipant(null);
          });

          room.on('remoteAudioSettingsChanged', () => {
            // 상대방 음소거 했을때 표시가능
            console.log('음량');
          });
        })

        .catch((error) => {
          console.log('에러남', error);
        });
    },
    [SendBirdCall]
  );

  useEffect(() => {
    if (router.query.roomId) {
      enterRoom(router.query.roomId).catch((error) => {
        if (error) {
          window.location.href = '/mentoring/progress/lobby2';
        }
      });
    }
  }, [router.query.roomId]);

  

  return (
    <Container>
      <div className='participant_container'>
        <span className='participant_title'>상담 참여자</span>

        <div className='participant_content'>
          <div className='participant_connect'>
            <img
              src='/images/connect.svg'
              style={{ width: '24px', height: '24px' }}
            />
            <span>{localParticipant?.user.userId}</span>
          </div>

          {remoteParticipant?.user ? (
            <div className='participant_connect'>
              <img
                src='/images/connect.svg'
                style={{ width: '24px', height: '24px' }}
              />
              <span>{remoteParticipant?.user.userId}</span>
            </div>
          ) : (
            <div className='participant_connect'>
              <img
                src='/images/unconnect.svg'
                style={{ width: '24px', height: '24px' }}
              />
              <span>미입장</span>
            </div>
          )}
        </div>
      </div>
      <div>사전질문</div>
      <Footer>
        {audio ? (
          <div
            onClick={() => {
              localParticipant.muteMicrophone();
              setAudio(true);
            }}
          >
            <img src='/images/micon.svg' />
          </div>
        ) : (
          <div
            onClick={() => {
              localParticipant.unmuteMicrophone();
              setAudio(false);
            }}
          >
            <img src='/images/micoff.svg' />
          </div>
        )}
        <button
          onClick={async () => {
            await mentoringRoom.exit();
            router.back();
          }}
        >
          <img src='/images/exit.svg' alt='종료' />
        </button>
        <div></div>
      </Footer>

      <video
        id='remote_video_element_id'
        autoPlay
        playsInline
        muted={false}
        hidden
      />
    </Container>
  );
};```
**[Frequency]**
아이폰으로 음성연결 테스트 결과 계속해서 발생하고 있습니다.

**[Current impact]**
서비스 사용불가