[영상 편집기 만들기] ffmepg 기초 정리

ffmepg란 미디어 플레이어나 인코딩 프로그램에 주로 사용되는 라이브러리이다. 우선은 ffmepg 자체에 대해 알아보도록 하자. 그 후에 브라우저에서 영상편집기가 작동할 수 있도록 만들어보자. 

 

ffmpeg

우선 ffmpeg 자체에 대해 알아보자. 공식문서에 들어가면 아래의 글이 나온다.

 

 

ffmpeg를 사용하여 비디오 및 오디오 파일을 변환하고, 편집/ 스트림 전송/ 필터링 / 캡퍼 / 재생할 수 있다. 이는 다양한 운영체제에서 사용가능하며, 커맨드 라인 인터페이스를 통해 사용가능하다. ffmpeg 공식 사이트에서 운영체제에 맞는 파일을 받아서 설치해주면 된다. 기본적인 명령어는 아래와 같다.

 

1. 커맨드 문법

 

$ ffmpeg [options] -i [입력 파일 경로] [출력 파일 경로]

 

명령어 자체는 어렵지 않다.

 

2. 변경

위 옵션에 -i를 넣어서 가능하다. 간단히 예시를 확인하자.

 

// yuv420p를 avi로 변경
$ ffmpeg -i /tmp/test.yuv /tmp/out.avi

// avi를 yuv420p로 변경
$ ffmpeg -i mydivx.avi hugefile.yuv

// MP4를 AVI로 변경
$ ffmpeg -i /tmp/test.mp4 /tmp/out.avi

 

-i : 입력이 들어갈 파일을 지정하는 의미이다.

 

3. 필터링

$ ffmpeg -i vid1.avi -vf noise=alls=0:allf=t vid2.avi
$ ffmpeg -i vid1.avi -vf noise=alls=25:allf=t vid2.avi
$ ffmpeg -i vid1.avi -vf noise=alls=50:allf=t vid2.avi
$ ffmpeg -i vid1.avi -vf noise=alls=100:allf=t vid2.avi

위와 같이 노이즈 제거를 0, 25, 50, 100 과 같이 필요한 만큼 적용이 가능하다.

 

$ ffmpeg -i /tmp/test.avi -vf "noise=alls=25, eq=brightness=0.2" /tmp/out.avi

위와 같이 노이즈 제거와 밝기 조절을 동시에도 가능하다.

 

-vf : 비디오 필터를 지정하는 의미이다.

 

 

4. 오디오 변환

$ ffmpeg -i /tmp/test.mp4 -vn -acodec copy /tmp/out.mp3

 

위와 같이 영상 자체를 오디오로 변환하는 것도 가능하다.

 

-acodec : 오디오 코덱을 지정하는 것이다.

-vcodec : 비디오 코덱을 지정하는 것이다.

 

5. 녹화

$ ffmpeg -video_size 1024x768 -framerate 30 -f x11grab -i :0.0+100,200 /tmp/out.mp4

 

-video_size : 녹화되는 크기

-framerate : 녹화 프레임 수

-f : 입력이나 출력 파일 형식을 지정

-f x11grab -i : 화면 캡처

:0.0+200,300 : 왼쪽 위 기준으로 가로 200/세로 300 픽셀만큼 떨어진 곳에서 1024x768 사이즈 만큼 녹화

 

 

6. 자르기

영상이 큰 파일의 경우 필요구간만 추출하는 것이 가능하다.

 

$ ffmpeg -i 원본파일이름 -ss 시작시간 -to 끝시간 출력파일

 

-ss 와 -to로 시작과 끝 시간을 정의한다. 시간 포메팅은 h:mm:ss이다. 자르기만 하고, 다른 변경이 필요 없다면 -vcodec/-acodec에 copy로 넣어주면 원본 인코딩을 그대로 사용하여 처리시간이 짧아진다. copy를 넣지 않으면 일부 구간 추출하여 다시 인코딩하므로 처리하는데 시간이 많이 걸린다.

 

$ ffmpeg -i input.mp4 -ss 1:12:12 -to 2:13:13 -vcodec copy -acodec copy output.mp4

 

 

---

 

ffmpeg.wasm

ffmpeg.wasm는 ffmpeg를 javascript에서 사용할 수 있는 인터페이스 형식의 패키지로 오픈소스(MIT)이므로 쉽게 사용가능하다. 사실 ffmpeg-fluent도 많이 사용하는데, ffmpeg-fluent는 OS 자체에 추가 설치가 필요하므로, 브라우저 자체동작은 어렵다. ffmpeg.wasm는 javascript에서 사용가능하기 때문에 당연하게도 브라우저에서만 사용가능하다. 우선 바로 리엑트로 구현하기전에, 브라우저에서 ffmpeg을 사용가능한 ffmpeg.wasm에 대해 먼저 알아보자. 그 후에 리액트로 영상 편집기나 영상 플레이어를 만들어보자.

 

 

기본적으로 ffmepeg.wasm은 브라우저 안에서 작동하므로 데이터 유출이나 네트워크 지연에 대해 걱정할 필요가 없다. 또한 단일 스레드 및 다중 스레트를 함께 제공하므로 하여, 다양한 데이터 처리를 가능하게 한다.

 

1.  ffmpeg.wasm 설치하기

ffmpeg는 npm 이나 yarn의 패키지 매니저로 설치가 가능하다.

 

// npm
$ npm install @ffmpeg/ffmpeg @ffmpeg/util

// yarn
$ yarn add @ffmpeg/ffmpeg @ffmpeg/util

 

단, unpkg 같은 CDN은 제공하지 않기 않는다.

 

 

 

2. ffmpeg.wasm 아키텍쳐

https://ffmpegwasm.netlify.app/docs/overview/

위 그림을 보면 Main Thread와 Web Worker 두 가지로 크개 나누어 진 것을 볼 수 있다. 기본적으로 Multimedia Transcoding 같은 경우에 작업량이 많기 때문에 main thread에서 실행한다면, 다른 작업들이 큰 영향을 받아서 좋지 않다. ffmpeg.wasm 경우에는 ffmpeg.worker라는 web worker에서 작업을 실행한다. 즉, javascript의 비동기 로직으로 ffmpeg.wasm 함수들이 실행되기 때문에 async/await 문법을 사용해서 실행해 주는 것이 좋다. 위 그림을 보면 multi-thread를 사용하면, ffmpeg.worker 내부의 ffmpeg-core가 작업을 할당해 주는 것을 확인 할 수 있다.

 

여기까지가 ffmpeg을 브라우저에서 사용하는 방법에 대해 간단히 알아보았다. 더 심화된 내용은 구현하는 파트에서 알아보도록 하겠다.