FIRE WIKI : WebRTC

WebRTC Connection Flow Diagram

• 새로운 user에 대하여 Peer Connection 생성하여 Offer 보내는 과정

const { peerConnection } = createPeerConnection(sid);
if (peerConnection) {
  const offer = await peerConnection.createOffer({
    offerToReceiveAudio: true,
    offerToReceiveVideo: true,
  });
  await peerConnection.setLocalDescription(
    new RTCSessionDescription(offer),
  );
  roomSocket.emit('call-user', { to: sid, offer });
}

• offer 받은 후 상대방에 대한 Peer Connection 생성한 후 Answer 보내는 과정

const { peerConnection } = createPeerConnection(sid);
if (peerConnection) {
  await peerConnection.setRemoteDescription(
    new RTCSessionDescription(offer),
  );
  const answer = await peerConnection.createAnswer();
  await peerConnection.setLocalDescription(answer);
  roomSocket.emit('make-answer', { to: sid, answer });
}

• 화면공유를 껐다 켰을 시 videoTrack을 replace하는 경우

  • 나의 peerConnection중에 연결된 sender들을 찾고, sender들의 videoTrack을 방금 공유한 videoTrack으로 replace하는 과정

Object.keys(pcs).forEach((pc) => {
  const sender = pcs[pc]
    .getSenders()
    .find((s) => s.track.kind === 'video');
  sender.replaceTrack(videoStream.getVideoTracks()[0]);
});

• 음성 공유시 mic toggle

  • 나의 audioTrack을 !enable로 설정

const toggleMic = () => {
  myStream.localStream
    .getAudioTracks()
    .forEach((track) => (track.enabled = !track.enabled));
};

맥북 에어로 작업중인데 비율이 안맞아서, 맥북프로로 재 캡처 후 다시 작업할 예정입니다.

준비화면

Room 에 실제로 접근하기전, 나의 마이크 상태와 화면 공유 정보를 선택할 수 있는 화면

• 좌측 스크린 : 나의 공유되는 화면이 나오는 영역

• 하단 아이콘

  • 화면공유 : 화면공유를 껐다 킬 수 있으며, 껏다 키는 과정에서 어떤 화면을 공유 할지 선택 할 수 있음

  • 음성 : 껐다 킬 수 있음

• 우측 정보 : 방에 해당하는 정보들

• 입장하기 버튼 : 방에 입장 할 수 있음

Room 입장

Room 에 입장 후 화면

• 헤더

  • 현재 테마를 움직이는 svg형태로 보여주며, 우측 아이콘에서 테마에 따라 흘러나오는 white noise의 볼륨을 조절 할 수 있는 volume Slider 존재. 스피커를 클릭하여 아예 on/off 할 수 있음

  • 레코드 영역 - 내가 이 방에 와서 얼마나 코딩을 진행하고 있는지 확인 할 수 있음

  • 화면공유 아이콘: 화면을 껐다 킬 수 있으며, 재선택시 어떠한 화면을 공유할 지 선택 할 수 있음

  • 마이크 아이콘: 내 음성을 껐다 킬 수 있음

  • 카메라 아이콘: 추후에 웹캠을 활용하여 나의 얼굴을 보여줄 수 있는 아이콘으로 발전 예정

  • 나가기 버튼: Room을 나갈 수 있음

• 화면 공유 영역

  • 내가 1번째로 보임

  • 들어오는 순서대로 2, 3, 4가 채워짐

  • 현재 WebRTC p2p mesh구조의 한계로 4명

    • 추후에 SFU나 MCU 방식을 도입하여 더 많은 사람들을 관리 할 수 있게 할 예정

• 채팅

  • 현재 방에 있는 유저들과 채팅을 진행 할 수 있음

테마

• 현재 4가지 테마가 존재함

  • 모닥불

  • 여행

  • 우주

  • 바다

  • 캠핑

• 각 테마별로 white noise가 존재함

• 각 테마별로 배경이 달라지며, 해당하는 색상으로 전체적인 Layout 색상이 변경됨

• 각 테마별로 움직이는 svg 즉 테마도 설정됨