Skip to content

WebRTC를 이용한 화상 PT와 수강신청 커뮤니티 서비스

Notifications You must be signed in to change notification settings

rootkwak528/PiT

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

issue ubuntu
openvidu spring node vue
vuex element-plus bootstrap


P;T 피땀눈물

목차

1. P;T 소개
2. 개요
3. 기술 스택
4. 형상 관리
5. 주기능 소개
6. 서버 구조
7. 데이터베이스 구조
8. 실행 방법
9. Contributor



1. P;T 소개

  • 개발기간 : 2021.07.12 - 2021.08.20
  • 개발인원 : 곽호근, 서민영, 서요셉, 안대현, 윤영은
  • 주제 : 화상 PT와 클래스 신청 서비스를 연계한 통합 웹 서비스
  • 역할
    overview - role and responsibilities
    • Backend : 서요셉, 안대현
    • Frontend : 서요셉, 윤영은
    • WebRTC : 곽호근, 서민영


2. 개요

홈트도 😎 전문가와 함께 하세요!

🥱 바쁘다바빠! 현대사회와 😷 COVID19로 인해 언택트 라이프가 일상에 자리잡았습니다.

P;T는 코로나 감염 우려로 헬스장에 가지 못하는 사용자들을 위해 화상미팅 기능을 이용한 PT 서비스와 클래스를 탐색해 신청하고 관리할 수 있는 통합 웹 사이트를 제공하는 서비스입니다.

여러가지 운동 카테고리를 제공하여 클래스 탐색을 도와줍니다. 일대일, 일대다 수업으로 전문적인 코칭은 물론 모두 함께 수업하며 운동 시너지를 낼 수 있습니다.

P;T 기획 배경

overview - project background 1 overview - project background 2 overview - project background 3

P;T 기능

overview - project services



3. 기술 스택

technical stack - frontend and backend technical stack - infra and communication



4. 형상 관리

Notion

managiment tool - notion

Jira

managiment tool - jira



5. 주기능 소개

사용자별 권한 및 역할

  • 관리자 : 클래스 개설 승인/거절 권한
  • 트레이너 : 클래스 개설 신청 권한, 트레이닝룸 개설 권한
  • 수강생 : 클래스 수강 신청 및 찜하기 권한, 본인 수업 녹화본 시청 권한
  • 공통 권한 : 로그인, 로그아웃, 회원가입, 마이페이지 조회/수정, 클래스 상세 조회, 상세 검색
  • 비회원 이용 가능 서비스 : 회원가입, 클래스 목록 조회, 클래스 상세 조회, 상세 검색

주기능 1) 클래스 개설

page - class opening

트레이너가 클래스 개설 신청을 하게됩니다. 관리자는 관리자 클래스 목록조회에서 클래스 개설 검수를 하여 승인/거절을 합니다.

주기능 2) 클래스 신청

page - class enrollment

관리자로부터 승인 받은 클래스들만 수강생들에게 보여지며, 수강생들은 이 클래스들의 상세정보를 조회할 수 있습니다. 상세보기 화면에서 클래스를 보고 원하는 클래스를 찜목록에 두거나, 신청을 할 수 있습니다.


주기능 3) PT Room 개설 및 입장

page - pt room opening and entering 1 page - pt room opening and entering 2

트레이너관리자로부터 본인이 개설한 클래스가 승인되면, 본인의 마이클래스 – 수강중클래스 탭에서 개설한 클래스 목록 조회가 가능하고 PT룸을 개설할 수 있게 됩니다.

수강생은 본인이 신청한 클래스를 본인의 마이클래스 – 수강중클래스 탭에서 신청한 클래스 목록조회가 가능하고 트레이너가 방을 개설해야만 PT룸에 입장할 수 있게 됩니다.


주기능 4) 화상 수업 및 녹화

page - pt room recording 1 page - pt room recording 2

화상 PT룸에 들어오면 개인별 영상이 녹화가 시작되며, 종료하게 되면 그 영상은 저장이 됩니다. 사용자는 그 영상을 녹화된 영상 목록에서 조회해서 다시보기와 다운로드가 가능합니다.



6. 서버 구조

WebRTC 구조

architecture - webrtc

WebRTC 는 크게 통화기능, 녹화기능이 있습니다. 이를 구현하기 위해 OpenVidu로 클라이언트를 만들고, 서버로는 OpenVidu 서버와 Kurento 미디어 서버가 사용되고 있습니다. 이들은 각각 REST API, WebSocket, webRTC로 통신하고 있습니다.

  • WebRTC : WebSocket을 사용해서 1:1 (Peer to Peer) 통화 API
  • Kurento : 1:1 만 가능한 WebRTC의 한계를 극복해주는 미디어서버
  • OpenVidu: Kurento로 쉽게 개발할 수 있게 해주는 프레임워크

REST API 통신 구조

architecture - entire service

사용자들이 로그인하여 클래스를 조회하는 웹페이지는 백엔드, 프론트엔드 서버에서 구성이 되고 화상 PT룸으로 입장할때는 443포트로 OpenVidu 서버에서 화상피티가 진행되고 녹화 비디오가 저장될때, 피티룸의 인원체크를 할때 백엔드서버와도 통신을 합니다.



7. 데이터베이스 구조

db erd



8. 실행 방법

BackEnd

  1. 디렉토리를 이동합니다.
cd backend
  1. gradle 프로젝트를 빌드합니다.
./gradlew build
  1. ./gradlew build 가 안되면 아래 명령어를 실행 후 빌드합니다.
chmod 777 gradlew
  1. build/libs로 이동하고 생성된 .jar 파일을 실행합니다.
cd build/libs
java -jar backend-0.0.1-SNAPSHOT.jar

FrontEnd

  1. 디렉토리를 이동합니다.
cd frontend
  1. 필요한 package들을 설치합니다.
npm install
  1. 실행합니다.
npm run serve

WebRTC

  1. 아래 링크 참고하여 OpenVidu 서버를 설치하고 실행합니다. (단, Linux 환경에서만 설치 가능) https://docs.openvidu.io/en/2.19.0/deployment/ce/on-premises/
./openvidu start
  1. 본 레포지토리에 포함된 OpenVidu 클라이언트를 실행합니다.
cd webRTC/pit_ptroom/mvn package exec:java


9. Contributor



Fin.