[React] 영상 썸네일 만들기

가끔 클라이언트 사이드에서 영상을 선택하고, 썸네일을 만들어야 하는 상황이 있다.

<input>으로 영상을 선택 후, 원하는 시간의 썸네일을 만드는 예제입니다.

 

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

export default function App() {
  const [OriginalVideo, setOriginalVideo] = useState(""); //비디오 파일 저장하는 변수
  const [MaxVideoTime, setMaxVideoTime] = useState(0); //비디오 총 시잔 저장하는 변수
  const Cnt = useRef(0);
  const onLoadFile = (e) =>{
      setOriginalVideo(e.target.files);
  }

  let letsGetThumnail= (Time) =>{
    
    if(MaxVideoTime<=Time){ //최대 시간대를 지나면 막는 조건문
      Cnt.current = MaxVideoTime;
    }else if(0>=Time){ //최소 시간대를 지나면 막는 조건문
      Cnt.current = 0;
    }else{
      Cnt.current = Time;
    }

    let videoTag = document.getElementById("videoTag");
    console.log(Cnt.current);
    
    videoTag.currentTime = Cnt.current; //최근 재생된 시간 설정
   
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    setTimeout(()=>{ //바로 출력하면 비디오가 불러오기 전이라 동작이 안됨. 잠깐의 기다림 후 캔버스에 해당 이미지를 그림.
      ctx.drawImage(videoTag, 0, 0 , 128, 72);
    },300);
  }

  useEffect(() => {
    if(OriginalVideo!==""){
      let videoTag = document.getElementById("videoTag");
      let videourl = URL.createObjectURL(OriginalVideo[0]);
      videoTag.setAttribute("src", videourl);
      videoTag.addEventListener( "loadedmetadata", function () {
        setMaxVideoTime(videoTag.duration); // 비디오 총 시긴 구하고 저장하기
        videoTag.play();
        letsGetThumnail(0);
      
       }, false); 
    }
  }, [OriginalVideo]);
  return (
    <div className="App">
      <h1>영상  썸네일</h1>
      <div style={{display:"flex", justifyContent:"center",marginBottom:"20px"}}>
        <video id="videoTag" muted style={{objectFit:"fill", }} width={128} height={72}></video>
        <canvas id="canvas" idth={128} height={72}></canvas>
      </div>
      <input type="file" id="VideoUp" name="upload[]" onChange={onLoadFile} ></input>
      <button onClick={() => letsGetThumnail(Cnt.current + 1)}>
        값 더하기
      </button>
      <button onClick={() => letsGetThumnail(Cnt.current - 1)}>
        값 빼기
      </button>
    </div>
  );
}