개발 일지 view All

개발 일지

Cam' On 주요 서비스에 대한 구현 과정에 대해 설명하고 있습니다.

📌 ALL

🌐 WebRTC와 Mediasoup을 선택한 이유

• 실시간 방송 및 다대다 스트리밍 환경을 구현하기 위해 WebRTC와 Mediasoup을 선택.
• WebRTC는 실시간 미디어 스트림 전송에 최적화된 기술.
• Mediasoup은 SFU(Selective Forwarding Unit)를 제공하여 네트워크 자원을 효율적으로 사용 가능.
  WebRTC와 Mediasoup을 선택한 이유

🌟 방송 송출 및 시청 구현

• WebRTC와 Mediasoup을 활용해 실시간 방송 송출 및 시청 기능을 구축.
• 방송 시작/종료 UI를 간소화하여 사용자 경험을 최적화.
  방송 송출 및 시청 구현

🎥 화질 조정 기능 구현

• 스트림의 해상도, 비트레이트, 프레임레이트를 유동적으로 조정하는 기능 구현.
• 네트워크 상태를 감지하여 자동으로 화질 변경.
  화질 조정 기능 구현

📌 FE

🎨 Canvas API를 사용한 방송 송출 화면 구성

• Canvas API를 사용하여 화면 공유와 캠 영상 스트림을 하나의 화면으로 통합.
• 통합된 화면을 Mediasoup을 통해 스트림으로 송출.
  Canvas Api를 사용한 방송 송출 화면 구성

🔗 방송 송출 창을 새로운 창으로 띄우기

• 방송 송출 중에도 다른 작업이 가능하도록 송출 화면을 새로운 브라우저 창에서 열리는 방식으로 개선.
• 송출 화면 UI를 독립적으로 관리할 수 있어 사용자 경험 개선.
  방송 송출 창을 새로운 창으로 띄우기

📌 BE

📸 실시간 썸네일과 녹화 기능 구현

• Mediasoup과 FFmpeg을 활용해 실시간 썸네일 생성 및 녹화 데이터 저장 기능 구현.
• 저장된 녹화본은 Object Storage를 통해 관리.
  실시간 썸네일과 녹화 기능 구현

📖 Swagger를 적용해보자

• Swagger UI를 통해 API 문서를 자동 생성하여 개발자 간의 협업 효율성 증대.
• API 테스트 및 사용성을 높이기 위해 엔드포인트와 데이터 모델 문서를 시각적으로 제공.
  Swagger를 적용해보자

🛠️ husky로 커밋 전 테스트 실행 구축

• Husky와 Lint-Staged를 사용하여 커밋 전에 코드 린트와 테스트를 자동 실행.
• 코드 품질을 유지하고 릴리스 전 문제를 사전에 방지.
  husky로 커밋 전 테스트 실행 구축 하기