Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/boostcampwm-2024/web20-camon

출석부 관리부터, 소통까지! 부담없이 함께하는 네부캠 전용 실시간 스트리밍 서비스
https://github.com/boostcampwm-2024/web20-camon

docker ffmpeg mediasoup ncloud nest react webrtc

Last synced: 10 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/boostcampwm-2024/web20-camon
Owner: boostcampwm-2024
Created: 2024-10-28T09:33:38.000Z (2 months ago)
Default Branch: develop
Last Pushed: 2024-12-05T03:52:22.000Z (27 days ago)
Last Synced: 2024-12-05T04:23:24.575Z (27 days ago)
Topics: docker, ffmpeg, mediasoup, ncloud, nest, react, webrtc
Language: TypeScript
Homepage: http://cam-on.site
Size: 3.68 MB
Stars: 41
Watchers: 4
Forks: 1
Open Issues: 3
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

🌟 핵심 가치 🌟

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

# 🗒️ 목차
[🖼️ 프로젝트 기획 배경](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B8%B0%ED%9A%8D-%EB%B0%B0%EA%B2%BD)

[🎯 핵심 기능](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%95%B5%EC%8B%AC-%EA%B8%B0%EB%8A%A5)
- [실시간 방송](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EB%B0%A9%EC%86%A1)
- [채팅](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%B1%84%ED%8C%85)
- [녹화](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EB%85%B9%ED%99%94)
- [출석](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#%EF%B8%8F-%EC%B6%9C%EC%84%9D)
- [아카이브](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%95%84%EC%B9%B4%EC%9D%B4%EB%B8%8C)

[💻 핵심 개발 일지](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%95%B5%EC%8B%AC-%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80)
- [방송 송출 및 시청 구현](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EB%B0%A9%EC%86%A1-%EC%86%A1%EC%B6%9C-%EB%B0%8F-%EC%8B%9C%EC%B2%AD-%EA%B5%AC%ED%98%84)
- [Canvas Api를 사용한 방송 송출 화면 구성](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-canvas-api%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%EB%B0%A9%EC%86%A1-%EC%86%A1%EC%B6%9C-%ED%99%94%EB%A9%B4-%EA%B5%AC%EC%84%B1)
- [화질 조정 기능 구현](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%99%94%EC%A7%88-%EC%A1%B0%EC%A0%95-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)
- [실시간 썸네일과 녹화 기능 구현](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%8D%B8%EB%84%A4%EC%9D%BC%EA%B3%BC-%EB%85%B9%ED%99%94-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)

[🚨 트러블 슈팅](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85)
- [FFmpeg를 이용한 실시간 HLS 변환에서 CPU 과부하 발생](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-FFmpeg%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-HLS-%EB%B3%80%ED%99%98%EC%97%90%EC%84%9C-CPU-%EA%B3%BC%EB%B6%80%ED%95%98-%EB%B0%9C%EC%83%9D)
- [Chrome 자동 재생 문제](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-chrome-%EC%9E%90%EB%8F%99-%EC%9E%AC%EC%83%9D-%EB%AC%B8%EC%A0%9C)
- [Git Action에서 도커 이미지 빌드 시간 단축](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-git-action%EC%97%90%EC%84%9C-%EB%8F%84%EC%BB%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B9%8C%EB%93%9C-%EC%8B%9C%EA%B0%84-%EB%8B%A8%EC%B6%95)

[🧐 고민](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EA%B3%A0%EB%AF%BC)
- [Release 브랜치? 너 필요해?](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-release-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EB%84%88-%ED%95%84%EC%9A%94%ED%95%B4)
- [실시간 채팅 구현: 인메모리 방식을 선택한 이유](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%B1%84%ED%8C%85-%EA%B5%AC%ED%98%84-%EC%9D%B8%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%B0%A9%EC%8B%9D%EC%9D%84-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0)

[⚙️ 전체 서비스 아키텍쳐](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#%EF%B8%8F-%EC%A0%84%EC%B2%B4-%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90)

[🏗️ 시스템 아키텍처](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#%EF%B8%8F-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98)

[🛠️ 기술 스택](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#%EF%B8%8F-%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D)

[👨‍👩‍👧‍👦 팀원 소개](https://github.com/boostcampwm-2024/web20-camon?tab=readme-ov-file#-%ED%8C%80%EC%9B%90-%EC%86%8C%EA%B0%9C)

# 🖼️ 프로젝트 기획 배경

> 1️⃣ 부스트캠프의 베이스캠프가 슬랙, 부스트코스, zoom 등 여러 개로 나누어져 있어서 다양한 링크와 출석 관리에 불편함을 느꼈습니다.

> 2️⃣ 소통을 위해 zoom에 "라운지"라는 공간이 존재하지만 많은 캠퍼들이 잘 사용하지 않아서 캠퍼들 간의 실시간 소통이 어려웠습니다.

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

# 🎯 핵심 기능
### 🎥 실시간 방송
> 1️⃣ 캠퍼들은 코어타임 시간에 실시간 방송을 키면서 부스트 캠프 활동에 참여할 수 있습니다.

> 2️⃣ 화면공유 on/off, 캠 on/off, 마이크 on/off 기능으로 캠퍼들이 보다 자유로운 방송을 할 수 있도록 돕습니다.

> 3️⃣ 별도의 송출 소프트웨어 없이 서비스 내에서 방송 송출과 화면 배치 과정이 자동으로 이루어져 캠퍼들이 부담없이 방송할 수 있는 환경을 제공합니다.

> 4️⃣ 캠퍼들은 서로의 방송을 시청하면서 실시간으로 서로의 학습 경험을 공유할 수 있습니다.

![송출및시청](https://github.com/user-attachments/assets/50e8e9da-7b5d-455b-b53d-8a9489288466)

### 💬 채팅
> 1️⃣ 캠퍼들은 채팅을 통해 실시간으로 소통할 수 있습니다.

> 2️⃣ 방송 송출창과 시청창 모두 채팅 기능을 제공하여 방송중인 캠퍼와 시청하는 캠퍼 모두 자유롭게 지식을 공유하고 유대감을 쌓을 수 있습니다.

![채팅최종](https://github.com/user-attachments/assets/8974ad8e-f70d-4bc1-a794-502e22ffea35)

### 🔴 녹화
> 1️⃣ 실시간 녹화 기능을 제공하여 코어타임 학습 중 기억하고 싶은 순간을 기록할 수 있습니다.

> 2️⃣ 방송 중 기록한 녹화본들은 출석 내역에서 확인하며 스스로의 학습 경험을 돌아볼 수 있습니다.

![녹화 최종](https://github.com/user-attachments/assets/8610fcd9-effd-4fb6-bdeb-057ba8c19d20)

### ✏️ 출석
> 1️⃣ 캠퍼는 마이페이지에서 본인의 출석 내역을 한 눈에 확인할 수 있습니다.

> 2️⃣ 코어타임 시간 내에 송출되는 방송 시간을 기반으로 자동으로 캠퍼들의 출석이 관리됩니다.

![출석데모최종](https://github.com/user-attachments/assets/32e104b3-daec-4d47-9db6-1898aa48d005)

### 📚 아카이브
> 1️⃣ 캠퍼들은 메인페이지에서 여러개로 나누어진 베이스캠프를 한 번에 모아서 관리할 수 있습니다.

> 2️⃣ 자유롭게 하이퍼링크를 등록하여 맞춤형 온라인 베이스 캠프를 구성할 수 있습니다.

![아카이브데모최종](https://github.com/user-attachments/assets/d5c4818c-be47-4851-91c1-4d6128a04aad)

# 💻 핵심 개발 일지
### 💡 [방송 송출 및 시청 구현](https://github.com/boostcampwm-2024/web20-camon/wiki/%EB%B0%A9%EC%86%A1-%EC%86%A1%EC%B6%9C-%EB%B0%8F-%EC%8B%9C%EC%B2%AD-%EA%B5%AC%ED%98%84)
- WebRTC와 Mediasoup을 활용해 실시간 송출 및 시청 환경을 구축
- 브라우저에서 간편하게 방송을 시작하고 종료할 수 있도록 UI/UX 개선

### 💡 [Canvas Api를 사용한 방송 송출 화면 구성](https://github.com/boostcampwm-2024/web20-camon/wiki/Canvas-Api%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%EB%B0%A9%EC%86%A1-%EC%86%A1%EC%B6%9C-%ED%99%94%EB%A9%B4-%EA%B5%AC%EC%84%B1)
- Canvas API를 활용해 방송 화면을 실시간으로 커스터마이징
- 두 개의 스트림을 합친 Canvas를 캡처한 스트림을 송출하는 방식

### 💡 [화질 조정 기능 구현](https://github.com/boostcampwm-2024/web20-camon/wiki/%ED%99%94%EC%A7%88-%EC%A1%B0%EC%A0%95-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)
- WebRTC 스트림의 화질을 상황에 따라 조정하여 최적의 사용자 경험을 제공
- 해상도, 비트레이트, 프레임레이트를 유동적으로 설정해 화질 변경

### 💡 [실시간 썸네일과 녹화 기능 구현](https://github.com/boostcampwm-2024/web20-camon/wiki/%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%8D%B8%EB%84%A4%EC%9D%BC%EA%B3%BC-%EB%85%B9%ED%99%94-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)
- Mediasoup과 FFmpeg을 활용하여 실시간 스트리밍 중 썸네일을 생성하고, 녹화본을 저장
- 녹화된 자료는 Object Storage에 저장하고, 스트리밍 종료 후에도 확인 가능

> 🙇‍♀️ 프로젝트의 **개발 일지**에 대한 더 자세한 사항은 [개발 일지 view All](https://github.com/boostcampwm-2024/web20-camon/wiki/%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80-view-All) 및 [위키](https://github.com/boostcampwm-2024/web20-camon/wiki)를 참고해 주세요!

# 🚨 트러블 슈팅
### ❓ [FFmpeg를 이용한 실시간 HLS 변환에서 CPU 과부하 발생](https://github.com/boostcampwm-2024/web20-camon/wiki/%EB%B0%A9%EC%86%A1-%EB%85%B9%ED%99%94-%EC%8B%9C-CPU-%EA%B3%BC%EB%B6%80%ED%95%98-%EB%AC%B8%EC%A0%9C%EB%A5%BC-%ED%95%B4%EA%B2%B0%ED%95%B4%EB%B3%B4%EC%9E%90)
- **문제**: WebM 영상을 HLS로 실시간 변환하면서 CPU 사용량이 급격히 증가해 스트리밍 품질 및 녹화 영상에 문제가 발생.
- **해결**: 실시간 변환 대신 WebM 원본 저장 후, CPU 부하가 낮을 때 큐를 통해 순차적으로 HLS 변환을 수행.

### ❓ [Chrome 자동 재생 문제](https://github.com/boostcampwm-2024/web20-camon/wiki/Chrome-%EC%9E%90%EB%8F%99-%EC%9E%AC%EC%83%9D%EC%9D%B4-%EC%95%88%EB%90%98%EB%8A%94-%EB%AC%B8%EC%A0%9C)
- **문제**: Chrome의 정책상 음소거되지 않은 영상은 사용자 상호작용(클릭, 탭 등)이 없으면 자동으로 재생되지 않음
- **해결**: muted 속성을 사용해 초기에 음소거 상태로 비디오를 자동 재생하고, 사용자에게 음소거 해제 버튼을 제공하여 수동으로 소리를 켤 수 있도록 구현.

### ❓ [Git Action에서 도커 이미지 빌드 시간 단축](https://github.com/boostcampwm-2024/web20-camon/wiki/Git-action%EC%97%90%EC%84%9C-%EB%8F%84%EC%BB%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B9%8C%EB%93%9C-%EC%8B%9C%EA%B0%84%EC%9D%84-%EB%8B%A8%EC%B6%95%EC%8B%9C%EC%BC%9C%EB%B3%B4%EC%9E%90)
- **문제**: GitHub Actions에서 Docker 이미지를 빌드하는 데 시간이 과도하게 소요됨
- **해결**: BuildKit을 활성화하고 type=gha로 Docker 레이어 캐시를 저장 및 재사용하여 빌드 시간 단축

> 🙇‍♀️ 프로젝트의 **트러블 슈팅**에 대한 더 자세한 사항은 [트러블 슈팅 view All](https://github.com/boostcampwm-2024/web20-camon/wiki/%ED%8A%B8%EB%9F%AC%EB%B8%94-%EC%8A%88%ED%8C%85-view-All) 및 [위키](https://github.com/boostcampwm-2024/web20-camon/wiki)를 참고해 주세요!

# 🧐 고민
### 🔍 [Release 브랜치? 너 필요해?](https://github.com/boostcampwm-2024/web20-camon/wiki/Release-%EB%B8%8C%EB%9E%9C%EC%B9%98%3F-%EB%84%88-%ED%95%84%EC%9A%94%ED%95%B4%3F)
- **고민 이유**: 기존 Git Flow 전략에서 Release 브랜치를 사용하는 것이 효율적인지 의문. CI/CD 자동화 과정에서 불필요한 브랜치 관리로 복잡성이 증가할 우려.
- **결론**: Release 브랜치를 생략하고 `develop` 브랜치에서 주요 검증 후 `main`에 직접 배포하도록 결정.

### 🔍 [실시간 채팅 구현: 인메모리 방식을 선택한 이유](https://github.com/boostcampwm-2024/web20-camon/wiki/%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%B1%84%ED%8C%85-%EA%B5%AC%ED%98%84%3A-%EC%9D%B8%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%B0%A9%EC%8B%9D%EC%9D%84-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0)
- **고민 이유**: Redis와 같은 영구 저장소 대신 인메모리를 사용하는 것이 적절한지 논의.
- **결론**: 성능 최적화와 낮은 지연 시간을 위해 인메모리 방식을 채택.

> 🙇‍♀️ 프로젝트의 **고민**에 대한 더 자세한 사항은 [고민 view All](https://github.com/boostcampwm-2024/web20-camon/wiki/%EA%B3%A0%EB%AF%BC-view-All) 및 [위키](https://github.com/boostcampwm-2024/web20-camon/wiki)를 참고해 주세요!

# ⚙️ 전체 서비스 아키텍쳐
> 저희 서비스의 전반적인 흐름도를 확인 할 수 있습니다.

![image](https://github.com/user-attachments/assets/f35da73a-0cc6-4aa1-b0aa-36094ffeb87e)

# 🏗️ 시스템 아키텍처
> 저희 서비스의 인프라 구축 환경을 한 눈에 보실 수 있습니다.

# 🛠️ 기술 스택

| 분야 | 기술 스택 |
|:---|:---|
| 공통 | ![PNPM](https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge&logo=pnpm&logoColor=f69220) ![TypeScript](https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white) ![TypeScript](https://img.shields.io/badge/mediasoup-895fde?style=for-the-badge&logoColor=white) |
| FE | ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) |
| BE | ![NestJS](https://img.shields.io/badge/nestjs-E0234E?style=for-the-badge&logo=nestjs&logoColor=white) ![Express](https://img.shields.io/badge/express-000000?style=for-the-badge&logo=FFmpeg&logoColor=white) ![MySQL](https://img.shields.io/badge/mysql-4479A1?style=for-the-badge&logo=mysql&logoColor=white) ![FFmpeg](https://img.shields.io/badge/FFmpeg-007808?style=for-the-badge&logo=FFmpeg&logoColor=white) |
| 인프라 | ![GitHub Actions](https://img.shields.io/badge/Ncloud-03C75A?style=for-the-badge&logo=naver&logoColor=white) ![Docker](https://img.shields.io/badge/docker-2496ED?style=for-the-badge&logo=docker&logoColor=white) ![NginX](https://img.shields.io/badge/nginx-009639?style=for-the-badge&logo=nginx&logoColor=white) ![GitHub Actions](https://img.shields.io/badge/githubactions-FF4438?style=for-the-badge&logo=githubactions&logoColor=white) |

# 👨‍👩‍👧‍👦 팀원 소개
| 김광현| 백지연 | 전희선 | 한승헌 |
|:---:|:---:|:---:|:---:|
| | | | |
| [@g00hyun](https://github.com/g00hyun) | [@zero0205](https://github.com/zero0205) | [@huiseon37](https://github.com/huiseon37) | [@seungheon123](https://github.com/seungheon123) |
| BE | FE | BE | BE |

Ecosyste.ms: Awesome

https://github.com/boostcampwm-2024/web20-camon

Awesome Lists containing this project

README

📒 팀 노션 |
🔎 위키 |
🎨 피그마 |
🗓️ 백로그

👉 Cam'On 서비스 바로가기 👈

🌟 핵심 가치 🌟

Ecosyste.ms: Awesome

https://github.com/boostcampwm-2024/web20-camon

Awesome Lists containing this project

README

📒 팀 노션 | 🔎 위키 | 🎨 피그마 | 🗓️ 백로그

👉 Cam'On 서비스 바로가기 👈

🌟 핵심 가치 🌟

📒 팀 노션 |
🔎 위키 |
🎨 피그마 |
🗓️ 백로그