웹어셈블리와 FFmpeg 2

절망편

앞서 말한것이 희망과 미래에 대해 이야기 했다면 현재 왜 적용이 힘든지, 사용이 힘든지 말해보겠다
우선 wasm은 많은 메모리를 필요로 한다.
물론 간단한 수식 계산이나 간단한 정렬 계산 등 메모리 안에 들어가야할 것이 크지 않은 경우 큰 문제가 되지 않지만
그것이 이 글에서 말하고자 하는 FFmpeg일 경우 문제가 된다.
앞서 말한 순수한 자바스크립트로 만든 클라이언트용 FFmpeg은 코어가 아닌 풀패키지로 한다면 용량만 순수하게 100MB가 넘는데,
wasm도 많이 최적화를 했음에도 25MB라는 거대한 용량을 가지게 된다.
이러한 용량은 사이트내에 직접 wasm모듈을 업로드하기 어려워지고 cdn을 활용할 수 밖에 없어지게 된다.
물론 최근의 cdn은 속도이슈도 그렇게 크지 않고, 접속도 원활하기에 크게 문제는 되는 부분은 아니다.

가장 큰 문제점이라고 볼 수 있는것은 앞서도 말했지만 클라이언트 단에서 돌아간다는것이다.

이것이 장점이기도 하지만 단점이다.
FFmpeg같은 거대한 모듈은 아직까지 제한적인 웹어셈블리, 그리고 제한적인 사용량을 할당받는 브라우저에서는 아직까진 너무 크다.

사양이 좋은 컴퓨터라면 무난하게 사용하고 처리속도도 문제가 없지만, 사양이 좋지 않은 컴퓨터라면 시간이 답답할정도로 느리게되고,
사양이 정말 좋지 않거나 모바일기기로 가게 되면 해당 wasm을 할당할 메모리 자체의 용량이 적어서 아예 할당을 하는 과정에서 그 크기로 인해 에러가 나서 실행 자체가 되지 못한다.

같은 에러를 만나 볼 수 있으며 현재 저사양컴퓨터에서는 해결 방법이 없다.

모바일에서는 사용 불가능

그리고 지금 말하는 wasm ffmpeg의 경우 SharedArrayBuffer 사용하기에
사용가능 브라우저 링크
위의 링크에서 볼 수 있듯 안드로이드 계열, IOS계열 즉 모바일에서도(파이어폭스 제외) 사용이 현재는 불가능하다.

추후 지원될 옵션이라고는 생각되지만 지원이 되고 표준이 된다 하더라도 구형 OS 구형 브라우저들을 업데이트 하거나 바꾸지 않고 사용하는 특성이 많은 웹 환경상 치명적인 단점이라 할 수 있다.

그래도 낙관적인 웹어셈블리

여전히 웹어셈블리는 초창기 단계이며,
브라우저 단에서 지원하는것과 별개로 개발된것들도 최적화 및 하위버전에 대한 지원이 가능하지만 발걸음 단계라 지원이 안되는 것들이 많다.
지금 소개하는 ffmpeg wasm도 그러한 경우이며 언제든지 개발한 개발자의 의지에 의해 개선될 여지가 있으며 지속된 요구와 필요성이 느껴진다면 아마도 다른 개발자에 의해서도 쓸만한 ffmpeg 버전들이 나올 것이다.
소개는 하지 않겠지만 해당 ffmpeg에서 일부들만 빼고, 웹워커기능을 최대한 활용하여 영상->영상끼리의 인코딩만 가능한 버전도 이미 있다.

웹에 적용해보기

이제 현재 웹어셈블리의 위치와 사용 가능한 환경들을 알아보았으니 이제는 실제로 웹에 적용해보려 한다
FFmpeg.Wasm

<video id="player" controls></video>
  <input type="file" id="uploader">
  <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.6/dist/ffmpeg.min.js"></script>
  <script>
    const { createFFmpeg, fetchFile } = FFmpeg; //ffmpeg과 파일을 불러옵니다
    const ffmpeg = createFFmpeg({ log: true }); //디버깅을 위해 콘솔에 로그를 찍는 설정
    const transcode = async ({ target: { files } }) => {
      const { name } = files[0]; //파일을 name 변수에
      if(!ffmpeg.isLoaded()) await ffmpeg.load(); //ffmpeg이 로드 되지 않았으면 로드, 로드 되었으면 로드하지 않음.
      ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
      await ffmpeg.run('-i', name,  'output.mp4');
      const data = ffmpeg.FS('readFile', 'output.mp4');
      const video = document.getElementById('player');
      video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
    }
    document.getElementById('uploader').addEventListener('change', transcode);
 </script>

앞서 말한 용량 크기로 인해 테스트나 wasm를 좀 더 최적화 하고 개발해서 반영할 생각이 아니라면 이미 올려져있는 cdn을 활용해야 한다.

위의 예제는 파일을 업로드 하게 되면 업로드한 파일을 output.mp4로 인코딩하여 video 태그에 출력하는 예제이다.

Vue에서의 활용

이번엔 Vue에서이다.

우선

# Use npm
$ npm install @ffmpeg/ffmpeg
# Use yarn
$ yarn add @ffmpeg/ffmpeg

로 인스톨 후

아래는 vue3기준 설명이다.

<template>
  <div> <video ref="player" :src="video" controls autoplay /> </div>
  <button @click="transcode">변환</button>
  <p>로그 : {{ message }}</p>
</template>
<script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
export default {
  setup() {
	const player = ref(false);
    const ffmpeg = createFFmpeg({
      log: true,
    });
	return { ffmpeg };
	},
	data() {
		return {
			message : "Click Start to Transcode"
		}
	},
	methods : {
     async function transcode() {
        message.value = 'Loading ffmeg-core.js';
        await ffmpeg.load();
        message.value = 'Start transcoding';
        ffmpeg.FS('writeFile', 'test.avi', await fetchFile(file));
        await ffmpeg.run('-i', 'test.avi', 'test.mp4');
        message.value = 'Complete transcoding';
        const data = ffmpeg.FS('readFile', 'test.mp4');
				this.$refs.player.value = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
        }
	}
}
</script>