Skip to content

출석부 관리부터, 소통까지! 부담없이 함께하는 네부캠 전용 실시간 스트리밍 서비스

Notifications You must be signed in to change notification settings

boostcampwm-2024/web20-camon

Repository files navigation



🌟 핵심 가치 🌟

💻 부스트 캠프 출석 관리  |   🤝 실시간 네트워킹  |   👥 네부캠 All-in-One



🗒️ 목차

🖼️ 프로젝트 기획 배경

🎯 핵심 기능

💻 핵심 개발 일지

🚨 트러블 슈팅

🧐 고민

⚙️ 전체 서비스 아키텍쳐

🏗️ 시스템 아키텍처

🛠️ 기술 스택

👨‍👩‍👧‍👦 팀원 소개

🖼️ 프로젝트 기획 배경

1️⃣ 부스트캠프의 베이스캠프가 슬랙, 부스트코스, zoom 등 여러 개로 나누어져 있어서 다양한 링크와 출석 관리에 불편함을 느꼈습니다.
2️⃣ 소통을 위해 zoom에 "라운지"라는 공간이 존재하지만 많은 캠퍼들이 잘 사용하지 않아서 캠퍼들 간의 실시간 소통이 어려웠습니다.

이런 불편함을 해소하기 위해 하나의 플랫폼에서 출석 관리부터 소통, 그리고 링크 및 자료 아카이브까지 한 번에 관리할 수 있는 서비스를 기획하게 되었습니다.

🎯 핵심 기능

🎥 실시간 방송

1️⃣ 캠퍼들은 코어타임 시간에 실시간 방송을 키면서 부스트 캠프 활동에 참여할 수 있습니다.
2️⃣ 화면공유 on/off, 캠 on/off, 마이크 on/off 기능으로 캠퍼들이 보다 자유로운 방송을 할 수 있도록 돕습니다.
3️⃣ 별도의 송출 소프트웨어 없이 서비스 내에서 방송 송출과 화면 배치 과정이 자동으로 이루어져 캠퍼들이 부담없이 방송할 수 있는 환경을 제공합니다.
4️⃣ 캠퍼들은 서로의 방송을 시청하면서 실시간으로 서로의 학습 경험을 공유할 수 있습니다.

송출및시청

💬 채팅

1️⃣ 캠퍼들은 채팅을 통해 실시간으로 소통할 수 있습니다.
2️⃣ 방송 송출창과 시청창 모두 채팅 기능을 제공하여 방송중인 캠퍼와 시청하는 캠퍼 모두 자유롭게 지식을 공유하고 유대감을 쌓을 수 있습니다.

채팅최종

🔴 녹화

1️⃣ 실시간 녹화 기능을 제공하여 코어타임 학습 중 기억하고 싶은 순간을 기록할 수 있습니다.
2️⃣ 방송 중 기록한 녹화본들은 출석 내역에서 확인하며 스스로의 학습 경험을 돌아볼 수 있습니다.

녹화 최종

✏️ 출석

1️⃣ 캠퍼는 마이페이지에서 본인의 출석 내역을 한 눈에 확인할 수 있습니다.
2️⃣ 코어타임 시간 내에 송출되는 방송 시간을 기반으로 자동으로 캠퍼들의 출석이 관리됩니다.

출석데모최종

📚 아카이브

1️⃣ 캠퍼들은 메인페이지에서 여러개로 나누어진 베이스캠프를 한 번에 모아서 관리할 수 있습니다.
2️⃣ 자유롭게 하이퍼링크를 등록하여 맞춤형 온라인 베이스 캠프를 구성할 수 있습니다.

아카이브데모최종

💻 핵심 개발 일지

  • WebRTC와 Mediasoup을 활용해 실시간 송출 및 시청 환경을 구축
  • 브라우저에서 간편하게 방송을 시작하고 종료할 수 있도록 UI/UX 개선
  • Canvas API를 활용해 방송 화면을 실시간으로 커스터마이징
  • 두 개의 스트림을 합친 Canvas를 캡처한 스트림을 송출하는 방식
  • WebRTC 스트림의 화질을 상황에 따라 조정하여 최적의 사용자 경험을 제공
  • 해상도, 비트레이트, 프레임레이트를 유동적으로 설정해 화질 변경
  • Mediasoup과 FFmpeg을 활용하여 실시간 스트리밍 중 썸네일을 생성하고, 녹화본을 저장
  • 녹화된 자료는 Object Storage에 저장하고, 스트리밍 종료 후에도 확인 가능

🙇‍♀️ 프로젝트의 개발 일지에 대한 더 자세한 사항은 개발 일지 view All위키를 참고해 주세요!


🚨 트러블 슈팅

  • 문제: WebM 영상을 HLS로 실시간 변환하면서 CPU 사용량이 급격히 증가해 스트리밍 품질 및 녹화 영상에 문제가 발생.
  • 해결: 실시간 변환 대신 WebM 원본 저장 후, CPU 부하가 낮을 때 큐를 통해 순차적으로 HLS 변환을 수행.
  • 문제: Chrome의 정책상 음소거되지 않은 영상은 사용자 상호작용(클릭, 탭 등)이 없으면 자동으로 재생되지 않음
  • 해결: muted 속성을 사용해 초기에 음소거 상태로 비디오를 자동 재생하고, 사용자에게 음소거 해제 버튼을 제공하여 수동으로 소리를 켤 수 있도록 구현.
  • 문제: GitHub Actions에서 Docker 이미지를 빌드하는 데 시간이 과도하게 소요됨
  • 해결: BuildKit을 활성화하고 type=gha로 Docker 레이어 캐시를 저장 및 재사용하여 빌드 시간 단축

🙇‍♀️ 프로젝트의 트러블 슈팅에 대한 더 자세한 사항은 트러블 슈팅 view All위키를 참고해 주세요!


🧐 고민

  • 고민 이유: 기존 Git Flow 전략에서 Release 브랜치를 사용하는 것이 효율적인지 의문. CI/CD 자동화 과정에서 불필요한 브랜치 관리로 복잡성이 증가할 우려.
  • 결론: Release 브랜치를 생략하고 develop 브랜치에서 주요 검증 후 main에 직접 배포하도록 결정.
  • 고민 이유: Redis와 같은 영구 저장소 대신 인메모리를 사용하는 것이 적절한지 논의.
  • 결론: 성능 최적화와 낮은 지연 시간을 위해 인메모리 방식을 채택.

🙇‍♀️ 프로젝트의 고민에 대한 더 자세한 사항은 고민 view All위키를 참고해 주세요!


⚙️ 전체 서비스 아키텍쳐

저희 서비스의 전반적인 흐름도를 확인 할 수 있습니다.

image

🏗️ 시스템 아키텍처

저희 서비스의 인프라 구축 환경을 한 눈에 보실 수 있습니다.

image

🛠️ 기술 스택

분야 기술 스택
공통 PNPM TypeScript TypeScript
FE React TailwindCSS
BE NestJS Express MySQL FFmpeg
인프라 GitHub Actions Docker NginX GitHub Actions

👨‍👩‍👧‍👦 팀원 소개

김광현 백지연 전희선 한승헌
@g00hyun @zero0205 @huiseon37 @seungheon123
BE FE BE BE

About

출석부 관리부터, 소통까지! 부담없이 함께하는 네부캠 전용 실시간 스트리밍 서비스

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •