StreamingGate / Playground

PlayGround

1. 프로젝트 소개

PlayGround란?

PlayGround는 실시간 스트리밍 기반의 동영상 소셜 플랫폼입니다.
동영상 플랫폼인 YouTube을 기반으로 하되, 실시간성을 강조하고 친구 기능을 추가하였습니다.

주요 기능

기능	설명	사용 기술
실시간 스트리밍	실시간 스트리밍 생성 및 시청	WebRTC - mediasoup
비디오 스트리밍	동영상 업로드 및 시청	FFmpeg
실시간 채팅	실시간 스트리밍과 비디오 스트리밍 시청 시 채팅 참여 가능. 스트리머의 경우, 고정 채팅 입력 가능	WebSocket, Stomp, SockJS
친구	친구 관계가 맺어진 유저의 온오프라인 여부 및 시청 중인 영상 조회	WebSocket, Stomp, SockJS

StreamingGate 팀원 소개

김하늬 (팀장)	이우재	서채희	이재윤
Server	Server	iOS	Front-end
@kimhanui	@kmswlee	@Chaehui-Seo	@ag502

2. 실행화면

클라이언트 (iOS)

메인페이지	비디오 플레이어	친구와 영상 같이 시청하기

실시간 스트리밍 생성	실시간 스트리밍 시청	실시간 채팅	상단 고정 채팅

회원가입	마이페이지

클라이언트 (frontend)

로그인

메인페이지 / 비디오 재생

반응형 메인 레이아웃

회원가입 페이지	마이페이지

실시간 스트리밍 생성	실시간 스트리밍 시청

친구와 함께 시청

3. 기술 스택

클라이언트 (iOS)

클라이언트 (frontend)

디자인

서버 (api)

서버 (infra)

• spring cloud gateway
• Eureka service discovery

4. 아키텍처

5. ERD

6. 프로젝트 실행

클라이언트 (iOS)

1. src/ios/PlayGround 폴더에서 pod install 실행
2. PlayGround.xcworkspace 파일 실행

클라이언트 (frontend)

1. src/frontend 폴더에서 npm install 실행
2. src/frontend 폴더에서 .env 파일 생성 후 아래 내용 복사 후 붙여넣기

REACT_APP_API = https://dev.streaminggate.shop

REACT_APP_LIVE_SOCKET = wss://streaminggate.shop:4443

REACT_APP_USER_STATUS_API = http://3.37.201.189:9999

REACT_APP_USER_STATUS_SOCKET = http://3.37.201.189:9999/ws

REACT_APP_CHAT_API = http://3.38.16.211:8888

REACT_APP_CHAT_SOCKET = http://3.38.16.211:8888/ws

REACT_APP_UPLOAD_SERVICE = http://3.39.44.188:50006

REACT_APP_PROFILE_IMAGE = https://sgs-playground.s3.us-east-2.amazonaws.com/profiles/

3. npm run start로 실행

서버 (docker-compose 사용)

docker-compose 로 서버 실행

$ cd config
$ docker-compose up -d

❗ window라면 ffmpeg 설치후 코드 수정필요

• ffmpeg 다운로드: https://ffmpeg.org/download.html
• src/server/upload-service/src/main/resources/application.yml 수정: ffmpeg:path, ffprobbe:path 값을 다운로드 받은 실행 파일 위치로 수정