ffmpeg wasm

우리는 webm확장자에서 mp4확장자로 바꿔주려고한다. 이 때 사용할 소프트웨어는 ffmpeg이다. 또 이걸 활용하여 썸네일도 추출해보려고 한다.

원래 ffmpeg는 콘솔에서 실행해야하여 백엔드에서 해줘야한다. 근데 백엔드에서 처리하려면 좋은서버가 필요하다.
메모리..그래픽장치등 여러가지가 필요하기 때문이다. 이 문제를 해결하기위해서 webassembly를 사용해보자

webassembly는 기본적으로 웹사이트가 매우 빠른 코드를 실행할 수 있게 해준다. 원래 front상에서는 html css js밖에 못쓴다 예를들어 go , c등은 쓸 수 가없고 back에서만 쓸 수 있다. 근데 webassembly를 사용하면 프론트엔드에서 매우 빠른 코드를 실행할 수 있다. 

즉 webassembly를 통해서 웹에서 ffmpeg를 실행시켜 mp4로 변환하는 것이다. 이건 나의 서버에서가 아닌 사용자의 컴퓨터를 사용한다.  우리는 우리서버의 처리능력을 사용하지 않을 것이다. ffmpeg는 c언어 인데 웹어셈블리를 사용하면 브라우저에서 ffmpeg를 실행 시킬 수 있다.

 

공식문서에 따라설치를 진행해주자

log: true 옵션을 주면 진행상황을 log에 띄워준다.

제일 처음 ffmpeg를 await ffmpeg.load()해줘야한다. 사용자가 소프트웨어를 사용할 것이기 때문이다.

ffmpeg.FS()세가지 method가 있다. "writeFile 은 ffmpeg의 가상의 세계에 파일을 생성해준다.

ffmpeg.FS("writeFile","my.webm",await fetchFile(videoUrl))

두번째에는 파일이름 세번째에는 바이너리 데이터를 넣어줘야하는데 이때 await fetchFile(videoURL)을 적어준다.

이 파일을 mp4확장자로 바뀌기 위해서 명령어를 사용해야한다. 

await ffmpeg.run("-i","my.webm","my.mp4")

지금 브라우저의 메모리에는 output.mp4라는 파일이있다.

우선 이 파일을 불러와야겠따.

const mp4File = ffmpeg.FS("readFile","my.mp4")
console.log(mp4File)
console.log(mp4File.buffer)

 

mp4File은 Uint8array 이다. 실제 파일을 나타낸다. 하지만 이거가지곤 아무것도 할 수가 없다. 그래서 자바스크립트 세계의 파일과 같은 blob을 만들거다. 우리는 이 배열로부터 blob을 만들어 내는거다.

Uint8Array만으로는 만들 수 없지만 binary data를 추출하면 가능하다.
arrayBuffer는 raw binary data를 나타내는 object이다. 

여기서 기억해야될 것은 binary data를 사용하고 싶다면 buffer를 사용해야 한다는 것이다.

blob을 만들어 보자. const mp4Blob = new Blob()배열안에 배열을 받을 수 있다. 그래서 배열을만들고 그 안에 buffer을 넣어준다. 전에도 blob을 사용한 적이 있었다. 전에 event.data가 blob이었다.

이 data를 우리가 접근할 수 있는 URL에 넣을 수 있다는걸 알았다. mp4URL을 만들것이다. URL.createObjectURL(mp4Blob)을 통해 저번처럼 브라우저 상에 URL을 만들어 저장해두고 그 URL을 a태그에 넣어주면 된다.

 

여기서 버전 오류가 떴었는데, npm install @ffmpeg/core@latest 설치하고

const ffpmeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js',
log:true
});

이렇게 해주면 오류가 뜨지 않는다.  sharedArrayBuffer 라는 오류가 또 떴는데

server.js

 

app.use((req, res, next) => {
res.header("Cross-Origin-Embedder-Policy", "require-corp");
res.header("Cross-Origin-Opener-Policy", "same-origin");
next();
});

이러한 미들웨어를 추가해주면된다.