React_썸네일 기능

 

0. ffmpeg 다운

: [ React 사전 - tool 설치 ] 글 참고

 

1. client에서 server로 

 videoUploadPage.js 

 

[ if 비디오 업로드에 성공하면 ]

 

>> variable을 axios 함.

if(response.data.success){

                    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){

                                setDuration(response.data.fileDuration)

                                setThumbnailPath(response.data.url)

                            }else{

                                alert('썸네일 생성에 실패 했습니다.')

                            }

                        })

                }else{

                    alert('비디오 업로드를 실패했습니다.')

                }

 

 

2. server에서 비디오정보 가져오기

: .ffprobe 메소드 이용 (metadata 가져옴)

let fileDuration=""

 

ffmpeg.ffprobe( req.body.url(파일 경로), function(err,metadata){

        console.dir(metadata); //all metadata

        console.log(metadata.format.duration);

        fileDuration = metadata.format.duration

    })

 

 

3. server에서 썸네일 생성 및 저장

: ffmpeg 메소드 이용 (on, screenshots 등)

let filePath=""

ffmpeg ( req.body.url (=경로) )

    .on('filenames', function(filenames){   //파일 이름 생성

        console.log('Will generate' + filenames.join(','))

        console.log(filenames)

 

        filePath = "uploads/thumbnails/" + filenames[0]    (uploads폴더 내에 thumbnails 폴더 만들것.)

    })

    .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});

    })

    .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'

    })

 

 

4. client에서 썸네일 이미지 불러오기

  1) state 설정

    const [filePath, setfilePath] = useState("")

    const [Duration, setDuration] = useState("")

    const [ThumbnailPath, setThumbnailPath] = useState("")

 

 

  2) axios 구문에 setState 활용

Axios.post('/api/video/uploadfiles', formData, config)

            .then(response=>{

                if(response.data.success){

                    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){

                                setDuration(response.data.fileDuration)

                                setThumbnailPath(response.data.url)

                            }else{

                                alert('썸네일 생성에 실패 했습니다.')

                            }

                        })

                }else{

                    alert('비디오 업로드를 실패했습니다.')

                }

            })

 

 

  3) thumbnail div에 이미지 불러오기

 

{ThumbnailPath &&    (ThumbnailPath가 있을 경우에만 이미지 생성)

            <div>

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

            </div>

}