SegmentFault 2015 黑客馬拉松，深圳站回顧

時間 2019-11-10

原文原文鏈接

前言

自從棄用 Wordpress 之後已經好久沒有正經的寫過一篇像樣的博文了，此次趁着參加 SegmentFault Hackathon 2015 的機會，寫一篇正經的博文也算是總結一下入前端深坑之後學習和在作的一些事情。前端

深圳賽區的題目是「讓技術走進生活」（運用雲服務對多媒體資源進行處理... and so on），這個時候就不得不說，大四實習直接來了老大帶領的團隊（對了，咱們老闆就是那個任性調皮的——劉靖康），公司第一個項目是就是作視頻直播，做爲一隻有「追求」的前端汪，天然也參與了不少視頻處理相關的事情。第二個項目呢，就是咱們公司如今正在作的——Insta360 全景相機。乍一看，好像這是一篇「硬廣」，不過，我絲絕不這麼認爲，不信咱們開始進入正題。node

項目

使用 WebGL 在 HTML 頁面渲染 360 度即全景視頻、圖像，進行互動展現；使用 Node.js 做爲後端服務，配合阿里云云存儲、媒體轉碼、雲服務器，打造高效、即時、無縫的多角度全方位視頻展現與互動集成解決方案。jquery

關鍵詞

wegbl/3dnginx
nodejs/nginxgit
oss/mts/ecsgithub
socket/http/rtmp/hlsweb
mobile/webajax
bulletexpress

功能

全景展現segmentfault
全景直播
實時彈幕
聊天頻道
遠程控制
視頻分發
視頻轉碼

特點

360° * 360° 全景無死角展現，基於最新的 Web 技術，不受設備限制，讓世界沒有邊界
3D 遠程無縫聯動操控系統，無線操控，讓距離不是阻礙。
方便簡潔的彈幕系統，掃碼即聊，無需安裝，閃電加入，暢快點評。
強大的雲技術支持，全景視頻上傳自動分發，自動轉碼。
支持全景相機實時直播，第一時間，所有視角！

實現

全景展現

大屏幕（瀏覽器）要實現全景視頻的展現，須要作一個全景播放器，若是曾經接觸過全景的，大概明白「標準全景」是一個被拉伸的二比一視頻，經過校準在屏幕上顯示成一個三維的球體，經過旋轉Camera（Camera 中文名是攝像機，能夠理解爲人眼）或者 Sphere（球體表面或者內容貼圖造成一個 360x360 的圖像），並將 Camera 放在Sphere 內部或者外部讓用戶看到各個角度的影像。（由於 Fov 與 Distence 的存在，可視區域始終是一個帶有畸變的可視平面）。

這裏咱們採用最簡單的方法：將Camera放在球心，經過遠程控制旋轉Camara或者Sphere讓觀衆看到不一樣角度的內容。

全景直播

直播這方面呢，目前常見的方案大概是 HLS/RTMP/RTSP 等，目前web瀏覽器可以直接解析的主要就是 H264 編碼的視頻，不過咱們演示的設備是 RMBP，天然也就可使用 HLS（m3u8 格式）的 MPEG-2 的 ts 文件來播放了，這個問題暫時解決。

但是，相機輸出的是 RTMP 協議的流媒體文件，咱們須要的是 m3u8 流媒體，天然須要後端轉發，好在我這個遊手好閒的前端，還「兼職」運維，採用 Nginx-RTMP 天然可以實現了（Nginx 要用源碼編譯，配置文件我會貼在文末）。

實時彈幕

O(∩_∩)O哈哈哈~，前端汪常活躍的地方大概 A/B 站是不能少噠，怎麼能少了彈幕？——固然不能少！那麼問題來了，彈幕，彈幕啊，又是一個坑。

雖然我手賤，在知乎上回答過如何作弄一個彈幕的問題，可是須要解決一些問題：

track
size
message

在一條彈幕走出/寬度足夠以前，當前軌道不能佔用。

不能一股腦全 add 上去，須要查詢有一個隊列，處理當前的消息數量，保證必定的可視範圍——表達不明確，就是不能多，也不能丟失！

消息從哪裏來！不能憑空造吧！

聊天頻道

由上一個問題引出來這個問題，就得弄一個聊天室，因而吧，就有了下面的東西：

這裏就很少說了，之前月月總管弄了一個 Socketjs 版本的 imm，時間太緊張，以前有看過 Socket.io，花了半小時搞定這東西，總算有了彈幕來源，(⊙v⊙)嗯，能夠開始下一個了。

「魔法球」

這時候，出去抽菸，真心累了，畢竟凌晨一點多了。

這時候一想——既然能夠發消息，那麼就能夠髮狀態，就能夠發角度信息！嗯哼，因而乎，一個更好玩的東西出現了：

「魔法球」！

把 Camera 從球心拉出到 1.5 倍距離，設置一個差很少的 FOV，就能夠看到整個球面（在 2D 平面展現3d模型，始終是一個平面對吧？）因此就能夠顯示一個球面，拖動球旋轉，天然能夠產生角度信息，再經過遠程通信，就能夠控制屏幕~\(≧▽≦)/~啦啦啦！因此是這樣？

視頻分發

視頻要從本地到公網，須要一些列的過程，可是主題是雲端相關，想到了 OSS（阿里雲存儲），接着加班加點寫「本地上傳到服務器——服務器傳到 OSS」的一些小東西，然而，被坑了三小時 .... T.T

視頻轉碼

好吧好吧，終於寫完了，因而又陷入到 MTS（阿里雲媒體轉碼服務）的坑裏，嗯哼，爲何坑？——MTS是實驗功能，根本沒有node版本，須要自行實現！

那些坑

websocket
socket.io 對 websocket 進行了封裝，然而，他是 http 輪詢和 websocket 並行的，websocket不穩定的時候會使用 ajax 輪詢來處理，這時候就不能「實時」了~
mts
mts的參數處理實在是醉了，各類「符號替換規則」，尤爲是這種緊張的時刻，哪裏可以靜心去圍觀那些東西呢，╮(╯▽╰)╭，還好還好，沉住氣，完成了以前的輪子（項目早開了，沒寫完....）
...