一搀崭、前言
? ? ? ?在現(xiàn)在這個(gè)時(shí)代，做開(kāi)發(fā)常會(huì)聽(tīng)說(shuō)的一個(gè)詞就是“跨平臺(tái)”晤揣。自從移動(dòng)端的用戶需求越來(lái)越大，H5逐漸發(fā)展朱灿，跨平臺(tái)似乎已經(jīng)成為了軟件開(kāi)發(fā)不可或缺的技術(shù)昧识。在為我們帶來(lái)了巨大遍歷的同時(shí)，也留給了我們眾多的坑盗扒，今天跪楞，我就說(shuō)說(shuō)關(guān)于跨平臺(tái)直播終端的實(shí)現(xiàn)缀去。本人還只是大三學(xué)生狗一枚，技術(shù)方面肯定和網(wǎng)上大牛無(wú)法比較甸祭，若有錯(cuò)誤或不成熟的思想缕碎，此次也是因?yàn)轫?xiàng)目需求對(duì)H5實(shí)現(xiàn)直播功能有所涉獵，望網(wǎng)友們海涵淋叶，不喜勿噴阎曹。
? ? ? ?本文主要記錄在項(xiàng)目開(kāi)發(fā)過(guò)程具體流程，還有內(nèi)網(wǎng)穿透等一些知識(shí)煞檩，提供了所需工具的下載地址以及運(yùn)用方式处嫌，大多數(shù)比較深的知識(shí)點(diǎn)沒(méi)做具體敘述，包括像跨平臺(tái)的響應(yīng)式布局這些東西也就就不過(guò)多介紹斟湃，大家可以針對(duì)需求自行學(xué)習(xí)相關(guān)知識(shí)熏迹。
二、requirements
? ? ? ? ? 直播終端的實(shí)現(xiàn)籠統(tǒng)的來(lái)說(shuō)一定是需要這三樣?xùn)|西的：攝像頭凝赛、服務(wù)器注暗、顯示前端。大致流程圖如下：
? ? ? ? 大概就是這么個(gè)東西墓猎，說(shuō)的高尚牛逼點(diǎn)捆昏，就是一個(gè)完整的視頻直播平臺(tái)可以分為三個(gè)部分：硬件設(shè)備層、視頻能力平臺(tái)層以及視頻應(yīng)用平臺(tái)層毙沾。硬件設(shè)備層咱得自己準(zhǔn)備骗卜，無(wú)非就架個(gè)IP Camera，而EasyNVR就為我們提供了視頻能力層左胞，也就是接收Camera傳回的數(shù)據(jù)的平臺(tái)以及一個(gè)服務(wù)器寇仓，視頻應(yīng)用平臺(tái)層就是我們所說(shuō)的前端，為了實(shí)現(xiàn)跨平臺(tái)我們采用WEB前端開(kāi)發(fā)烤宙，你可以修改EasyNVR自帶的WEB源代碼遍烦，也可以自己寫界面，我選擇的就是后者躺枕，因?yàn)樵陧?xiàng)目后期我需要加入自己的功能服猪。
三、step1
? ? ? ?說(shuō)到IP Camera屯远，附帶要講下攝像機(jī)一般的輸出協(xié)議Onvif蔓姚，現(xiàn)在大多數(shù)安防系統(tǒng)的攝像機(jī)都支持這種協(xié)議，百度百科上是這么說(shuō)的：
? ? ? ? 2008年5月慨丐，由安訊士聯(lián)合博世及索尼公司三方宣布將攜手共同成立一個(gè)國(guó)際開(kāi)放型網(wǎng)絡(luò)視頻產(chǎn)品標(biāo)準(zhǔn)網(wǎng)絡(luò)接口開(kāi)發(fā)論壇坡脐，取名為ONVIF（Open Network Video Interface Forum，開(kāi)放型網(wǎng)絡(luò)視頻接口論壇）房揭，并以公開(kāi)备闲、開(kāi)放的原則共同制定開(kāi)放性行業(yè)標(biāo)準(zhǔn)晌端。
? ? ? ? 反正記得有這么個(gè)輸出協(xié)議就行了，這對(duì)項(xiàng)目沒(méi)有太大影響恬砂，還有一個(gè)輸出協(xié)議就是RTSP咧纠，這兩個(gè)輸出協(xié)議是EasyNVR主要的規(guī)格需求。然后安攝像頭的事情我就不多說(shuō)了泻骤，跟本文的主題沒(méi)有太大的關(guān)系漆羔，我用的是EasyN的攝像頭，挺清楚的狱掂。
四演痒、step2
? ? ? ?重點(diǎn)是接下來(lái)要講的視頻傳輸協(xié)議HLS和RTMP，要講后端獲取的視頻流渲染到前端趋惨，離不開(kāi)這兩種協(xié)議鸟顺。大家可以先去下載EasyNVR的客戶端文件，這是EasyNVR的官方下載地址：
? ? ? ? 下載之后是一個(gè)解壓包器虾，是一個(gè)綠色文件讯嫂，直接解壓就行，然后按照里面的“EasyNVR互聯(lián)網(wǎng)直播服務(wù)器使用說(shuō)明書(shū)”去配置相關(guān)信息兆沙，這些東西都很簡(jiǎn)單欧芽，就不過(guò)多敘述了。
? ? ? 重點(diǎn)給大家講一下HLS（HTTP Live Streaming）傳輸協(xié)議葛圃，作為H5的御用傳輸協(xié)議渐裸，很是好用。它的原理就是在后端生成一個(gè)存儲(chǔ)視頻流的文件夾装悲，里面存放著一個(gè).m3u8的索引文件，索引指向與該索引文件同級(jí)的視頻流.ts文件尚氛，視頻能力層不斷的截取新的.ts文件诀诊，也在不斷地刷新.m3u8文件，我們只需要在前端繼承的視頻播放器中引入.m3u8文件的URL即可不斷獲取.ts文件阅嘶。而EasyNVR作為本次項(xiàng)目使用的視頻能力層属瓣，他也開(kāi)放了端口我們提供了我們所需的.m3u8的URL。在EasyNVR根目錄下的另一個(gè)文檔“EasyNVR網(wǎng)絡(luò)攝像機(jī)互聯(lián)網(wǎng)直播方案及二次開(kāi)發(fā)文檔”中讯柔，就為大家介紹了EasyNVR開(kāi)放的所有API抡蛙。找到我們將來(lái)最需要的兩個(gè)接口，記住他們大概的“樣子”魂迄。包括接收的參數(shù)粗截、相應(yīng)文本中的對(duì)象信息等等。
? ? ? ?其實(shí)到了這一步有經(jīng)驗(yàn)的人應(yīng)該都知道了大概的解決方案了捣炬。無(wú)非就是再寫個(gè)前端播放器熊昌，然后引入后端傳回的URL就好了绽榛，只需要替換其中的｛host｝或者拼接一下域名就好了。前端播放器的編寫我也不做過(guò)多敘述了婿屹，我把源碼托管在了github上灭美，大家直接下載然后修改demo里面的參數(shù)就可以了。
在EasyNVR的根目錄下開(kāi)啟start.bat昂利，然后咱們自己寫個(gè)ajax去調(diào)咱們自己內(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);
}
});
我調(diào)的是官方提供的域名蜂奸，響應(yīng)回的文本是下面這樣的：
? ? ? ?如果把傳輸?shù)胶蠖说膁ata的protocol的value改為RTMP將會(huì)輸出一段“rtmp://{host}:10935/hls/stream_1”這樣的URL犁苏，這就相當(dāng)于是引入存儲(chǔ)我們視頻流的文件，但是這里有一個(gè)需要注意的地方窝撵，rtmp協(xié)議不支持跨域傀顾，如果把我們從其他域名獲取的URL直接放到src中去，瀏覽器會(huì)console如下信息：
? ? ? 但是HLS協(xié)議不論跨不跨域都能支持碌奉，因?yàn)樗腔贖TTP協(xié)議的短曾，所以我們盡量使用HLS協(xié)議傳輸，在往后端傳遞參數(shù)的時(shí)候赐劣，我們盡量使用protocol:"HLS"嫉拐。對(duì)于傳回的HLS URL，我們還需要后期為他拼接域名魁兼，域名就是我們調(diào)用API時(shí)候的主域名婉徘，這里指的就是“easynvr.easydarwin.org:10800”。最后拼接出的完整的URL如下：“http://easynvr.easydarwin.org:10800/hls/stream_1/stream_1_live.m3u8”咐汞，直接塞到大家clone的播放器里面的src就可以了盖呼。到了這一步，視頻直播的大體原理就基本實(shí)現(xiàn)了化撕。最后的效果如下：
video會(huì)不斷刷新.m3u8几晤，不斷獲取視頻流，實(shí)現(xiàn)直播植阴。自己架的EasyNVR同理蟹瘾。
? ? ? ?接下來(lái)拓展一些內(nèi)網(wǎng)穿透的知識(shí)。要把內(nèi)網(wǎng)映射到外網(wǎng)掠手，有很多途徑憾朴，其中不乏購(gòu)買域名、購(gòu)買代理服務(wù)器等等操作∨绺耄現(xiàn)在我說(shuō)個(gè)用于測(cè)試的比較常用的方法众雷，那就是內(nèi)網(wǎng)穿透。我選擇的內(nèi)網(wǎng)穿透軟件是natapp，自己花了3塊錢賣了一年的專屬域名（之前我在狗爹網(wǎng)上挑了一個(gè)特別漂亮的域名报腔，.com結(jié)尾的株搔，帶上優(yōu)惠碼都得要300多/5年，最關(guān)鍵的是在我狠下心要買的時(shí)候他居然提示我無(wú)法付款纯蛾，并不知道哪里出了問(wèn)題纤房，就去用內(nèi)網(wǎng)穿透了）湖员，這是natapp的官網(wǎng)地址：
? ? ? ? ?按照官網(wǎng)里面的教程一步步配置就可以了晰房，全部都是圖文教程，0基礎(chǔ)也可以弄好如庭，不過(guò)得注意在配置通道的時(shí)候要把默認(rèn)端口改為10800碰煌，因?yàn)槲覀兊腅asyNVR用的端口就是它舒岸。這就是通過(guò)外網(wǎng)訪問(wèn)的效果：
由于涉及隱私視頻內(nèi)容就不作展示了，整個(gè)直播架構(gòu)流程大致就是這樣芦圾。
