SegmentFault 2015 黑客马拉松，深圳站回顾
前言
自从弃用 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的参数处理实在是醉了，各类“符号替换规则 ”，尤为是这种紧张的时刻，哪里可以静心去围观那些东西呢，╮(╯▽╰)╭，还好还好，沉住气，完成了以前的轮子（项目早开了，没写完....）...
后记
提交做品之后真心睡不着，第一次参加这种活动（大学比较“闷骚”，对学校活动各类不屑一顾~ 根本没参加过任何一次相似的比赛 :-D），好等慢等，终于做品展现，然而咱们是八号，最后...仍是在担忧里睡着了（逃
加贝学弟仍是颇有气场哒，上去演示的时候坚持了一个原则——“讲话声音要大”！嗯哼，展现过程当中貌似还有几个不乖的小伙伴发了 xss 来着，乃们这群小婊砸，差评！
接着就是(～﹃～)~zZ，等结果。
...
三等奖，没咱们。
二等奖，也没咱们。
...
“没事，别担忧，拿不到奖，我发给大家”——花总。
两组领奖完毕。
“没事的，大家作的已经很好了”——波波。
...
（尼玛，老子差点醉了，感受白作了！）
“特等奖，是 TEAM.MG，”
“对，就是那两个小帅哥”——烧碱。
！！！
我擦，那时候我根本没反应好很差，看到第二的做品，我真的都放弃了，更别说两个小贱人说的那两句话了~
完。
落幕
对，Segmentfault Hackathon 深圳站，抱走 Ehang 小灰机 & 1024x6 的辣两个大男孩，就是咱们。
关于
前端汪 / Thonatos.Yang
Front-end Developer
前端汪 / JailBreakC
Front-end Developer
致谢
活动支持
感谢 Insta360（我司）提供全景视频素材及培养( ⊙ o ⊙ )啊！，SegmentFault 主办活动，以及阿里云服务支持。
框架、库
-
每一个你不满意的现在，都有一个你没有努力的曾经。