[React_Youtube-Clone] ffmpeg로 비디오 썸네일 생성

 

FFmpeg란?

• 마이클 니더마이어(Michael Niedermayer)의 주도하에 개발되고 있는 모든 동영상, 음악, 사진 포맷들의 디코딩과 인코딩을 목표로 만들어지고 있는 오픈 소스 프로젝트

 

1.  썸네일 생성을 위한 Dependency 다운 받기

1) 터미널에서 brew install ffmpeg

 

• fluent-ffmpeg를 다운 받기 위한 필수 조건

 

2) 터미널에서 npm install fluent-ffmpeg

 

 

2. 서버에 저장된 비디오를 이용한 썸네일 생성 및 저장

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


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

    //썸네일 생성 하고 비디오 러닝타임도 가져오기

    let filePath = ""
    let fileDuration = ""

    //비디오 정보 가져오기
    ffmpeg.ffprobe(req.body.url, function (err, metadata) {
        console.dir(metadata);      // all metadata
        console.log(metadata.format.metadata);
        fileDuration = metadata.format.duration;
    })

    //썸네일 생성
    ffmpeg(req.body.url)
    .on('filenames', function (filenames){
        console.log('Will generate' + filenames.join(', '));
        console.log(filenames);

        filePath = "uploads/thumbnails/" + filenames[0];
    })
    .on('end', function () {
        console.log('Screenshots taken');
        return res.json({ success: true, url: filePath, fileDuration: fileDuration });
    })
    .on('error', function (err) {
        console.error(err);
        return res.json({ success: false, err });
    })
    .screenshot({
        count: 3,                               //3개의 스크린샷
        folder: 'uploads/thumbnails',           //uploads/thumbnails 폴더에 저장
        size: '320x240',
        //'%b': input basename (filename w/o extension)
        filename: 'thumbnail-%b.png'
    })
})

 

 

3. 썸네일 이미지 파일 경로 정보를 클라이언트에서 받기 

    const [FilePath, setFilePath] = useState("");
    const [Duration, setDuration] = useState("");
    const [ThumbnailPath, setThumbnailPath] = useState("");
    
    
    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('썸네일 생성에 실패 했습니다.');
        }
    })

 

 

 

5. 썸네일 이미지를 화면에 표시

{ThumbnailPath &&
    <div>
        <img src = {`http://localhost:5000/${ThumbnailPath}`} alt = "thumbnail" />
    </div>
}