一、前言
? ? ? ?在現(xiàn)在這個時代，做開發(fā)常會聽說的一個詞就是“跨平臺”。自從移動端的用戶需求越來越大，H5逐漸發(fā)展，跨平臺似乎已經(jīng)成為了軟件開發(fā)不可或缺的技術。在為我們帶來了巨大遍歷的同時，也留給了我們眾多的坑，今天，我就說說關于跨平臺直播終端的實現(xiàn)。本人還只是大三學生狗一枚，技術方面肯定和網(wǎng)上大牛無法比較，若有錯誤或不成熟的思想，此次也是因為項目需求對H5實現(xiàn)直播功能有所涉獵，望網(wǎng)友們海涵，不喜勿噴。
? ? ? ?本文主要記錄在項目開發(fā)過程具體流程，還有內(nèi)網(wǎng)穿透等一些知識，提供了所需工具的下載地址以及運用方式，大多數(shù)比較深的知識點沒做具體敘述，包括像跨平臺的響應式布局這些東西也就就不過多介紹，大家可以針對需求自行學習相關知識。
二、requirements
? ? ? ? ? 直播終端的實現(xiàn)籠統(tǒng)的來說一定是需要這三樣東西的：攝像頭、服務器、顯示前端。大致流程圖如下：
? ? ? ? 大概就是這么個東西，說的高尚牛逼點，就是一個完整的視頻直播平臺可以分為三個部分：硬件設備層、視頻能力平臺層以及視頻應用平臺層。硬件設備層咱得自己準備，無非就架個IP Camera，而EasyNVR就為我們提供了視頻能力層，也就是接收Camera傳回的數(shù)據(jù)的平臺以及一個服務器，視頻應用平臺層就是我們所說的前端，為了實現(xiàn)跨平臺我們采用WEB前端開發(fā)，你可以修改EasyNVR自帶的WEB源代碼，也可以自己寫界面，我選擇的就是后者，因為在項目后期我需要加入自己的功能。
三、step1
? ? ? ?說到IP Camera，附帶要講下攝像機一般的輸出協(xié)議Onvif，現(xiàn)在大多數(shù)安防系統(tǒng)的攝像機都支持這種協(xié)議，百度百科上是這么說的：
? ? ? ? 2008年5月，由安訊士聯(lián)合博世及索尼公司三方宣布將攜手共同成立一個國際開放型網(wǎng)絡視頻產(chǎn)品標準網(wǎng)絡接口開發(fā)論壇，取名為ONVIF（Open Network Video Interface Forum，開放型網(wǎng)絡視頻接口論壇），并以公開、開放的原則共同制定開放性行業(yè)標準。
? ? ? ? 反正記得有這么個輸出協(xié)議就行了，這對項目沒有太大影響，還有一個輸出協(xié)議就是RTSP，這兩個輸出協(xié)議是EasyNVR主要的規(guī)格需求。然后安攝像頭的事情我就不多說了，跟本文的主題沒有太大的關系，我用的是EasyN的攝像頭，挺清楚的。
四、step2
? ? ? ?重點是接下來要講的視頻傳輸協(xié)議HLS和RTMP，要講后端獲取的視頻流渲染到前端，離不開這兩種協(xié)議。大家可以先去下載EasyNVR的客戶端文件，這是EasyNVR的官方下載地址：
? ? ? ? 下載之后是一個解壓包，是一個綠色文件，直接解壓就行，然后按照里面的“EasyNVR互聯(lián)網(wǎng)直播服務器使用說明書”去配置相關信息，這些東西都很簡單，就不過多敘述了。
? ? ? 重點給大家講一下HLS（HTTP Live Streaming）傳輸協(xié)議，作為H5的御用傳輸協(xié)議，很是好用。它的原理就是在后端生成一個存儲視頻流的文件夾，里面存放著一個.m3u8的索引文件，索引指向與該索引文件同級的視頻流.ts文件，視頻能力層不斷的截取新的.ts文件，也在不斷地刷新.m3u8文件，我們只需要在前端繼承的視頻播放器中引入.m3u8文件的URL即可不斷獲取.ts文件。而EasyNVR作為本次項目使用的視頻能力層，他也開放了端口我們提供了我們所需的.m3u8的URL。在EasyNVR根目錄下的另一個文檔“EasyNVR網(wǎng)絡攝像機互聯(lián)網(wǎng)直播方案及二次開發(fā)文檔”中，就為大家介紹了EasyNVR開放的所有API。找到我們將來最需要的兩個接口，記住他們大概的“樣子”。包括接收的參數(shù)、相應文本中的對象信息等等。
? ? ? ?其實到了這一步有經(jīng)驗的人應該都知道了大概的解決方案了。無非就是再寫個前端播放器，然后引入后端傳回的URL就好了，只需要替換其中的｛host｝或者拼接一下域名就好了。前端播放器的編寫我也不做過多敘述了，我把源碼托管在了github上，大家直接下載然后修改demo里面的參數(shù)就可以了。
在EasyNVR的根目錄下開啟start.bat，然后咱們自己寫個ajax去調咱們自己內(nèi)網(wǎng)的API接口，獲取URL。以下是我寫的代碼
$.ajax({
type: "get",
url: "http://easynvr.easydarwin.org:10800/api/v1/getchannelstream",
data:{
channel:1,
protocol:"HLS"
},
dataType: "jsonp",
async: true,
success: function(resp) {
console.log(resp);
}
});
我調的是官方提供的域名，響應回的文本是下面這樣的：
? ? ? ?如果把傳輸?shù)胶蠖说膁ata的protocol的value改為RTMP將會輸出一段“rtmp://{host}:10935/hls/stream_1”這樣的URL，這就相當于是引入存儲我們視頻流的文件，但是這里有一個需要注意的地方，rtmp協(xié)議不支持跨域，如果把我們從其他域名獲取的URL直接放到src中去，瀏覽器會console如下信息：
? ? ? 但是HLS協(xié)議不論跨不跨域都能支持，因為它是基于HTTP協(xié)議的，所以我們盡量使用HLS協(xié)議傳輸，在往后端傳遞參數(shù)的時候，我們盡量使用protocol:"HLS"。對于傳回的HLS URL，我們還需要后期為他拼接域名，域名就是我們調用API時候的主域名，這里指的就是“easynvr.easydarwin.org:10800”。最后拼接出的完整的URL如下：“http://easynvr.easydarwin.org:10800/hls/stream_1/stream_1_live.m3u8”，直接塞到大家clone的播放器里面的src就可以了。到了這一步，視頻直播的大體原理就基本實現(xiàn)了。最后的效果如下：
video會不斷刷新.m3u8，不斷獲取視頻流，實現(xiàn)直播。自己架的EasyNVR同理。
? ? ? ?接下來拓展一些內(nèi)網(wǎng)穿透的知識。要把內(nèi)網(wǎng)映射到外網(wǎng)，有很多途徑，其中不乏購買域名、購買代理服務器等等操作?，F(xiàn)在我說個用于測試的比較常用的方法，那就是內(nèi)網(wǎng)穿透。我選擇的內(nèi)網(wǎng)穿透軟件是natapp，自己花了3塊錢賣了一年的專屬域名（之前我在狗爹網(wǎng)上挑了一個特別漂亮的域名，.com結尾的，帶上優(yōu)惠碼都得要300多/5年，最關鍵的是在我狠下心要買的時候他居然提示我無法付款，并不知道哪里出了問題，就去用內(nèi)網(wǎng)穿透了），這是natapp的官網(wǎng)地址：
? ? ? ? ?按照官網(wǎng)里面的教程一步步配置就可以了，全部都是圖文教程，0基礎也可以弄好，不過得注意在配置通道的時候要把默認端口改為10800，因為我們的EasyNVR用的端口就是它。這就是通過外網(wǎng)訪問的效果：
由于涉及隱私視頻內(nèi)容就不作展示了，整個直播架構流程大致就是這樣。
