Video2Gif — 在瀏覽器上輕鬆把影片檔轉成 Gif 吧!🚀🚀🚀

身為前端工程師,工作上最常見的無非是把自己加進去的功能錄下來以便 Demo ,輸出 .mov 檔,就得常常重複在command line 透過 ffmpeg 轉檔…心想,難道就沒有好用的網頁應用能夠取代嗎?

Video2Gif

專案 — video2gif

拖拉 / 上傳你的影片檔,讓瀏覽器幫你生成 GIF 吧!

早期我其實開發過類似的專案 —— md2pdf,倒也不是說我有多麼熱衷於轉檔 Tool ,只是這類顯而易見的需求,正好滿足我個人需要,開發起來才會具有動力。

我們都知道,像 Medium 也只接受圖檔、GIF,偶爾你要把 Video 丟上來又要四處找轉檔工具,有時候不知道有沒有別人家的 Server。

所以我心想,與其抱怨、與其想著可能重複造輪子,不如就直接下去寫吧!

使用的 Tech stack & Library

主要使用的 Tech stack 有:

  1. WASM 介接 FFmpeg 的 binary
  2. 有趣又可愛的樣式庫 NES.css
  3. ES6 Proxy wrap state setter
  4. Vanilla JS
  5. 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)

If any interest, 👉 https://realdennis.me.