<div id="readability-page-1" class="page"><div><h2 id="1a19">프로젝트 개발 환경 셋업</h2><p id="b6fe">react와 typescript를 사용해서 개발했으며 번들링은 webpack과 esbuild(esbuild-loader)를 사용했습니다. 배포는 Vercel를 사용했습니다.</p><blockquote><p id="f67a">webpack 설정 및 리액트 환경 설정에 대한 설명은 생략하겠습니다.</p></blockquote><h2 id="5c94">Node 패키지 추가</h2><pre><span id="7c0d">$ npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin esbuild esbuild-loader typescript</span><span id="b29b">$ npm i react react-dom react-dropzone react-feather @ffmpeg/core @ffmpeg/ffmpeg @types/react @types/react-dom @emotion/react @emotion/styled</span></pre><h2 id="2c77">SharedArrayBuffer</h2><p id="875e">ffmpeg.wasm 깃헙 리드미에도 나와있지만 SharedArrayBuffer는 교차 출처가 격리된 페이지(cross-origin isolation)에서만 사용할 수 있습니다. 그래서 사용하기 위해서는 서버 헤더에 <code>Cross-Origin-Embedder-Policy</code>과 <code>Cross-Origin-Opener-Policy</code>를 추가해줘야 합니다.</p><blockquote><p id="c1d6">Vercel에서는 vercel.json을 통해서 헤더를 설정해 줄 수 있다 보니 데모 배포를 Vercel로 사용한 이유이기도 합니다.</p></blockquote><h2 id="5ad8">Webpack Dev Server 헤더 설정 추가</h2><figure></figure><h2 id="a683">Vercel 배포 서버 헤더 설정 추가</h2><figure></figure><h2 id="a8e2">FFmpeg 로드</h2><p id="9819">ffmpeg를 불러와 주는 작업을 해줍니다.<br>처<span id="rmm"><span id="rmm">음</span></span>에는 App.tsx에서 ffmpeg를 생성하였으나, 이후 Logger 컴포넌트 등 다른 곳에서도 생성된 ffmpeg를 호출해야 해서 ffmpeg.ts 파일을 분리 후 싱글톤 객체로 만들어 주었습니다.</p><h2 id="7793">ffmpeg.ts</h2><figure></figure><h2 id="c164">App.tsx</h2><figure></figure><h2 id="8438">파일업로드 추가</h2><p id="9b89">react-dropzone을 사용해서 간단하게 구현</p><figure></figure><h2 id="4009">불러온 파일 미리보기 기능 추가</h2><h2 id="cd39">App.tsx</h2><figure></figure><h2 id="5651">PreviousConvertStep.tsx</h2><figure></figure><h2 id="18b1">useBlobUrl.ts</h2><figure></figure><h2 id="aca2">FileCard.tsx</h2><figure></figure><h2 id="c699">변환 코드 호출</h2><p id="1171">useFFmpegConvert 커스텀 훅에 convert 함수를 추가 후 변환된 값을 return 하도록 구현</p><figure></figure><h2 id="7be5">no such file or directory 이슈</h2><p id="5393">개발 도중 변환 과정에서 no such file or directory 이슈가 발생해서 확인해보니 인코딩 이슈가 있어 convert 코드 쪽에 EncodeURI를 추가하여 변환하여 해결하였습니다.</p><figure></figure><h2 id="1b22">컨버팅 로딩추가</h2><p id="a1f9">App.tsx에 컨버팅 되는 동안 보여 줄 프로그래스 바를 추가해줍니다.</p><figure></figure><h2 id="ba0b">변환된 파일 원본이랑 비교 및 다운로드 기능 추가</h2><h2 id="d123">ConvertResultContainer.tsx</h2><figure></figure><h2 id="2966">App.tsx</h2><p id="24a1">file이 있고 isDone이 true면 보여주도록 App.tsx도 수정해줍니다.</p><figure></figure><h2 id="63ed">마치며</h2><p id="47ce">아쉬웠던건 아직 제대로 지원하는 브라우저가 Chrome밖에 없어서 Firefox나 다른 브라우저에서도 지원이 됐으면 했었네요..<br>(글쓴 시점 기준: 2021–08–16)</p><p id="fcb3">읽어주셔서 감사합니다. 🙏</p><h2 id="b193">참고</h2><ul><li id="c435"><a href="https://github.com/ffmpegwasm/ffmpeg.wasm" rel="noopener ugc nofollow" target="_blank">https://github.com/ffmpegwasm/ffmpeg.wasm</a></li><li id="304f"><a href="https://web.dev/cross-origin-isolation-guide/" rel="noopener ugc nofollow" target="_blank">https://web.dev/cross-origin-isolation-guide/</a></li><li id="bf86"><a href="https://fireship.io/lessons/wasm-video-to-gif/" rel="noopener ugc nofollow" target="_blank">https://fireship.io/lessons/wasm-video-to-gif/</a></li><li id="50cc"><a href="https://blog.chosunghyun.com/ffmpeg-wasm-gif-converter-study/" rel="noopener ugc nofollow" target="_blank">https://blog.chosunghyun.com/ffmpeg-wasm-gif-converter-study/</a></li><li id="a3b4"><a href="https://marshall-ku.com/web/tips/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-gif-mp4-%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0" rel="noopener ugc nofollow" target="_blank">https://marshall-ku.com/web/tips/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-gif-mp4-%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0</a></li></ul></div></div>

Stories by Jusung Hwang on Medium

얼마 전 사내 채널에서 FFmpeg.wasm으로 만들어진 인코딩 도구(AVPress)가 공유되었습니다.
그래서 이참에 웹 어샘블리 라이브러리를 사용해보고자 FFmpeg.wasm에 대해 알아보고, 간단하게 GIF 및 MP4 파일 웹 변환기를 만들어 보았습니다.
최종 결과물은 데모를 통해 확인 가능하며 코드는 깃헙 리포지토리에 올려두었습니다.
Video GIF Web Converter
GitHub - nabigraphics/video-gif-web-converter: Video or GIF convert with using ffmpeg.wasm
프로젝트 디자인
Figma를 사용해서 디자인 했습니다.
프로젝트 개발 환경 셋업
react와 typescript를 사용해서 개발했으며 번들링은 webpack과 esbuild(esbuild-loader)를 사용했습니다. 배포는 Vercel를 사용했습니다.
webpack 설정 및 리액트 환경 설정에 대한 설명은 생략하겠습니다.
Node 패키지 추가
$ npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin esbuild esbuild-loader typescript
$ npm i react react-dom react-dropzone react-feather @ffmpeg/core @ffmpeg/ffmpeg @types/react @types/react-dom @emotion/react @emotion/styled
SharedArrayBuffer
ffmpeg.wasm 깃헙 리드미에도 나와있지만 SharedArrayBuffer는 교차 출처가 격리된 페이지(cross-origin isolation)에서만 사용할 수 있습니다. 그래서 사용하기 위해서는 서버 헤더에 Cross-Origin-Embedder-Policy과 Cross-Origin-Opener-Policy를 추가해줘야 합니다.
Vercel에서는 vercel.json을 통해서 헤더를 설정해 줄 수 있다 보니 데모 배포를 Vercel로 사용한 이유이기도 합니다.
Webpack Dev Server 헤더 설정 추가
https://medium.com/media/5ec573de6972a3350cf8f1a5a910a5d5/href
Vercel 배포 서버 헤더 설정 추가
https://medium.com/media/12931c4609e51bdcb508961bce3ebb40/href
FFmpeg 로드
ffmpeg를 불러와 주는 작업을 해줍니다.
처음에는 App.tsx에서 ffmpeg를 생성하였으나, 이후 Logger 컴포넌트 등 다른 곳에서도 생성된 ffmpeg를 호출해야 해서 ffmpeg.ts 파일을 분리 후 싱글톤 객체로 만들어 주었습니다.
ffmpeg.ts
https://medium.com/media/e6297b2486ff7a53efccad78a6830f9c/href
App.tsx
https://medium.com/media/cceecc9ec0d7934ccd2eeb9a2f988b2e/href
파일업로드 추가
react-dropzone을 사용해서 간단하게 구현
https://medium.com/media/5e5fc42fed55597659924d060a019706/href
불러온 파일 미리보기 기능 추가
App.tsx
https://medium.com/media/e9bd1c99cf4a65c77908c8c24e476204/href
PreviousConvertStep.tsx
https://medium.com/media/1f78950d9768453377ff29cdd56a3ac5/href
useBlobUrl.ts
https://medium.com/media/d2edfc9c67aaa69a6bca9f7e16506b42/href
FileCard.tsx
https://medium.com/media/2f9108a85fa82c6bd3d1848ee7d2c34c/href
변환 코드 호출
useFFmpegConvert 커스텀 훅에 convert 함수를 추가 후 변환된 값을 return 하도록 구현
https://medium.com/media/406c21cc34f1207dc57039c29f91a7c5/href
no such file or directory 이슈
개발 도중 변환 과정에서 no such file or directory 이슈가 발생해서 확인해보니 인코딩 이슈가 있어 convert 코드 쪽에 EncodeURI를 추가하여 변환하여 해결하였습니다.
https://medium.com/media/e2344ec6cfc7fafb50fa6cebc50a969c/href
컨버팅 로딩추가
App.tsx에 컨버팅 되는 동안 보여 줄 프로그래스 바를 추가해줍니다.
https://medium.com/media/e53351535615771641221b7eb7a746c3/href
변환된 파일 원본이랑 비교 및 다운로드 기능 추가
ConvertResultContainer.tsx
https://medium.com/media/15d239d06811a01be669e6005286b84a/href
App.tsx
file이 있고 isDone이 true면 보여주도록 App.tsx도 수정해줍니다.
https://medium.com/media/00a67867b0bdfa383f1749bdc7225896/href
마치며
아쉬웠던건 아직 제대로 지원하는 브라우저가 Chrome밖에 없어서 Firefox나 다른 브라우저에서도 지원이 됐으면 했었네요..
(글쓴 시점 기준: 2021–08–16)
읽어주셔서 감사합니다. 🙏
참고
https://github.com/ffmpegwasm/ffmpeg.wasm
https://web.dev/cross-origin-isolation-guide/
https://fireship.io/lessons/wasm-video-to-gif/
https://blog.chosunghyun.com/ffmpeg-wasm-gif-converter-study/
https://marshall-ku.com/web/tips/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-gif-mp4-%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0

FFmpeg.wasm을 활용하여 웹에서 GIF 및 MP4 파일를 변환해보자

댓글