바다서원 - Ocean Academy

🪼 Overview

오늘은 학생, 내일은 선생님!

• 🦀 쉽고 빠른 가입과 강의 개설, 실시간 라이브 강의를 볼 수 있는 웹 어플리케이션
• 🦀 라이브 중 채팅을 통해 즉각적으로 이루어지는 의사소통

🐬 Duration

• 🦀 2024.07.25 - 2024.10.04

🐬 Sitemap

• 🦀 배포된 주소
• 🦀 디스콰이엇
• 🦀 Backend
• 🦀 미디어중계서버

🪼 About the Project

• 오프라인 교육의 실시간 소통과 온라인 플랫폼의 접근성을 결합한 라이브 강의 플랫폼
• WebRTC 기반의 미디어 전송 최적화
• 클라우드 인프라를 도입하여 확장성 개선 및 동시 접속자가 많은 상황에서도 안정적인 스트리밍 환경 제공
• 언제 어디서든 안정적인 환경에서 집중할 수 있는 교육 환경을 제공하는 것이 목표

🪼 Technologies

🐡 Frontend

• React.js 18.3.1
• TypeScript 4.9.5

🐡 Database

• MySQL 8.1.2
• Redis 6.2.6

🐡 Backend

• Spring Boot 3.3.2
• Spring Security 6.2.1
• Spring Batch 5.1.0

🐡 Media Server

• Node.js 14.17.3
• Express 4.16.4
• Mediasoup 3.0.0

🪼 Key Features

1. 강의 탐색 및 수강 신청

   사용자들은 플랫폼 메인 페이지에서 다양한 개설된 강의를 둘러볼 수 있다. 강의 소개 페이지에서는 강의 내용, 커리큘럼, 강사 정보 등을 자세히 확인할 수 있고, 관심 있는 강의를 발견하면 “수강 신청” 버튼을 통해 간편하게 등록할 수 있다.

2. 라이브 스트리밍 강의

   라이브 강의에서는 강사가 여러 수강생에게 웹캠 영상, 화면 공유 영상, 오디오를 실시간으로 전송할 수 있다.

3. 실시간 채팅

   라이브 강의 중 강사와 수강생 간의 실시간 소통을 위해 채팅 기능을 도입하였다. 이를 위해 WebSocket을 사용하였다.

4. 인기강의 순위 제공

   강의 순위 결정 과정은 매일 오전 2시에 일괄적으로 수행되도록 설계되었다. 대용량 데이터의 효율적인 처리를 위해 Spring Batch를 활용하였다.
   
   

🪼 Architecture

🪼 데모 영상

🪼 Team Nemo

---

Acknowledgement

• mediasoup-sample-app

License

Licensed under the MIT License, Copyright © 2024-present Nemo