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

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
realdennis

realdennis

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

More from Medium

3D Boids in Rust

Advanced Typescript: Depth control of recursive structures

Infinity. Photo by Ryan Stone

Forcing string patterns in Typescript

360° IT Check #38 — Types In JavaScript, Rust at 1Password, And More!