React 유튜브 클론

몽고 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>
   )}
  1. 클라이언트측에서 비디오 업로드 요청 보내기 (서버) 모듈설치
yarn add multer --save in Server directory
  1. 비디오 파일을 서버에 저장

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

비디오 썸네일 만들기

  1. 모듈 다운받기
yarn add fluent-ffmpeg
  1. 클라이언트 측에서 비디오 업로드 성공시 썸네일 생성 post 요청 보내기
Axios.post('/api/video/thumnail', variable)
.then (response=>{
	if(response.data.success) {
	} else {
		aleart('썸네일 생성에 실패했습니다.')
})
  1. 서버 측에서 비디오 썸네일 post 라우터 추가하기
  1. 썸네일 파일 경로 정보 클라이언트로 보내기

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

비디오 디테일 페이지

  1. 라우트 만들기

좋은 웹페이지 즐겨찾기