몽고 db 클러스터 생성하기

디자인하기

비디오 업로드하기

1. 모듈 설치

yarn add react-dropzone --save

2 컴포넌트 form 안에 다음과 같이 추가
( )
1)

(components/VideoUploadPage/VideoUploadPage.js)

<Dropzone onDrop multiple maxSize>
{
({getRootProps, getInputProps}) =>(
	<div style={{width: '300px', height: '240px', border: '1px solid lightgray', display: 'flex', alignItems: 'center',justifyContent:'center'}} {..getRootProps()}>
    <input {...getInputProps()}/>
    <Icon type="plus" style={{ fontSize:'3rem'}}/>
    </div>
   )}

3. 클라이언트측에서 비디오 업로드 요청 보내기 (서버) 모듈설치

yarn add multer --save in Server directory

4. 비디오 파일을 서버에 저장

5. 저장 경로를 클라이언트로 전달

비디오 썸네일 만들기

1. 모듈 다운받기

yarn add fluent-ffmpeg

2. 클라이언트 측에서 비디오 업로드 성공시 썸네일 생성 post 요청 보내기

Axios.post('/api/video/thumnail', variable)
.then (response=>{
	if(response.data.success) {
	} else {
		aleart('썸네일 생성에 실패했습니다.')
})

2. 서버 측에서 비디오 썸네일 post 라우터 추가하기

4. 썸네일 파일 경로 정보 클라이언트로 보내기

5. 썸네일 이미지를 화면에 표시

비디오 디테일 페이지

1. 라우트 만들기