1、rtmp流媒體協(xié)議rtmp流媒體協(xié)議rtmp流媒體協(xié)議H5視頻直播掃盲1 H5到底能不能做視頻直播？當(dāng)然可以， H5火了這么久，涵蓋了各個方面的技術(shù)。對于視頻錄制，可以使用強(qiáng)大的webRTC（Web Real-Time Communication）是一個支持網(wǎng)頁瀏覽器進(jìn)行實(shí)時語音對話或視頻對話的技術(shù)，缺點(diǎn)是只在PC的chrome上支持較好，移動端支持不太理想。對于視頻播放，可以使用HLS(HTTP Live Streaming)協(xié)議播放直播流，ios和android都天然支持這種協(xié)議，配置簡單，直接使用video標(biāo)簽即可。webRTC兼容性：video標(biāo)簽播放hls協(xié)議視頻：1234Your

2、browser does not support HTML5 video.2 到底什么是HLS協(xié)議？簡單講就是把整個流分成一個個小的，基于HTTP的文件來下載，每次只下載一些，前面提到了用于H5播放直播視頻時引入的一個.m3u8的文件，這個文件就是基于HLS協(xié)議，存放視頻流元數(shù)據(jù)的文件。每一個.m3u8文件，分別對應(yīng)若干個ts文件，這些ts文件才是真正存放視頻的數(shù)據(jù)，m3u8文件只是存放了一些ts文件的配置信息和相關(guān)路徑，當(dāng)視頻播放時，.m3u8是動態(tài)改變的，video標(biāo)簽會解析這個文件，并找到對應(yīng)的ts文件來播放，所以一般為了加快速度，.m3u8放在web服務(wù)器上，ts文件放在cdn上。.m

3、3u8文件，其實(shí)就是以UTF-8編碼的m3u文件，這個文件本身不能播放，只是存放了播放信息的文本文件：1234567#EXTM3U m3u文件頭#EXT-X-MEDIA-SEQUENCE 第一個TS分片的序列號#EXT-X-TARGETDURATION 每個分片TS的最大的時長#EXT-X-ALLOW-CACHE是否允許cache#EXT-X-ENDLISTm3u8文件結(jié)束符#EXTINF 指定每個媒體段(ts)的持續(xù)時間（秒），僅對其后面的URI有效mystream-12.tsts文件：HLS的請求流程是：1http請求m3u8的url。2服務(wù)端返回一個m3u8的播放列表，這個播放列表是實(shí)時

4、更新的，一般一次給出5段數(shù)據(jù)的url。3客戶端解析m3u8的播放列表，再按序請求每一段的url，獲取ts數(shù)據(jù)流。簡單流程：3 HLS直播延時我們知道hls協(xié)議是將直播流分成一段一段的小段視頻去下載播放的，所以假設(shè)列表里面的包含5個ts文件，每個TS文件包含5秒的視頻內(nèi)容，那么整體的延遲就是25秒。因?yàn)楫?dāng)你看到這些視頻時，主播已經(jīng)將視頻錄制好上傳上去了，所以時這樣產(chǎn)生的延遲。當(dāng)然可以縮短列表的長度和單個ts文件的大小來降低延遲，極致來說可以縮減列表長度為1，并且ts的時長為1s，但是這樣會造成請求次數(shù)增加，增大服務(wù)器壓力，當(dāng)網(wǎng)速慢時回造成更多的緩沖，所以蘋果官方推薦的ts時長時10s，所以這樣就

5、會大改有30s的延遲。參考資料： HYPERLINK /library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html /library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html4 視頻直播的整個流

6、程是什么？當(dāng)視頻直播可大致分為：1 視頻錄制端：一般是電腦上的音視頻輸入設(shè)備或者手機(jī)端的攝像頭或者麥克風(fēng)，目前以移動端的手機(jī)視頻為主。2 視頻播放端：可以是電腦上的播放器，手機(jī)端的native播放器，還有就是h5的video標(biāo)簽等，目前還是已手機(jī)端的native播放器為主。3 視頻服務(wù)器端：一般是一臺nginx服務(wù)器，用來接受視頻錄制端提供的視頻源，同時提供給視頻播放端流服務(wù)。簡單流程：5 怎樣進(jìn)行音視頻采集？當(dāng)首先明確幾個概念：視頻編碼：所謂視頻編碼就是指通過特定的壓縮技術(shù)，將某個視頻格式的文件轉(zhuǎn)換成另一種視頻格式文件的方式，我們使用的iphone錄制的視頻，必須要經(jīng)過編碼，上傳，解碼，才能

7、真正的在用戶端的播放器里播放。編解碼標(biāo)準(zhǔn)：視頻流傳輸中最為重要的編解碼標(biāo)準(zhǔn)有國際電聯(lián)的H.261、H.263、H.264，其中HLS協(xié)議支持H.264格式的編碼。音頻編碼：同視頻編碼類似，將原始的音頻流按照一定的標(biāo)準(zhǔn)進(jìn)行編碼，上傳，解碼，同時在播放器里播放，當(dāng)然音頻也有許多編碼標(biāo)準(zhǔn)，例如PCM編碼，WMA編碼，AAC編碼等等，這里我們HLS協(xié)議支持的音頻編碼方式是AAC編碼。下面將利用ios上的攝像頭，進(jìn)行音視頻的數(shù)據(jù)采集，主要分為以下幾個步驟：1音視頻的采集，ios中，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音視頻數(shù)據(jù)流。2 對視頻進(jìn)行H264編碼

8、，對音頻進(jìn)行AAC編碼，在ios中分別有已經(jīng)封裝好的編碼庫來實(shí)現(xiàn)對音視頻的編碼。3 對編碼后的音、視頻數(shù)據(jù)進(jìn)行組裝封包；4 建立RTMP連接并上推到服務(wù)端。ps：由于編碼庫大多使用c語言編寫，需要自己使用時編譯，對于ios，可以使用已經(jīng)編譯好的編碼庫。x264編碼： HYPERLINK /kewlbear/x264-ios /kewlbear/x264-iosfaac編碼： HYPERLINK /fflydev/faac-ios-build /fflydev/faac-ios-buildffmpeg編碼： HYPERLINK /kewlbear/FFmpeg-iOS-build-script

9、/kewlbear/FFmpeg-iOS-build-script關(guān)于如果想給視頻增加一些特殊效果，例如增加濾鏡等，一般在編碼前給使用濾鏡庫，但是這樣也會造成一些耗時，導(dǎo)致上傳視頻數(shù)據(jù)有一定延時。簡單流程：6 前面提到的ffmpeg是什么？和之前的x264一樣，ffmpeg其實(shí)也是一套編碼庫，類似的還有Xvid，Xvid是基于MPEG4協(xié)議的編解碼器，x264是基于H.264協(xié)議的編碼器，ffmpeg集合了各種音頻，視頻編解碼協(xié)議，通過設(shè)置參數(shù)可以完成基于MPEG4,H.264等協(xié)議的編解碼，demo這里使用的是x264編碼庫。7 什么是RTMP？Real Time Messaging Pro

10、tocol（簡稱 RTMP）是 Macromedia 開發(fā)的一套視頻直播協(xié)議，現(xiàn)在屬于 Adobe。和HLS一樣都可以應(yīng)用于視頻直播，區(qū)別是RTMP基于flash無法在ios的瀏覽器里播放，但是實(shí)時性比HLS要好。所以一般使用這種協(xié)議來上傳視頻流，也就是視頻流推送到服務(wù)器。這里列舉一下hls和rtmp對比：8 推流簡所謂推流，就是將我們已經(jīng)編碼好的音視頻數(shù)據(jù)發(fā)往視頻流服務(wù)器中，一般常用的是使用rtmp推流，可以使用第三方庫 HYPERLINK /ifactorylab/librtmp-iOS librtmp-iOS進(jìn)行推流，librtmp封裝了一些核心的api供使用者調(diào)用，如果覺得麻煩，可以使

11、用現(xiàn)成的ios視頻推流sdk，也是基于rtmp的， HYPERLINK /runner365/LiveVideoCoreSDK /runner365/LiveVideoCoreSDK9 推流服務(wù)器搭建簡簡單的推流服務(wù)器搭建，由于我們上傳的視頻流都是基于rtmp協(xié)議的，所以服務(wù)器也必須要支持rtmp才行，大概需要以下幾個步驟：1 安裝一臺nginx服務(wù)器。2 安裝nginx的rtmp擴(kuò)展，目前使用比較多的是 HYPERLINK /arut/nginx-rtmp-module /arut/nginx-rtmp-module3 配置nginx的conf文件：123456789101112131415

12、1617rtmp server listen 1935;#監(jiān)聽的端口chunk_size 4000;application hls #rtmp推流請求路徑live on;hls on;hls_path /usr/local/var/www/hls;hls_fragment 5s;4 重啟nginx，將rtmp的推流地址寫為rtmp:/ip:1935/hls/mystream，其中hls_path表示生成的.m3u8和ts文件所存放的地址，hls_fragment表示切片時長，mysteam表示一個實(shí)例，即將來要生成的文件名可以先自己隨便設(shè)置一個。更多配置可以參考： HYPERLINK /aru

13、t/nginx-rtmp-module/wiki/ /arut/nginx-rtmp-module/wiki/根據(jù)以上步驟基本上已經(jīng)實(shí)現(xiàn)了一個支持rtmp的視頻服務(wù)器了。10 在html5頁面進(jìn)行播放直播視頻？簡單來說，直接使用video標(biāo)簽即可播放hls協(xié)議的直播視頻：1234Your browser does not support HTML5 video.需要注意的是，給video標(biāo)簽增加webkit-playsinline屬性，這個屬性是為了讓video視頻在ios的uiwebview里面可以不全屏播放，默認(rèn)ios會全屏播放視頻，需要給uiwebview設(shè)置allowsInlineMe

14、diaPlaybackYES。業(yè)界比較成熟的 HYPERLINK / videojs，可以根據(jù)不同平臺選擇不同的策略，例如ios使用video標(biāo)簽，pc使用flash等。11 坑點(diǎn)總結(jié)簡根據(jù)以上步驟，筆者寫了一個demo，從實(shí)現(xiàn)ios視頻錄制，采集，上傳，nginx服務(wù)器下發(fā)直播流，h5頁面播放直播視頻者一整套流程，總結(jié)出以下幾點(diǎn)比較坑的地方：1 在使用AVCaptureSession進(jìn)行采集視頻時，需要實(shí)現(xiàn)AVCaptureVideoDataOutputSampleBufferDelegate協(xié)議，同時在- (void)captureOutput:(AVCaptureOutput *)cap

15、tureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection捕獲到視頻流，要注意的是didOutputSampleBuffer這個方法不是didDropSampleBuffer方法，后者只會觸發(fā)一次，當(dāng)時開始寫的是didDropSampleBuffer方法，差了半天才發(fā)現(xiàn)方法調(diào)用錯了。2 在使用rtmp推流時，rmtp地址要以rtmp:/開頭，ip地址要寫實(shí)際ip地址，不要寫成localhost，同時要加上端口號，因?yàn)槭謾C(jī)端上傳時

16、是無法識別localhost的。這里后續(xù)會補(bǔ)充上一些坑點(diǎn)，有的需要貼代碼，這里先列這么多。demo地址： HYPERLINK /lvming6816077/LMVideoTest /lvming6816077/LMVideoTest/參考資料： HYPERLINK /index.php/archives/615 /index.php/archives/615結(jié)尾打個廣告：移動端日志工具： HYPERLINK /lvming6816077/MLogger /lvming6816077/MLoggerReactNative下拉刷新組件： HYPERLINK /lvming6816077/react

17、-native-pullRefreshScrollView /lvming6816077/react-native-pullRefreshScrollView歡迎使用！原創(chuàng)文章轉(zhuǎn)載請注明：轉(zhuǎn)載自AlloyTeam： HYPERLINK /2016/05/h5-camera-literacy/ /2016/05/h5-camera-literacy/h5-rtmpInsert title here var player = videojs(my-player); var options = ; var player = videojs(my-player, options, function o

18、nPlayerReady() videojs.log(Your player is ready!); / In this context, this is the player that was created by Video.js. this.play(); / How about an event listener? this.on(ended, function() videojs.log(Awww.over so soon?!); ); );nginx -serversRun port 80: $ sudo chown root:wheel /usr/local/opt/nginx-full/bin/nginx $ sudo chmod u+s /usr/local/opt/nginx-full/bin/nginxRel