???? 首先,要感謝 DEV Club 能給我一個(gè)這么好的平臺(tái),在那里學(xué)到大牛們分享的技術(shù).這次感謝的是呂鳴,呂哥的這么好的分享.從中學(xué)到很多,在這做個(gè)摘抄筆記.這是呂哥的博客,大家可以去學(xué)習(xí)哦! http://www.nihaoshijie.com.cn
1.移動(dòng)視頻直播的發(fā)展，大家看下面這張圖
????可以看到，直播從PC到一直發(fā)展到移動(dòng)端，越來(lái)越多的直播類app上線坞嘀，同時(shí)移動(dòng)直播進(jìn)入了前所未有的爆發(fā)階段，但是對(duì)于大多數(shù)移動(dòng)直播來(lái)說(shuō)，還是要以Native客戶端實(shí)現(xiàn)為主，但是H5在移動(dòng)直播端也承載著不可替代的作用，例如H5有著傳播快旭咽，易發(fā)布的優(yōu)勢(shì)贞奋，同時(shí)最為關(guān)鍵的時(shí)H5同樣可以播放直播視頻。大家可以看下面這張大概的實(shí)現(xiàn)圖
完整的直播可以分為以下幾塊：
1) 視頻錄制端：一般是電腦上的音視頻輸入設(shè)備或者手機(jī)端的攝像頭或者麥克風(fēng)穷绵，目前以移動(dòng)端的手機(jī)視頻為主轿塔。
2) 視頻播放端：可以是電腦上的播放器，手機(jī)端的native播放器仲墨，還有就是h5的video標(biāo)簽等勾缭，目前還是已手機(jī)端的native播放器為主。
3) 視頻服務(wù)器端：一般是一臺(tái)nginx服務(wù)器目养，用來(lái)接受視頻錄制端提供的視頻源俩由，同時(shí)提供給視頻播放端流服務(wù)。
大家可以看下大致的結(jié)構(gòu)圖：
2.怎樣使用H5錄制視頻：
????對(duì)于H5視頻錄制癌蚁，可以使用強(qiáng)大的webRTC（Web Real-Time Communication）是一個(gè)支持網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音對(duì)話或視頻對(duì)話的技術(shù)幻梯，缺點(diǎn)是只在PC的chrome上支持較好，移動(dòng)端支持不太理想努释。使用webRTC錄制視頻基本流程是：
1）調(diào)用window.navigator.webkitGetUserMedia()獲取用戶的PC攝像頭視頻數(shù)據(jù)碘梢。
2）將獲取到視頻流數(shù)據(jù)轉(zhuǎn)換成window.webkitRTCPeerConnection(一種視頻流數(shù)據(jù)格式)苗胀。
3）利用webscoket將視頻流數(shù)據(jù)傳輸?shù)椒?wù)端
由于許多方法都要加上瀏覽器前綴忠寻，所以很多移動(dòng)端的瀏覽器還不支持webRTC，所以真正的視頻錄制還是要靠客戶端（ios,android）來(lái)實(shí)現(xiàn),效果會(huì)好一些聋迎。
3.H5播放直播視頻：
????對(duì)于視頻播放，可以使用HLS(HTTP Live Streaming)協(xié)議播放直播流恩沛，ios和android都天然支持這種協(xié)議在扰，配置簡(jiǎn)單，直接使用video標(biāo)簽即可复唤。
下面是簡(jiǎn)單的代碼使用video播放直播視頻：
4.下面說(shuō)一下什么是HLS協(xié)議:
????簡(jiǎn)單講就是把整個(gè)流分成一個(gè)個(gè)小的健田，基于HTTP的文件來(lái)下載，每次只下載一些佛纫，前面提到了用于H5播放直播視頻時(shí)引入的一個(gè).m3u8的文件妓局，這個(gè)文件就是基于HLS協(xié)議，存放視頻流元數(shù)據(jù)的文件呈宇。
每一個(gè).m3u8文件好爬，分別對(duì)應(yīng)若干個(gè)ts文件，這些ts文件才是真正存放視頻的數(shù)據(jù)甥啄，m3u8文件只是存放了一些ts文件的配置信息和相關(guān)路徑存炮，當(dāng)視頻播放時(shí)，.m3u8是動(dòng)態(tài)改變的蜈漓，video標(biāo)簽會(huì)解析這個(gè)文件穆桂，并找到對(duì)應(yīng)的ts文件來(lái)播放，所以一般為了加快速度融虽，.m3u8放在web服務(wù)器上享完，ts文件放在cdn上。
.m3u8文件有额，其實(shí)就是以UTF-8編碼的m3u文件般又，這個(gè)文件本身不能播放，只是存放了播放信息的文本文件巍佑，打開(kāi)之后就是這個(gè)樣子
這個(gè)是ts文件茴迁，就是存放視頻的文件：
5.接下來(lái)是HLS的請(qǐng)求流程：
1) http請(qǐng)求m3u8的url。
2) 服務(wù)端返回一個(gè)m3u8的播放列表萤衰，這個(gè)播放列表是實(shí)時(shí)更新的堕义，一般一次給出5段數(shù)據(jù)的url。
3) 客戶端解析m3u8的播放列表脆栋，再按序請(qǐng)求每一段的url胳螟，獲取ts數(shù)據(jù)流。
大概是這個(gè)流程：
6.關(guān)于HLS直播延時(shí):
????更多關(guān)于延遲的問(wèn)題可以參考蘋(píng)果官方地址：https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html
但是H5直播視頻卻有一些不可替代的優(yōu)勢(shì):
1）傳播性好筹吐，利于分享等操作糖耸。
2）可以動(dòng)態(tài)發(fā)布，有利于實(shí)時(shí)迭代產(chǎn)品需求并迅速上線丘薛。
3）不用安裝app嘉竟，直接打開(kāi)瀏覽器即可
7.下面說(shuō)一下怎樣利用ios來(lái)采集（錄制）音視頻數(shù)據(jù)
????關(guān)于音視頻采集錄制，首先明確下面幾個(gè)概念：
????視頻編碼：所謂視頻編碼就是指通過(guò)特定的壓縮技術(shù)，將某個(gè)視頻格式的文件轉(zhuǎn)換成另一種視頻格式文件的方式舍扰，我們使用的iphone錄制的視頻倦蚪，必須要經(jīng)過(guò)編碼，上傳边苹，解碼陵且，才能真正的在用戶端的播放器里播放。
????編解碼標(biāo)準(zhǔn)：視頻流傳輸中最為重要的編解碼標(biāo)準(zhǔn)有國(guó)際電聯(lián)的H.261个束、H.263慕购、H.264，其中HLS協(xié)議支持H.264格式的編碼茬底。
音頻編碼：同視頻編碼類似沪悲，將原始的音頻流按照一定的標(biāo)準(zhǔn)進(jìn)行編碼，上傳阱表，解碼殿如，同時(shí)在播放器里播放，當(dāng)然音頻也有許多編碼標(biāo)準(zhǔn)最爬，例如PCM編碼涉馁，WMA編碼，AAC編碼等等爱致，這里我們HLS協(xié)議支持的音頻編碼方式是AAC編碼烤送。
利用ios上的攝像頭，進(jìn)行音視頻的數(shù)據(jù)采集蒜鸡，主要分為以下幾個(gè)步驟：
1) 音視頻的采集胯努，ios中牢裳，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音視頻數(shù)據(jù)流逢防。
2) 對(duì)視頻進(jìn)行H264編碼，對(duì)音頻進(jìn)行AAC編碼蒲讯，在ios中分別有已經(jīng)封裝好的編碼庫(kù)來(lái)實(shí)現(xiàn)對(duì)音視頻的編碼忘朝。
3) 對(duì)編碼后的音、視頻數(shù)據(jù)進(jìn)行組裝封包判帮；
4) 建立RTMP連接并上推到服務(wù)端局嘁。
下面是具體的采集音視頻數(shù)據(jù)的流程：
8.關(guān)于RTMP：
????Real Time Messaging Protocol（簡(jiǎn)稱 RTMP）是 Macromedia 開(kāi)發(fā)的一套視頻直播協(xié)議，現(xiàn)在屬于 Adobe晦墙。和HLS一樣都可以應(yīng)用于視頻直播悦昵，區(qū)別是RTMP基于flash無(wú)法在ios的瀏覽器里播放，但是實(shí)時(shí)性比HLS要好晌畅。所以一般使用這種協(xié)議來(lái)上傳視頻流但指，也就是視頻流推送到服務(wù)器。
下面是HLS和RTMP的對(duì)比：
9.下面說(shuō)一下推流
????所謂推流，就是將我們已經(jīng)編碼好的音視頻數(shù)據(jù)發(fā)往視頻流服務(wù)器中棋凳，在ios代碼里面一般常用的是使用rtmp推流拦坠，可以使用第三方庫(kù)librtmp-iOS進(jìn)行推流，librtmp封裝了一些核心的api供使用者調(diào)用剩岳。例如推流api等等贞滨，配置服務(wù)器地址，即可將轉(zhuǎn)碼后的視頻流推往服務(wù)器拍棕。
那么如何搭建一個(gè)推流服務(wù)器呢
簡(jiǎn)單的推流服務(wù)器搭建晓铆，由于我們上傳的視頻流都是基于rtmp協(xié)議的，所以服務(wù)器也必須要支持rtmp才行莫湘，大概需要以下幾個(gè)步驟：
1) 安裝一臺(tái)nginx服務(wù)器尤蒿。
2) 安裝nginx的rtmp擴(kuò)展，目前使用比較多的是https://github.com/arut/nginx-rtmp-module
3) 配置nginx的conf文件
4) 重啟nginx幅垮，將rtmp的推流地址寫(xiě)為rtmp://ip:1935/hls/mystream腰池，其中hls_path表示生成的.m3u8和ts文件所存放的地址，hls_fragment表示切片時(shí)長(zhǎng)忙芒，mysteam表示一個(gè)實(shí)例示弓，即將來(lái)要生成的文件名可以先自己隨便設(shè)置一個(gè)。更多配置可以參考：https://github.com/arut/nginx-rtmp-module/wiki/
下面是nginx的配置文件
10.直播中的用戶交互：
????對(duì)于直播中的用戶交互大致可以分為：
1）送禮物
2）發(fā)表評(píng)論或者彈幕
對(duì)于彈幕來(lái)說(shuō)呵萨，要稍微復(fù)雜一些奏属，可能需要關(guān)注以下幾點(diǎn)：
對(duì)于送禮物，在H5端可以利用dom和css3實(shí)現(xiàn)送禮物邏輯和一些特殊的禮物動(dòng)畫(huà)潮峦，實(shí)現(xiàn)技術(shù)難點(diǎn)不大囱皿。
1) 彈幕實(shí)時(shí)性，可以利用webscoket來(lái)實(shí)時(shí)發(fā)送和接收新的彈幕并渲染出來(lái)忱嘹。
3) 對(duì)于不支持webscoket的瀏覽器來(lái)說(shuō)嘱腥，只能降級(jí)為長(zhǎng)輪詢或者前端定時(shí)器發(fā)送請(qǐng)求來(lái)獲取實(shí)時(shí)彈幕。
3）彈幕渲染時(shí)的動(dòng)畫(huà)和碰撞檢測(cè)(即彈幕不重疊)等等
11.最后講一下目前較為成熟的直播產(chǎn)品拘悦，大致都是以server端和H5和Native(android,ios)搭配實(shí)現(xiàn)直播：
基本是下圖這個(gè)套路：
所以H5在整個(gè)直播中齿兔，還是有著重要的地位的！
最后础米，根據(jù)本次分享的內(nèi)容分苇，呂哥這邊實(shí)現(xiàn)了一個(gè)ios端錄制，推流屁桑，NGINX接收流医寿，同時(shí)分發(fā)的HLS直播流的一整套demo，感興趣的同學(xué)可以看下面這個(gè)鏈接https://github.com/lvming6816077/LMVideoTest
下面互動(dòng)問(wèn)答:
A0:移動(dòng)端這邊怎么進(jìn)行編碼轉(zhuǎn)碼蘑斧？用ffmpeg編譯時(shí)很麻煩
答：關(guān)于ios這邊靖秩，其實(shí)不用關(guān)心轉(zhuǎn)碼問(wèn)題艾帐，因?yàn)橐呀?jīng)有了很多開(kāi)源的庫(kù)提供給我們了例如x264編碼：https://github.com/kewlbear/x264-ios
faac編碼:https://github.com/fflydev/faac-ios-build
A1.您介紹的都是native 播放和還有 h5的 video 標(biāo)簽播放, iOS端有沒(méi)有考慮過(guò)整個(gè)用原生的 oc或者 swift 實(shí)現(xiàn)?
答：關(guān)于播放端，其實(shí)真正體驗(yàn)好的還是要用native來(lái)實(shí)現(xiàn)的盆偿，而且native實(shí)現(xiàn)可以用rtmp來(lái)播放直播柒爸，延遲會(huì)好很多，H5來(lái)播直播主要是考慮到易傳播性好事扭。
