[클라우딩 어플리케이션 엔지니어링 TIL] 240312, 240313 - ReactJS 비디오 에디터 제작하기 프로젝트 마무리...

Intro

---

데브코스에서 첫 프로젝트가 마무리되었다.

주말 포함 일주일 간 진행된 프로젝트였는데 필수 구현사항은 모두 구현해서 다행이었다. 휴,,

그래도 욕심으론 더 응용해서 추가 기능도 넣고 싶었는데 그러지 못해서 아쉬웠다.

 

 

 

프로젝트 결과

---

vercel로 배포

https://project1-react-js-bootstrap-three.vercel.app/

Gayeon's Video Editor

 

 

프로젝트 폴더 구조

📦src
 ┣ 📂assets
 ┃ ┣ 📜github_icon.png
 ┃ ┗ 📜video_placeholder.png
 ┣ 📂components
 ┃ ┣ 📜CustomButton.js
 ┃ ┣ 📜Footer.js
 ┃ ┣ 📜Header.js
 ┃ ┣ 📜LoadingModal.js
 ┃ ┣ 📜MultiRangeSlider.js
 ┃ ┣ 📜ToastBox.js
 ┃ ┣ 📜VideoConversionButton.js
 ┃ ┣ 📜VideoEditorMain.js
 ┃ ┣ 📜VideoPlaceholder.js
 ┃ ┣ 📜VideoPlayer.js
 ┃ ┗ 📜multiRangeSlider.css
 ┣ 📂util
 ┃ ┣ 📜readFileAsBase64.js
 ┃ ┗ 📜sliderValueToVideoTime.js
 ┣ 📜.DS_Store
 ┣ 📜App.css
 ┣ 📜App.js
 ┣ 📜index.css
 ┗ 📜index.js

 

 

비디오 데이터 상태 관리

React Context API

: 비디오 데이터와 비디오 추가/삭제 dispatch 함수는 Context로 모든 컴포넌트에 공급하도록 구현

 

비디오 업로드

: ‘비디오를 업로드해주세요’ 이미지 클릭 시 비디오 파일을 업로드

<section className={'upload-layout'}>
  <label>
    <img
      className={'video-upload-img'}
      src={video_placeholder}
      alt="비디오를 업로드해주세요"
    />
    <input
      className={'video-upload-input'}
      type="file"
      accept="video/*"
      onChange={e => {
        onChange(e.target.files[0]);
      }}
    />
  </label>
</section>

 

 

비디오 플레이어 코드

: video-react 라이브러리 사용하여 비디오 플레이어 구현

import React, { useContext, useEffect, useState } from 'react';
import { Player, BigPlayButton, LoadingSpinner, ControlBar } from 'video-react';
import { VideoFileContext } from '../App';

const VideoPlayer = ({ onPlayerChange, onPlayerStateChange }) => {
  const videoFile = useContext(VideoFileContext);
  const [player, setPlayer] = useState();
  const [playerState, setPlayerState] = useState();
  const [source, setSource] = useState();

  // 비디오 미리보기 설정
  useEffect(() => {
    setSource(URL.createObjectURL(videoFile));
  }, [videoFile]);

  // Player의 state를 변수로 저장
  useEffect(() => {
    if (playerState) onPlayerStateChange(playerState);
  }, [playerState]);

  // Player가 변경되었을 경우, (비디오 변경) Player와 Player의 state 값 변경
  useEffect(() => {
    onPlayerChange(player);

    if (player) {
      player.subscribeToStateChange(setPlayerState);
    }
  }, [player]);

  return (
    <div className={'video-player'}>
      <Player ref={player => setPlayer(player)} src={source} startTime={0}>
        <source src={source} />
        <BigPlayButton position="center" />
        <LoadingSpinner />
        <ControlBar disableCompletely></ControlBar>
      </Player>
    </div>
  );
};

export default VideoPlayer;

 

 

비디오 편집 기능

: 아래의 유튜브를 참고하여 Multi Range Slider 컴포넌트를 구현하였다.

 

https://www.youtube.com/watch?v=pTlsnFLiK6c

 

 

 

import React, { useEffect, useRef, useState } from 'react';
import './multiRangeSlider.css';

const MultiRangeSlider = ({ onSliderChange }) => {
  const [minVal, setMinVal] = useState(0);
  const [maxVal, setMaxVal] = useState(100);
  const range = useRef(null);
  const thumbLeft = useRef(null);
  const thumbRight = useRef(null);

 
  useEffect(() => {
    // 왼쪽 slider가 오른쪽 input range의 값 이상일 수 X
    const value = Math.min(parseInt(minVal), parseInt(maxVal) - 1);
    setMinVal(value);
    onSliderChange([minVal, maxVal]);

    if (range.current) {
      thumbLeft.current.style.left = `${value}%`;
      range.current.style.left = `${value}%`;
    }
  }, [minVal]);

  useEffect(() => {
	// 오른쪽 slider가 왼쪽 input range의 값 이하일 수 X
    const value = Math.max(parseInt(minVal) + 1, parseInt(maxVal));
    setMaxVal(value);
    onSliderChange([minVal, maxVal]);

    if (range.current) {
      thumbRight.current.style.right = `${100 - value}%`;
      range.current.style.right = `${100 - value}%`;
    }
  }, [maxVal]);

  return (
    <div className="middle">
      <div className="multi-range-slider">
        <input
          type="range"
          min="0"
          max="100"
          value={minVal}
          onChange={e => setMinVal(e.target.value)}
        />
        <input
          type="range"
          min="0"
          max="100"
          value={maxVal}
          onChange={e => setMaxVal(e.target.value)}
        />

        <div className="slider">
          <div className="track"></div>
          <div className="range" ref={range}></div>
          <div className="thumb thumb-left" ref={thumbLeft}></div>
          <div className="thumb thumb-right" ref={thumbRight}></div>
        </div>
      </div>
    </div>
  );
};

export default MultiRangeSlider;

 

 

비디오/GIF/음성 내보내기

: FFmpeg 라이브러리를 사용하여 구현하였다.

 

 

📁 내보내기 기능에서 사용하는 공통 함수 분리하기

• writeFile

  const writeFile = async inputFileName => {
    return await ffmpeg.writeFile(
      inputFileName,
        await fetchFile(URL.createObjectURL(videoFile))
    );
  };
  

   
• getMinMaxTime

  const getMinMaxTime = () => {
    const [min, max] = sliderValues;
    // sliderValueToVideoTime: Math.round((duration * sliderValue) / 100)
    const minTime = sliderValueToVideoTime(videoPlayerState.duration, min);
    const maxTime = sliderValueToVideoTime(videoPlayerState.duration, max);
  
    return [minTime, maxTime];
  };
  

• downloadFile

  const downloadFile = dataURL => {
    const link = document.createElement('a');
    link.href = dataURL;
    link.setAttribute('download', '');
    link.click();
  };
  

 

토스트 & 모달 띄우기

• MUI의 Snackbar, Modal 컴포넌트로 구현

 

 

 

 

프로젝트 회고

---

처음에 웹에서 CSS로 기본 레이아웃 구조를 잡는 게 생각보다 어려웠다. 😭

주로 Flex를 사용했는데 헤더를 고정시키고 나머지를 가운데 정렬하는 부분도 꽤나 힘들었다. 아직 CSS 실력이 부족한 것 같다. 계속 프로젝트 하면서 실력을 키워야지.

 

그리고 이번 프로젝트에선 새로운 라이브러리를 사용해 보았는데 video-react, FFmpeg 이러한 비디오 라이브러리를 이해하는 데에 시간이 오래 걸렸다. 그래도 이해하고 응용까지 할 수 있어서 뿌듯하였다. 향후 작업으로 배속 편집 기능을 추가하고 GIF 용량을 낮춰 저장하는 방법에 대해 알아보고 적용할 예정이다.