Live Pulse 발표자료

1. 프로젝트 설명 및 배경

프로젝트

이름
- Live Pulse
설명
- Live Pulse 프로젝트는 RTMP 프로토콜과, WS, WebRTC를 이용한 송출 서버 구성 및 HLS 재생 방송 플랫폼 프로젝트 입니다
뜻
- Live Pulse라는 이름은 전 세계의 심장 박동을 실시간으로 캡처하고 사람들을 연결하고 이야기를 공유할 수 있게 해준다는 뜻입니다
기간 : 03월 ~ 06월

배경

우리는 코로나 19 팬데믹 현상으로 인해 현실에서의 대면 모임이 제한되고 사회적 거리두기가 강조되는 상황을 목격했습니다. 이로 인해 사람들은 직접적인 소셜 활동 및 대중 이벤트에 참여할 수 없게 되었고, 이에 따른 사회적 연결의 감소와 엔터테인먼트 영역의 변화가 나타났습니다.

이런 상황에서 실시간 방송 플랫폼 프로젝트를 기획하게 된 이유는 다음과 같습니다.

실시간 방송 플랫폼은 사용자들이 가상으로 모여 함께 소셜 활동을 할 수 있는 플랫폼을 제공함으로써 사회적 연결성을 유지할 수 있는 방법을 제시합니다.
실시간 방송 플랫폼은 창작자와 관객 간의 상호작용을 강화합니다. 사용자들은 실시간 채팅이나 댓글 기능을 통해 창작자와 소통하고, 직접적인 참여 및 피드백을 제공할 수 있습니다.
실시간 방송 플랫폼은 사용자들이 가상 공간에서 실시간으로 공연, 이벤트, 강연 등 다양한 콘텐츠를 경험할 수 있도록 제공합니다.

이러한 배경 속에서 실시간 방송 플랫폼 프로젝트를 진행하게 되었습니다. 저는 사람들에게 비대면 소셜 활동의 장을 제공하고, 엔터테인먼트 영역에 도움을 줄 수 있는 플랫폼을 구축하고자 합니다. 이를 통해 사회적 연결성을 증진시키고 코로나 19의 영향을 상쇄할 수 있는 기회를 제공하고자 합니다.

2. 아키텍처

프론트엔드 아키텍처

백엔드 아키텍처

대표 사용 라이브러리

3. 일정

일정

프로젝트 기획
- 사용자의 플로우나 기능에 대해 정의하고 기획합니다.
송출 서버 작업 (구축)
- 송출 서버의 플랫폼을 결정하고 서버에 구축합니다.
백엔드 작업
- 기획 단계에서 추출한 API나, 추가 채팅 서버 등등을 개발하고 구축합니다.
프론트엔드 작업
- 사용자가 보는 화면을 작업합니다.
마무리 및 발표 자료 작성
- 한 번 더 사용자의 플로우 및 검증, 테스트를 진행 후 발표 자료를 작성합니다.

세부 주차별 작업 목표

1주차 진행도
1. 송출 서버 만들기
2. mist server 설치하기
3. ssl 설정하기
4. mist server 송출 api 만들기
5. 프론트 프로젝트 세팅
6. WebRTC 송출 테스트하기
7. mist server 개발자와 컨텍 (송출 안됨 현상 개선을 위함)
3주차 진행도
1. 홈화면 페이지 개발하기
2. 방송 시청화면 개발하기
3. 방홍 hls.js 화면 개발하기
5주차 진행도
1. AntMedia - 엔터프라이즈 버전에서 커뮤니티 버전으로 다운그레이드
2. 프론트
  - 로그인, 회원가입 API 연동
  - 방송 생성, 방송 조회 API 연동
3. 프론트 API 연동 중에 axios -> fetch로 변경
4. API 서버 배포 (GithubAction)
5. API 도메인 작업 & SSL 작업
6. 방송 시청, 송출 화면 라우터 수정
2주차 진행도
1. 프론트 홈화면 페이지 개발하기
2. nestjs client, server component 학습하기
4주차 진행도
1. 송출 서버 플랫폼 교체 (AntMedia)
2. 새로운 서버 세팅
3. 웹에서 카메라 허용을 위한 ssl 설정
4. 백엔드 스택 변경
5. 백엔드 유저 회원가입,
6. 로그인, 회원 정보 수정 API
7. 백엔드 방송 생성 조회 API
8. AntMedia 서버 통신 API
6주차 진행도
1. 웹캠 안보임 현상 수정
2. 채팅 저장 (레디스) 개발
3. 방송 종료, 시작 API
4. 웹 환경에서 비디오 화면 이상한거 수정
5. 채팅 서버 구축
  - 이벤트 추가
  - gateway 추가
7주차 진행도
1. 프론트 방송 시작, 종료 API 연동
2. API 권한 문제 해결
3. 실시간 접속자수 확인 개발
4. 회원 가입 에러 수정
5. 소켓 SSL nginx 설정
6. 방송 종료 소켓 액션 추가
9주차 진행도
1. 이미지 서비스 추가 및 배포
- 도메인 세팅까지
1. 프론트 이미지 서비스 붙이기
2. 회원 수정 API 연동
3. 날짜 포멧팅 수정
4. 도메인 변경 및 SSL 세팅
8주차 진행도
1. 메인 최초 진입 시 화면 깨짐 수정
2. 방송 태그 고정 -> 태그 추가 방식으로 변경
3. 채팅 엔터 이벤트 추가
4. 미사용 페이지 미지원 서비스 표기 추가
5. 방송 시작 시 비디오 권한 체크 로직 추가
6. 방송 재생 버튼 클릭 후 버튼 안사라짐 현상 수정
7. 메인 화면 조회 API
8. 로그아웃 기능 추가
9. 방송 시작 전 상태 디테일 업

4. 코드

5. 기능 설명 및 시연

기능 리스트

사용자
1. 회원 가입
2. 회원 수정
3. 로그인
방송
1. 방송 생성
2. 방송 송출
3. 채팅

비고 - 방송과 관련한 액션은 모두 로그인 후 이용 가능합니다.

시연

https://live-pulse.hannah-log.site/home

계정
- id : tester
- pw : test1234

(자유롭게 회원가입 후 시연 가능)

6. 소감

라이브 방송 플랫폼 개발 프로젝트를 통해 새로운 스택을 사용해보았습니다. 새로운 기술을 학습하고 적용하는 도전을 경험했습니다. 결과물은 안정적이었으며, 사용자들에게 편리한 경험을 제공할 수 있었습니다. 이 프로젝트를 통해 자신감을 얻었고, 앞으로의 개발에 대한 열정이 더욱 확고해졌습니다.

목차