RevtelTech
Published in

RevtelTech

有價值的影音內容怎麼管理?ReactConf.TV 開發分享

ReactConf.TV — a place where passionate React developers are able to search & watch organized and up-to-date react conference videos.

Demo site:http://reactconf.tv/
Github repo:https://github.com/revtel/reactconf.tv
MadeWithReactjs:https://madewithreactjs.com/reactconftv

React Native / React 開發顧問:https://consult.revtel.tech/

「內容為王」在資訊科技高速發展的這十幾年一直是個不斷被提起的概念。載體的典範轉移或串流平台的蓬勃發展,一有新的技術迭代就會帶來新的思考角度及方向。

當然這是很大的議題,不是三言兩語能夠討論清楚的,但挑個小的範圍來切入觀察應該也是蠻有趣的。那不如就來想像一下,如果你手上有很多高價值的影音檔案,想要為它們開發一個聚合器該怎麼做呢?

這篇文章簡單紀錄了忻旅的開源專案 ReactConf.TV 的一些思考足跡,此外我們還有不少跨領域及開源的經驗,如果您有興趣也歡迎看看「案例分享」並跟我們交流討論~

Photo by lucas law on Unsplash

開發緣起 — 從 React Conf 學習相關知識

過往曾開發過很多影音相關的互動平台(如 Qritica 思辨教育平台便是基於影片的收看及上傳來進行翻轉教育),幾次合作下來慢慢有了一些體會。再加上在某次內部會議上發現大家都會在工作之餘從 React Conf 等地方吸收 關於 React / React Native 的一些資訊。

既然是這樣乾脆自己動手做個聚合器來收納這些影片,除可以互相交流之外,另方面也作為相關開發的經驗總結。

圍繞於影音之外之外的互動及相關思考

在這次的命題中有個很大的議題已經被解決 — 影音串流的管理問題(已經被代管在 youtube 上了)。可基於到資源及時程的考量,如何適時的借用第三方平台協助託管影音檔案值得好好規劃,畢竟現今的終端影音需求除了看得到之外,看得順、多裝置流暢度及動態品質的調整這都是必須的

以工程角度在規劃功能的時候首要是先抓出核心,並以該核心為出發點逐步補齊周邊任務及界線。這次嘗試的核心概念在於「人」及「影片」。

以「 人」為核心,主要思考如何有效管理待看及看過的影片;以「影片」為核心,主要思考如何最適當的傳遞資訊到受眾端。把這兩個方向做個分拆跟結合就能列出一些基本的功能列表。

技術選型 — 追求開發及維護的平衡

技術挑選上我們選擇了 React + GatsbyJS

為什麼這麼做呢?除了達到原本的開發目標之外,還想追求額外幾個點

  • 降低上線後的管理成本 — 伺服器端越薄越好
  • 盡量追求全站載入的速度 — 因整個系統功能主要圍繞在 youtube 周邊

此外我們也蠻關注 JAMSTACK 的發展路徑,因此這個專案便以此為基底作規劃。

在結合了 CI/CD 工具之後,我們最終可以做到全站緩存到 CDN 並在每個 commit 都能自動部署

Image from https://www.gatsbyjs.com/

ReactConf.TV — 以 Youtube / Vimeo 為核心的影音互動聚合器

現在我們來看一下 ReactConf.TV 有哪些功能

  • 以 youtube playlist 為核心,抓取影片清單來做後續互動
  • playlist 能標註標籤做更多的篩選及管理
  • 互動上支援標註已讀以及收藏等功能
  • 在影片收看時也能在側邊看到其他影片的清單
  • 支援 RWD,對於手機播放及顯示有做處理讓其更流暢

ReactConf.TV 也蠻適合基於 youtube / vimeo 並想打造自有的官網的基本 codebase :)

未來探索

ReactConf.TV 作為我們一個嘗試性的總結,裡頭還有很多方向可以思考,
比如

  1. 假如加入後端支援我們還能做些什麼?除了單純的多裝置的共通及會員這種常見的功能之外,工程面上就可考慮多種微服務的接入。
  2. 假如將場景延伸到 APP 之上,有哪些部件適合復用、哪些又需要重新實作?
  3. 微前端 (micro-fronted)會是個趨勢,考量到影音作為一個相對獨立的模組,該如何做配置及抽象化?

開源就是一場永遠持續下去的旅程,這篇文章便是這次旅程途中的某個小註。

RevtelTech 忻旅科技 https://www.revtel.tech/
email:contact@revteltech.com
facebook:https://www.facebook.com/RevtelTech/

--

--

顧問諮詢 / 開發協力 / 商業模式

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