[FE] 영상이나 마이크를 켠 상태로 진입하는 참가자 정보가 제대로 반영되지 않는 문제 해결

[seorang42]

✅ 작업 내용

• 상단바(MemberVideoBar)에서 참가자의 실시간 정보를 정적인 데이터인 members를 참고하는 방식에서, 실시간 송출 여부가 반영된 memberProducers를 참고하는 방식으로 구현하였습니다.

최종 데이터 구조

• members
  • 참가자의 id, 닉네임, 게스르 여부 등의 참가자의 기본 정보를 담은 정적 데이터
  • cam과 mic는 회의 참여 시 기존 사용자가 카메라나 마이크를 활성화하고 있었는지를 확인하기 위한 정보이며, 이후 카메라나 마이크가 활성화/비활성화 될 때 갱신되지 않음 <-- 이 부분을 실시간 정보 표시에 사용하다보니 이전의 동기화 문제가 발생했었습니다.

members: Record<string, MeetingMemberInfo>;

export interface MeetingMemberInfo {
  user_id: string;
  nickname: string;
  profile_path: string | null;
  is_guest: boolean;
  cam: MemberProviderInfo | null;
  mic: MemberProviderInfo | null;
}

---

• memberProducers
  • 참가자가 영상이나 음성을 활성화/비활성화 했을 때 갱신되는 Producer 정보가 저장되는 객체
  • MemberProviderInfo의 is_paused 갱신을 통해 활성화 여부를 실시간으로 동기화

memberProducers: Record<
  string,
  {
    cam?: MemberProviderInfo | null;
    mic?: MemberProviderInfo | null;
  }
>;
---
export interface MemberProviderInfo {
  provider_id: string;
  kind: 'audio' | 'video';
  type: 'mic' | 'cam';
  is_paused: boolean;
}

---

• memberStreams
  • 참가자의 실제 영상/음성 스트림 정보를 저장하는 객체
  • Producer를 통해 Stream을 한 번 설정하고, 여러 컴포넌트에서 사용하기 위해서 별도로 관리

memberStreams: Record<string, MemberStream>;

export type MemberStream = Partial<Record<MediaType, MediaStream>>;

export type MediaType = 'mic' | 'cam' | 'screen_video' | 'screen_audio';

---

🤔 리뷰 요구사항

• 기존에 발견하셨던 문제 상황이 정상적으로 해결되었는지 확인 부탁드립니다! ex) 새로 들어온 참가자의 캠/마이크 활성화 여부가 정상적으로 반영되지 않던 문제 등
• AI를 사용해 프로젝트의 전반적인 컨텍스트를 반영한 수정을 시도해보기 위해, VSCode에서 Github Copilot을 사용하여 코드 수정을 진행해보았습니다. 그러다보니 단계별로 작은 단위로 커밋을 하지 못하고, 여러 파일이 동시에 변경되었습니다. 결과적으로 커밋 하나의 단위가 조금 커졌습니다. 양해 부탁드립니다, 다음부터는 조금 더 단계적으로 해결해볼 수 있게 노력해보겠습니다!

[tjsdn052]

memberProducers 기반으로 마이크/카메라 상태를 분리한 방향 좋고, 코드상으로는 이전 동기화 문제도 해결된 것으로 보입니다 👍

하지만 서버 변경 후 바뀐 서버 주소가 환경변수에 반영되지 않은 상태가 원인인지 실제 동작 확인이 되지 않아 반영 후 다시 한 번 확인해보겠습니다!

[chamny20]

정적 정보랑 실시간 상태 memberProducers와 실제 스트림 각 역할에 맞게 책임이 분리된 것 같네요. 고생하셨습니다~

[chamny20]

개선된 구조가 producer 기준으로 동작하게 된건가요?

[seorang42]

네 맞아요! 위의 allMembers의 경우는 통화방 진입 시 기존에 존재하던 멤버에 대한 정보를 담다보니, 이후 다른 사용자가 추가되거나 기존 사용자의 상태(마이크, 카메라)가 변경되었을 때 즉각적으로 반영되지 않았었어요.

그래서 상태를 반영하는 Producer 정보를 기준으로 동작하게 변경되었습니다!