React 비디오 에디터 만들기 프로젝트

프로젝트 목표

기존 요구 사항 및 추가 진행 기능동작을 목표로 한다.

 

기존 요구 사항

1. 비디오 업로드(완료)

2. 비디오 플레이어 (완료)

3. 비디오 편집 (완료)

4. 비디오 다운로드 (완료)

 

추가 진행

1. 비디오 업로드 진행률 표시 (완료)

2. 재생 시간 표시 (완료)

3. 유튜브 영상 검색 후 해당 영상 편집 (완료)

4. 비디오 음성 다운로드 (완료)

 

사용한 라이브러리, 프레임워크,API

라이브러리

React

Ant Design

react Bootstrap

ffmpeg

react-player

react-router-dom

ytdl-core

프레임워크

Flask(python)

API

youtube data api v3

 

이슈사항

디자인 부분 미흡(반응형,새로고침시 화면 넓이에 맞게 변경필요한 상황, 추후 수정 예정)

코드 중복 제거 및 구조화(코드 작성시 중복된 코드와 구조화 필요)

 

프로젝트 정리 및 향후 작업및 소감

5일간 진행된 프로젝트에서 기존 비디오 에디터 강의를 참고하여 작업을 진행, 기본 기능을 구현한 후, 추가적으로 YouTube 영상 목록을 불러와 편집할 수 있는 기능을 추가하였다.

디자인 부분의 미흡한 점을 추후 수정할 계획

 

기억에 남는 점

FFmpeg 사용시 Cross-Origin

FFmpeg를 이용하여 영상 편집 및 업로드 작업을 수행
Cross-Origin 이슈로 인해 설정을 추가 설정

* https://mr-cho.tistory.com/288

[파트7] React 비디오 에디터 만들기 CORS 에러 정리

* vercel 배포시 추가 설정 필요

 https://velog.io/@jeajea0127/Vercel%EC%97%90%EC%84%9C-proxy-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

Vercel에서 proxy 설정하기

YouTube 영상 다운로드

보안상의 이유로 백엔드에서 영상을 다운로드한 후 프론트엔드로 넘겨주어야 했다.
이를 위해 간단한 백엔드 서버를 구현

배포 시 HTTPS 통신

배포 시 백엔드 HTTPS 통신을 위해 도메인 설정과 SSL을 적용

비디오 플레이어 문제 해결

기존에 video-react를 이용하여 영상을 플레이했으나, 세로 영상에서 비율이 늘어나는 문제 발견
이 문제를 react-player 라이브러리로 대체하여, 속성값에 세로 높이를 고정으로 설정하여 손쉽게 해결

 

github 주소

https://github.com/josungman/Programmer-s_Web_App_Dev_Course/tree/main/week10-11/w11_part3/video-edit

Programmer-s_Web_App_Dev_Course/week10-11/w11_part3/video-edit at main · josungman/Programmer-s_Web_App_Dev_Course

 

배포주소(vercel 이용)

https://sungmanvideoedit-josungmans-projects.vercel.app/

React App

 

시연 이미지(PC)

고양이 검색시 유튜브 목록 검색하여 추출[10개,숏영상만 추출될 수 있도록 셋팅]

금일 YouTube API 할당량 초과 또는 통신 에러 발생시 VideoID로 다운 가능하도록 버튼 대체 * 에러 시에만 표시됨

 

 

시연이미지(모바일)