3. 비디오 썸네일 생성하기 - 유튜브 클론 코딩

 

1. fluent-ffmpeg를 다운받기 위해 ffmpeg 

https://kyoko0825.tistory.com/entry/%EC%9C%88%EB%8F%84%EC%9A%B0-10%EC%97%90%EC%84%9C-ffmpeg-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

윈도우 10에서 ffmpeg 사용하기

* 맥을 사용하고 있다면 vs code 커맨드라인에서 깃으로 brew install ffmpeg 명령어로 다운받을 수있다. 그러나 윈도우를 사용하기 있다면 위의 사이트에서 다운받은 후 블로그내용에있는 환경변수설정까지 완료해주자.

1.2  npm install fluent-ffmpeg 로 dependecy다운해주자(노드.js에서다운!)

2,3,4.  썸네일을 서버에 저장하고 클라이언트에 보내는 코드(video.js)

const ffmpeg = require("fluent-ffmpeg");

router.post("/thumbnail", (req, res) => {
  //썸네일 생성 하고 비디오 러닝타임도 가져오는 api

  let fileDuration = "";
  let filePath = "";
  //비디오 정보 가져오기
  ffmpeg.ffprobe(req.body.url, function (err, metadata) {
    //url을 받으면 해당 비디오에대한 정보가 metadata에담김
    console.log(metadata); //metadata안에담기는 모든정보들 체킹
    fileDuration = metadata.format.duration; //동영상길이대입
  });
  //썸네일 생성
  ffmpeg(req.body.url) //클라이언트에서보낸 비디오저장경로
    .on("filenames", function (filenames) {
      //해당 url에있는 동영상을 밑에 스크린샷옵션을 기반으로
      //캡처한후 filenames라는 이름에 파일이름들을 저장
      console.log("will generate " + filenames.join(","));
      console.log("filenames:", filenames);

      filePath = "uploads/thumbnails/" + filenames[0];
    })
    .on("end", function () {
      console.log("Screenshots taken");
      return res.json({
        success: true,
        url: filePath,
        fileDuration: fileDuration,
      });
      //fileDuration :비디오 러닝타임
    })
    .on("error", function (err) {
      console.log(err);
      return res.json({ success: false, err });
    })
    .screenshots({
      //Will take screenshots at 20% 40% 60% and 80% of the video
      count: 3,
      folder: "uploads/thumbnails",
      size: "320x240",
      //'%b':input basename(filename w/o extension) = 확장자제외파일명
      filename: "thumbnail-%b.png",
    });
});

 

5.클라이언트(리액트) 에서 Axios통신으로 동영상 정보를 건네주고 해당 썸네일을 응답받아 뷰에 표시하는 코드 (VideoUploadPage.js)

5-1. state값설정

const VideoUploadPage = () => {
  const [VideoTitle, setVideoTitle] = useState('')
  const [Description, setDescription] = useState('')
  const [Private, setPrivate] = useState(0)
  const [Category, setCategory] = useState('Film & Animation')

  const [FilePath, setFilePath] = useState('')
  const [Duration, setDuration] = useState('')
  const [ThumbnailPath, setThumbnailPath] = useState('')

5-2.Axios로 서버와 통신하는 코드

const onDrop = (files) => {
    //올린파일에대한 정보가 files에대입

    let formData = new FormData()
    const config = {
      header: { 'content-type': 'multipart/form-data' },
    }
    formData.append('file', files[0])

    Axios.post('/api/video/uploadfiles', formData, config).then((response) => {
      if (response.data.success) {
        console.log(response.data)

        let variable = {
          url: response.data.url,
          fileName: response.data.fileName,
        }
        setFilePath(response.data.url) //동영상주소

        Axios.post('/api/video/thumbnail', variable).then((response) => {
          if (response.data.success) {
            console.log(response.data)
            setDuration(response.data.fileDuration) //동영상길이
            setThumbnailPath(response.data.url) //썸네일주소
          } else {
            alert('썸네일 생성에 실패했습니다.')
          }
        })
      } else {
        alert('비디오 업로드를 실패했습니다.')
      }
    })
  }
  return (
    ....이하생략

5-3 썸네일 이미지 띄우는 코드

		{/* 썸네일부분 */}
          {ThumbnailPath !== '' && (
            <div>
              <img src={`http://localhost:5000/${ThumbnailPath}`} alt="haha" />
            </div>
          )}
        </div>
        ...이하생략

 실행결과 ↓

실행결과

해당동영상강의를참고해주세요!(JohnAhn 님의 유튜브강의)