인프런 커뮤니티 질문&답변

저도 잘 모르지만.. 몇시간을 찾고 구글링에.. 아무튼 그랬습니다.. 해결은 됐는데 코드를 보여드리자면

routes/video.js (back단)

router.post("/thumbnail", (req, res) => {

  let thumbsFilePath ="";
  let fileDuration ="";
  ffmpeg.ffprobe(req.body.filePath, function(err, metadata){
    console.log(metadata);
    console.log(metadata.format.duration);

    fileDuration = metadata.format.duration;
  })


  ffmpeg(req.body.filePath)
    .on('filenames', function (filenames) {
      console.log('Will generate ' + filenames.join(', '))
      thumbsFilePath = "uploads/thumbnails/" + filenames[0];
    })
    .on('end', function () {
      console.log('Screenshots taken');
      return res.json({ success: true, thumbsFilePath: thumbsFilePath, fileDuration: fileDuration})
    })
    .screenshots({
      // Will take screens at 20%, 40%, 60% and 80% of the video
      count: 1,
      folder: 'uploads/thumbnails',
      size:'320x240',
      // %b input basename ( filename w/o extension )
      filename:'thumbnail-%b.png'
    });

});

VideoUploadPage.js (front단)

const onDrop = (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 = {
        filePath: response.data.filePath,
        fileName: response.data.fileName
      }
      setFilePath(response.data.filePath)

      axios.post("/api/video/thumbnail", variable).then((response) => {
        if (response.data.success) {
          setDuration(response.data.fileDuration)
          setThumbnail(response.data.thumbsFilePath)
        } else {
          alert("썸네일 에러 발생");
        }
      });
    } else {
      alert("업로드 실패");
    }
  });
};

라고 됐습니다.. 혹시 필요하신분은 참조하시길 바라요~

아 물론 윈도우라 ffmpeg 설치 해야합니다!