Video2Gif — 在瀏覽器上輕鬆把影片檔轉成 Gif 吧！🚀🚀🚀
身為前端工程師，工作上最常見的無非是把自己加進去的功能錄下來以便 Demo ，輸出 .mov 檔，就得常常重複在command line 透過 ffmpeg 轉檔…心想，難道就沒有好用的網頁應用能夠取代嗎？
專案 — video2gif
拖拉 / 上傳你的影片檔，讓瀏覽器幫你生成 GIF 吧！
早期我其實開發過類似的專案 —— md2pdf，倒也不是說我有多麼熱衷於轉檔 Tool ，只是這類顯而易見的需求，正好滿足我個人需要，開發起來才會具有動力。
我們都知道，像 Medium 也只接受圖檔、GIF，偶爾你要把 Video 丟上來又要四處找轉檔工具，有時候不知道有沒有別人家的 Server。
所以我心想，與其抱怨、與其想著可能重複造輪子，不如就直接下去寫吧！
使用的 Tech stack & Library
主要使用的 Tech stack 有：
- WASM 介接 FFmpeg 的 binary
- 有趣又可愛的樣式庫 NES.css
- ES6 Proxy wrap state setter
- Vanilla JS
- No React, no fancy frameworks
ffmpegwasm/ffmpeg.wasm
ffmpeg.wasm is a pure Webassembly / Javascript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.
這邊使用的是 ffmpeg.wasm，它幫助我們在前端可以透過 WASM 的 WebAPI 使用 ffmpeg 功能。
nostalgic-css/NES.css
NES.css 提供幾個常用組件，其樣式模擬早期玩掌機的 UI，如圖，我們的 Container 長得像是這個樣子，看起來跟神奇寶貝（寶可夢）的對話視窗是不是挺像的呢！
ES6 Proxy State setter / Vanilla JS
我們常說殺雞哪需用牛刀，雖然有 FileChange 、 drag drop state、有狀態決定 template 的內容改變…等等的總是會讓人聯想：哇，如果我不用 React / Vue 的模板綁定，豈不是要一直手動更新 View template？
這裡不得不提到一下，我們在 ES6 之後擁有 Proxy 的功能，可以幫助我們製造 Setter 的封裝，意味著你可以把狀態集中在一個 Object 裡頭，並且透過封裝的 Setter 去幫你更新 View 層也好、更新 Effect 也好。
- 在選擇器上，我僅僅在初期宣告並選擇出所有該應用會使用到的 Node。
- 僅僅在兩個地方觸碰到 Node ， (i.) Event binding (ii.) State binding by setter
- 在功能面上我們把 State object 作為一個會自動 interactive 的 state ，寫起來的感覺跟 mobx 87% 像呢。
至此，我們在每次 Messenge 的更動，不再需要手動的去改動 .innerText ，我們全部交給 stateManager ，未來若有 batch update 的考量，則只需要 maintain 它。
另外：樣式的活交給樣式去做，我們把會影響樣式的狀態統一注入到 App 容器的頂層，透過選擇器的方式，讓其子孫節點樣式改動的 Condition Scope 在 CSS 選擇器裡頭。
尾聲
這篇文章介紹的 Video2Gif ，是我昨天靈光一閃決定開發的 tool ，到撰文之際花了近 24hr，可謂一人 HackDay ，雖不強大，但想必能解決一些 Demo 仔的痛點。
（不過上班時間沒有啦，不信你問 PM 跟 Designer）
