inflearn logo
강의

Course

Instructor

Node and React series that you can learn by following - Creating a YouTube site

Generating video thumbnails with ffmpeg

typeError or 콘솔 500 뜨는분..

336

baskinhee5672

2 asked

0

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

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 설치 해야합니다!

redux nodejs mongodb react

Answer 0

npm i하면 바로, 라이브러리 오류없이 받아지고, 구동되는 소스는 없나요?

0

52

1

ERROR in ./node_modules/antd/es/version/index.js 2:15-22

0

221

1

자료 없음

0

321

1

이미지 깨짐

0

334

1

npm run dev 동작 에러

0

304

1

npm run dev 동작 에러

0

294

1

npm run dev 동작에러납니다...

0

660

1

npm run dev 실행 오류

0

653

1

비디오 업로드, 로그인, 회원가입 504 error

0

1056

1

시작부터 오류생기시는 분들 해결법입니다.

1

466

1

오류 해결 공유

0

458

1

npm install 에러 질문드립니다.

0

1120

2

아예 몽고DB에 연결한다고만 하고 연결이 안되고 있습니다.

0

550

1

해당 오류 해결 방법 좀 알려주세요 ㅠㅠ

0

515

1

로컬스토리지에 대한 질문입니다!!

0

515

0

video가 안 나타나는 문제

0

893

1

ffmpeg 설치 후 cannot read property 'format' of undefined 500 에러 해결

0

470

0

npm run dev 관련 오류

0

578

1

답글이 달리지않고 디비에도 저장되지않으며 새로고침이 됩니다.

0

246

0

useState 자동 생성

0

345

1

TypeError: Cannot read properties of undefined (reading 'format')

0

1245

2

userData undefined / state에 user.userData가 없습니다.

0

246

0

antd Input background color 변경

0

238

0

VideoDetailPage.js 비디오영상 렌더링할 때 썸네일도 안나오고 영상 재생도 안되시는 분들

0

291

0