Portfolio

mediaTrack 변경하기

설명

작업 우선순위

보너스

상태

작업 중

에픽

webRTC

담당자

신수영

데드라인

스프린트

FE 작업 우선순위

챌린지

페이지

Room

현재 문제 상황

나에 대한 pc를 불러와야 하는데 pcListMap에는 다른 유저에 대한 정보만 저장하고 있어서 undefined가 되는 문제가 있다. getSenders()를 이용하기 위해서는 나에 대한 pc 데이터가 필요하다.


// useAudioSocket.ts
const replaceTrack = (newStream: MediaStream, newAudioTrack?: MediaStreamTrack) => {
  const [audioTrack] = newStream.getAudioTracks();
  console.log("replaceTrack() tracks!", audioTrack)

  const pc = pcListMap.current.get(myKey); // undefined
  console.log("pcListMap", pcListMap.current);
  console.log("pc", pc);
  const senders = pc?.getSenders();
  console.log("currentSender", senders);
  const audioSender = senders?.find(sender => sender.track?.kind === audioTrack.kind);
  console.log("found sender: ", audioSender);
  audioSender?.replaceTrack(audioTrack);
}

참고 — pc 생성 플로우 (수현)

현재 나에 대한 pc 정보는 저장하지 않고 다른 사람들의 pc를 저장하고 있다.

pc 정보 생성은 다음과 같은 플로우를 따른다. useAudioSocket.ts에 코드가 있다.

다른 사람 입장 -> otherKeyList 추가 -> otherKeyList를 돌면서 sendOffer -> sendOffer 내부에서 otherKey에 대한 pc 생성


// 다른 사람 입장 시 otherKeyList 추가
useEffect(() => {
  if (otherKeyList.length > 0 && isConnected) {
    console.log('otherKeyList', otherKeyList);
    createOtherPeerConnection();
  }
}, [otherKeyList, isConnected]);

const createOtherPeerConnection = () => {
  otherKeyList.forEach(otherKey => {
    sendOffer(otherKey);
  });
};

const sendOffer = async (otherKey: string) => {
  let pc = pcListMap.current.get(otherKey);
  if (!pc) {
    pc = createPeerConnection(otherKey);
  }

  console.log(
    'socket flow: 3. createOffer 후 setLocalDescription',
    otherKey,
    '번 유저'
  );

  const offer = await pc.createOffer();
  pc.setLocalDescription(offer);

  sendMessageService({
    client: client.current,
    destination: `/peer/offer/${otherKey}/${roomShortUuid}`,
    body: {
      key: myKey,
      body: offer,
    },
  });
};

레퍼런스

https://stackoverflow.com/questions/39831238/webrtc-how-to-change-the-audio-track-for-a-existing-stream

mdn / replaceTrack