<center><img src="https://i.imgur.com/wf2hHlL.png"></center>
<br>
<center>
<p align="center">
<img src="https://img.shields.io/badge/github-GIVEME--STAR-red">
<a href="https://github.com/connect-foundation/2019-19/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc">
<img src="https://img.shields.io/github/issues/connect-foundation/2019-19"/>
</a>
<a href="https://github.com/connect-foundation/2019-19/wiki">
<img src="https://img.shields.io/badge/License-MIT-brightgreen"/>
</a>
</p>
</center>

### 소개
> #### :tv: Netflix clone project
> 컨텐츠 맞춤 추천을 기반으로 세상 모든 비디오를 스트리밍하는 서비스입니다.
>

#### [:point_right: Homepage](http://www.abdvideo.ml/)

#### [:memo: Documentations](https://github.com/connect-foundation/2019-19/wiki)

#### :tv: Demo Video (click :point_down:)

[![[부스트캠프 2019 19조 - 안봐도 비디오] 데모 동영상](http://img.youtube.com/vi/XcDHMs2Ni4k/0.jpg)](http://www.youtube.com/watch?v=XcDHMs2Ni4k "Demo Video")

<hr>

### 개발기간
- 2019.11.4 ~ 2019.12.19

### 팀원

| [김민성](https://github.com/minsung1129) | [김한비](https://github.com/KKambi) | [신정수](https://github.com/jngsoo) |[윤경호](https://github.com/zoomspeed)|
| -------- | -------- | -------- |----|

### 개발환경
- Node (12.13.0) + Express (4.16.1)
- React (16.11.0) + Webpack (4.41.2)
- npm (6.13.0)
- Elastic Search + Logstash + MySQL
- nCloud
- Server
- App Server
- DB Server
- Segmenter Server
- Object Storage (Logstash JSON)
- Object Storage (Thumbnails videos & Streaming Data)
- CDN+
- VOD Transcoder

### 설치
1. 각 서버에 필요한 패키지 설치

#/api-server
npm install
#/client-server
npm install

2. 리액트 빌드

#client-server
npm run build

3. 환경변수 및 인프라 관련 설정
- `/api-server/.env`
- `/segmenter-server/.env`
- `/api-server/config/config.json`

### 기능
#### client-server
- 메인 영상 썸네일
- 영상별로 좋아요 & 찜하기
- 회원별로 추천기능
- 영상 검색 기능
- 장르별 영상 카로셀
- 비디오 플레이어
- 무한 스크롤

#### api-server
- 컨텐츠 정보에 대한 API 응답
- 구글 로그인

#### elastic-server
- elastic search 검색엔진을 사용, DSL쿼리 적용
- logstash로 로그수집 및 분석가능
- shell script, crontab schedule으로 벌크로 가져온 데이터 1분마다 sync
- API 호출로 해당 요청에 대한 JSON 형식의 응답

#### segmenter-server
- 원본 영상 업로드
- nCloud VOD Transcoder를 통한 트랜스코딩(360p, 480p, 720p)
- 트랜스코딩된 영상을 다운로드받아, 스트리밍 데이터로 분할(m3u8 + ts)
- 영상 정보 및 스트리밍 데이터 url(CDN+) DB에 저장
- 스트리밍 데이터 업로드

<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>

---
# 데일리 스크럼

# 12.20 금
## 어제 한 일

- 김민성
- 콘솔에 나오는 에러 제거
- map에 unique한 key를 정해주기
- useEffect 두번째인자 오류
- font오류 등
- 코드상의 불필요한 console.log, alert 삭제
- 신정수
- 동영상 플레이어 키 이벤트 버그 해결
- 동영상 플레이어 키 이벤트에 따른 UI 효과 추가
- 배포

## 오늘 할 일
- README.md 업데이트
- 마지막 데모

## 이슈

# 12.19 목
## 어제 한 일

- 김민성
- 동영상 화질에 관한 버그 수정
- 화질이 다르게 표시되지 않아 영상 재업로드
- 동영상이 나오지 않는 버그 수정
- 대체로 나올 동영상 추가

- 신정수
- sessionStorage를 활용해 불필요한 api 요청 줄임
- 적용한 부분
- 인기 콘텐츠 (sessionStorage 내 5분 지속)
- 각 콘텐츠의 태그 정보 (sessionStorage 내 10분 지속)
- 퍼블리싱 일부 추가 및 수정
- 콘텐츠 상세 정보 제목 크기 줄임
- 구글 로그인 아이콘 추가

## 오늘 할 일

- 스크롤, 캐러셀 디바운스 개선
- 불필요한 console.log, alert 코드 모두 지우기
- 브라우저 console창에 빨간색 버그 메세지 모두 지우기
- 플레이어 화질 변경 바탕 css
- 제목 줄일 수 있는 부분 줄이기 (검색 결과에 영향을 적게주는 선에서)

## 이슈
- Bug
- Player 컴포넌트에서 방향키 이벤트, 스페이스바 등 재생 및 탐색관련 이벤트가 제대로 처리되지 않는 버그

<br><br><br>

---
# Logo
- white
- black

- lightgray
- dimgray
- n


- Google Login Logo

- Favicon