inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

ffmpeg로 비디오 썸네일 생성하기

typeError or 콘솔 500 뜨는분..

337

한재희

작성한 질문수 2

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

답변 0

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

0

52

1

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

0

223

1

자료 없음

0

324

1

이미지 깨짐

0

337

1

npm run dev 동작 에러

0

305

1

npm run dev 동작 에러

0

296

1

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

0

663

1

npm run dev 실행 오류

0

654

1

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

0

1057

1

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

1

468

1

오류 해결 공유

0

461

1

npm install 에러 질문드립니다.

0

1124

2

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

0

552

1

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

0

519

1

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

0

516

0

video가 안 나타나는 문제

0

894

1

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

0

472

0

npm run dev 관련 오류

0

578

1

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

0

247

0

useState 자동 생성

0

347

1

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

0

1247

2

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

0

248

0

antd Input background color 변경

0

244

0

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

0

293

0