자바스크립트 Canvas를 활용해 동영상에서 이미지 추출해서 저장하기

라인은 동영상 url과 프리뷰 url을 같이 전송해야합니다.

 

그런데, 세일즈포스에서는 동영상 저장시 프리뷰 이미지를 제공해주지 않습니다.

고로 동영상에서 이미지 썸네일을 추출해서 저장해줘야합니다..

 

자바스크립트 단에서 할 수 있는 방법을 찾다보니 Canvas를 활용한 방법이 가장 많았더라구요.

그 외 자바스크립트 안에서 처리하는 방법은... 아직 검색실력이 모자라서인지 잘 못찾겠습니다.

 

저는 input file을 사용해서 파일을 가져오겠습니다.

<input type="file"onchange={handleAttachment}  />

 

function handleAttachment(event){
	const file = event.target.files[0];
    
    let videoElement = document.createElement('video');
    videoElement.src = URL.createObjectURL(file); 
    videoElement.muted = true;
    videoElement.preload = "auto"; //이게 auto여야지 canvas에서 이미지를 그릴 수 있습니다 
}

URL.createObjectURL로 파일을 블롭 형태의 URL로 넣습니다.

그리고, preload 가 auto 상태로 재생이 되는 상태여야 canvas에서 drawImage를 통해 이미지를 생성할 수 있습니다. 하지 않으면, png일경우 투명으로  jpeg 일때는 검은색으로 생성됩니다.

 

videoElement.oncanplay = (event) =>{
	let canvas = document.createElement('canvas');
    canvas.width = videoElement.videoWidth;
    canvas.height = videoElement.videoHeight;
    
    let ctx = canvas.getContext('2d');
    ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
   	
    const dataUri = canvas.toDataURL(); //base64 형태의 이미지로 저장.. data:image/png;base64,if25~~~
    var base64Mark = 'base64,';
    var dataStart = dataUri.indexOf(base64Mark) + base64Mark.length;
    let fileData = dataUri.substring(dataStart); 
    
    //fileData로 클래스단에서 파일 저장작업...
}

 

저는 비디오 이벤트를 canplay를 사용했습니다. 다른 분들은 거의 loadData나 loadmetaData를 많이 사용했는데, 그걸로 하니까 mp4는 이벤트가 읽히는데 다른 파일들은 안읽히더라구요...ㅠㅠ 그래서 저는 canplay를 사용했습니다. 해당 이벤트를 사용하니 잘 작동했어요!

 

비디오 파일이 로딩이 다 된 후에 videoWidth와 videoHeight를 읽어올 수 있습니다. 해서 이벤트가 발동 된 후에 canvas를 생성하고 drawImage를 했습니다.

 

이후에, canvas.toDataURL()을 통해 base64파일로 만들었고, 뒤에 파일 데이터 부분만 따로 뜯어서 저는 세일즈포스 내에서 파일 저장작업을 했습니다!

 

 

파일에 대해 이해가 부족해서, 며칠을 헤맸었는데 정답은 가까운곳에 있었네요... 역시 너무 많은 구글링보다는 문서를 잘 읽어보고 파악하는게 더 중요한것 같습니다 ㅠㅠ