魷型前端

Kalan 頭像照片,在淡水拍攝,淺藍背景

軟體工程師 / 福岡生活 / Splatoon 中毒
本部落格支援 RSS feed(全文章內容),可點擊下方 RSS 連結或透過第三方服務設定。若技術文章裡有程式碼語法等特殊樣式,仍建議至原網站瀏覽以獲得最佳體驗。

目前主題 亮色

閒聊 flv.js

這篇文章是看完 flv.js 作者的故事之後有感而發當作紀錄。

目前只要是跟直播服務,或是影片服務有相關的網頁開發,基本上最熱門的就是 hls.js 或是 flv.js。因為瀏覽器的原生 video 並不支援這些格式,所以必須要自己想辦法解碼。

以前 flash 當道的時候大部分可以用 flash 來解決,但是當 flash 慢慢被拔掉之後勢必要想其他方法解決。近幾年提出的 Media Source Extension 雖然解決了這個問題,但是必須自己讀文件,而且網路上普遍對 MSE 著墨不多,所以最方便的方法就是用現成的。

而當時最著名的就是 blibli 的 flv.js,還有 hls.js

flv 跟 hls 差在哪裡

flv 是為了解決 flash 匯出檔 swf 體積過大,在網路上有效運用而提出的一個影片格式。那麼為什麼可以透過網路來傳遞呢?

一般來說,想要直接透過 RMTP 在網頁上播放,只能透過 Adobe Flash 來解碼,這也是在 HTML5 尚未成熟之前的解決方案。不過隨著 flash 跨入歷史,各個瀏覽器封殺 flash,所以勢必要用不同的方式來解決。走 RTMP 協定會被防火牆擋住,所以走 HTTP 會是最適當的作法,現在大部分的直播協議都是以 http-flv 為主。

MSE

一般的 video tag 只能支援特定的檔案格式(或容器)。所以像是 RMTP 或是 m3u8 這種不支援的格式就沒辦法直接用 video 播放。

為了讓原有的 audio 以及 video 多一層拓展,在瀏覽器支援的情況下,你可以透過 MSE 的 API 來修改或是讀取影片當中的內容,然後自行解碼後放到 video tag 播放。而這個 effort 通常需要對協定本身有了解,或是具有影片編碼的相關底層知識,而且需要時間去維護、除錯,這也是為什麼 flv.js 跟 hls 可以脫穎而出,因為他們有效解決了當前前端對於影音播放的需求。

要處理串流,或是像 hls 那樣的編碼不是一件簡單的事。

談談開發者的故事

這是核心開發者謙謙在部落格上的文章。人家在高中的時候就有想把 flv 封裝成 mp4 在網頁播放的念頭,我還在打醬油。

當時已經有 hls,但是 hls 的架構並不適合 flv 這種比較需要漸進式解析的需求,所以需要另外設計架構。在開發上最大的問題大概就是瀏覽器的支援度了,在開發的當下還是 2015 年 ~ 2016 年左右,各個瀏覽器的支援還不算穩定。為了開發 flv.js 作者還跑去看 chromium/media 當中的原始碼。

因為對現在做的工作感到枯燥乏味,所以作者提出了轉職位的請求,專心開發 flv.js。雖然 flv.js 上線了,但除了主管並不是很在乎成果之外,最後的績效考核還拿到了 C。

“有两个员工,一个负责写大量相对简单的业务,有持续的输出;另一个员工,独立开发核心库,难度高、工程量较大,开发周期长,最后因外部原因 block 导致不能按时上线。最后第一个员工获得了较高的绩效评级,第二个员工获得了极低的分数,这公正么?”

在了解到這家業務導向的公司並不在意技術上的產出後,作者也悄悄打算離職計畫,同時也希望將 flv.js 開源而非爛在公司。

還有就是開發者本身也是人,有情緒、會對現況感到不滿,我自己也很慶幸自己在職涯的早期加入一些非常有挑戰性的公司,完成自己想做的事情還有在不同領域上的涉略。

結論

現在幾乎都是 flv.js 在處理大部分的直播服務,就算是自主開發我想也參考了非常多 flv 裡頭的程式碼,可以想像他對軟體圈以及直播的貢獻,而這一切是來自於一個很酷的想法,還有實踐。

自己看完的第一個感覺其實蠻惋惜的,如果有用過 flv.js 的開發者應該可以會知道他對於 HTML5 直播領域的貢獻有多大,但是這樣的結果對於一間公司來說是個 C 績效的考核。

同時我也開始反思,現在有越來越多瀏覽器可以支援的 API,還有最近很火紅的 WebAssembly,雖然目前也越來越有熱門的趨勢,但感覺都還停留在我用 xxx 語言編譯成了 WebAssembly,還沒有看到一下比較實際的應用。

反思

即將邁入 26 歲了,到日本工作後雖然生活的確是好轉許多,但仍然跟我想像中的有落差。除了接下 Tech Lead 之後工作效率幾乎都卡在寫文件跟檢查進度上,沒有時間好好靜下來寫程式,長期下來真的有點力不從心 + 精神衰落。

所幸在這裡還是有蠻多彈性可以學習新東西,主管也鼓勵我去做自己想做的事情,對於績效考核也不會有什麼太大壓力。但這幾年學習除了接觸更多前端以外的東西,也沒有太大的長進。

一畢業之後就沒有什麼時間能夠投入精力去學習一套完整的知識,這對我來說是個焦慮與壓力來源,以前非常在意技術跟工具的演進,但是最近這幾年也越來越無感了。或許哪一天等資源充足了,還是會回到學校補足一些當初沒有好好學的基礎知識跟想寫的程式碼吧,這部分就隨緣了。

上一篇

Chrome Cookie 政策調整與反思

下一篇

Svelte — 是什麼讓我遇見這樣的你

如果覺得這篇文章對你有幫助的話,可以考慮到下面的連結請我喝一杯 ☕️ 可以讓我平凡的一天變得閃閃發光 ✨

Buy me a coffee