如何使用H5做視頻直播-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用H5做視頻直播 ，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),寧晉企業(yè)網(wǎng)站建設(shè),寧晉品牌網(wǎng)站建設(shè),網(wǎng)站定制,寧晉網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,寧晉網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1 H5到底能不能做視頻直播？

當(dāng)然可以， H5火了這么久，涵蓋了各個(gè)方面的技術(shù)。

對(duì)于視頻錄制，可以使用強(qiáng)大的webRTC（Web Real-Time Communication）是一個(gè)支持網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音對(duì)話(huà)或視頻對(duì)話(huà)的技術(shù)，缺點(diǎn)是只在PC的chrome上支持較好，移動(dòng)端支持不太理想。

對(duì)于視頻播放，可以使用HLS(HTTP Live Streaming)協(xié)議播放直播流，iOS和Android都天然支持這種協(xié)議，配置簡(jiǎn)單，直接使用video標(biāo)簽即可。

webRTC兼容性：

video標(biāo)簽播放hls協(xié)議視頻：

1 2 3 4

<video controls autoplay>    <source src="http://10.66.69.77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" />    <p class="warning">Your browser does not support HTML5 video.</p> </video>

2 到底什么是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è)文件本身不能播放，只是存放了播放信息的文本文件：

1 2 3 4 5 6 7

#EXTM3U                     m3u文件頭 #EXT-X-MEDIA-SEQUENCE       第一個(gè)TS分片的序列號(hào) #EXT-X-TARGETDURATION       每個(gè)分片TS的大的時(shí)長(zhǎng) #EXT-X-ALLOW-CACHE          是否允許cache #EXT-X-ENDLIST              m3u8文件結(jié)束符 #EXTINF                     指定每個(gè)媒體段(ts)的持續(xù)時(shí)間（秒），僅對(duì)其后面的URI有效 mystream-12.ts

ts文件：

HLS的請(qǐng)求流程是：
1 http請(qǐng)求m3u8的url。
2 服務(wù)端返回一個(gè)m3u8的播放列表，這個(gè)播放列表是實(shí)時(shí)更新的，一般一次給出5段數(shù)據(jù)的url。
3 客戶(hù)端解析m3u8的播放列表，再按序請(qǐng)求每一段的url，獲取ts數(shù)據(jù)流。

簡(jiǎn)單流程：

3 HLS直播延時(shí)

我們知道hls協(xié)議是將直播流分成一段一段的小段視頻去下載播放的，所以假設(shè)列表里面的包含5個(gè)ts文件，每個(gè)TS文件包含5秒的視頻內(nèi)容，那么整體的延遲就是25秒。因?yàn)楫?dāng)你看到這些視頻時(shí)，主播已經(jīng)將視頻錄制好上傳上去了，所以時(shí)這樣產(chǎn)生的延遲。當(dāng)然可以縮短列表的長(zhǎng)度和單個(gè)ts文件的大小來(lái)降低延遲，極致來(lái)說(shuō)可以縮減列表長(zhǎng)度為1，并且ts的時(shí)長(zhǎng)為1s，但是這樣會(huì)造成請(qǐng)求次數(shù)增加，增大服務(wù)器壓力，當(dāng)網(wǎng)速慢時(shí)回造成更多的緩沖，所以蘋(píng)果官方推薦的ts時(shí)長(zhǎng)時(shí)10s，所以這樣就會(huì)大改有30s的延遲。參考資料：https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

4 視頻直播的整個(gè)流程是什么？

當(dāng)視頻直播可大致分為：

1 視頻錄制端：一般是電腦上的音視頻輸入設(shè)備或者手機(jī)端的攝像頭或者麥克風(fēng)，目前以移動(dòng)端的手機(jī)視頻為主。

2 視頻播放端：可以是電腦上的播放器，手機(jī)端的native播放器，還有就是h6的video標(biāo)簽等，目前還是已手機(jī)端的native播放器為主。

3 視頻服務(wù)器端：一般是一臺(tái)nginx服務(wù)器，用來(lái)接受視頻錄制端提供的視頻源，同時(shí)提供給視頻播放端流服務(wù)。

簡(jiǎn)單流程：

5 怎樣進(jìn)行音視頻采集？

當(dāng)首先明確幾個(gè)概念：

視頻編碼：所謂視頻編碼就是指通過(guò)特定的壓縮技術(shù)，將某個(gè)視頻格式的文件轉(zhuǎn)換成另一種視頻格式文件的方式，我們使用的iphone錄制的視頻，必須要經(jīng)過(guò)編碼，上傳，解碼，才能真正的在用戶(hù)端的播放器里播放。

編解碼標(biāo)準(zhǔn)：視頻流傳輸中最為重要的編解碼標(biāo)準(zhǔn)有國(guó)際電聯(lián)的H.261、H.263、H.264，其中HLS協(xié)議支持H.264格式的編碼。
音頻編碼：同視頻編碼類(lèi)似，將原始的音頻流按照一定的標(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ù)端。

ps：由于編碼庫(kù)大多使用C語(yǔ)言編寫(xiě)，需要自己使用時(shí)編譯，對(duì)于ios，可以使用已經(jīng)編譯好的編碼庫(kù)。

x264編碼：https://github.com/kewlbear/x264-ios

faac編碼：https://github.com/fflydev/faac-ios-build

ffmpeg編碼：https://github.com/kewlbear/FFmpeg-iOS-build-script

關(guān)于如果想給視頻增加一些特殊效果，例如增加濾鏡等，一般在編碼前給使用濾鏡庫(kù)，但是這樣也會(huì)造成一些耗時(shí)，導(dǎo)致上傳視頻數(shù)據(jù)有一定延時(shí)。

簡(jiǎn)單流程：

6 前面提到的ffmpeg是什么？

和之前的x264一樣，ffmpeg其實(shí)也是一套編碼庫(kù)，類(lèi)似的還有Xvid，Xvid是基于MPEG4協(xié)議的編解碼器，x264是基于H.264協(xié)議的編碼器，ffmpeg集合了各種音頻，視頻編解碼協(xié)議，通過(guò)設(shè)置參數(shù)可以完成基于MPEG4,H.264等協(xié)議的編解碼，demo這里使用的是x264編碼庫(kù)。

7 什么是RTMP？

Real Time Messaging Protocol（簡(jiǎn)稱(chēng) 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ì)比：

8 推流

簡(jiǎn)所謂推流，就是將我們已經(jīng)編碼好的音視頻數(shù)據(jù)發(fā)往視頻流服務(wù)器中，一般常用的是使用rtmp推流，可以使用第三方庫(kù)librtmp-iOS進(jìn)行推流，librtmp封裝了一些核心的api供使用者調(diào)用，如果覺(jué)得麻煩，可以使用現(xiàn)成的ios視頻推流sdk，也是基于rtmp的，https://github.com/runner365/LiveVideoCoreSDK

9 推流服務(wù)器搭建

簡(jiǎn)簡(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文件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

rtmp {    server {        listen 1935;  #監(jiān)聽(tīng)的端口        chunk_size 4000;                    application hls {  #rtmp推流請(qǐng)求路徑            live on;            hls on;            hls_path /usr/local/var/www/hls;            hls_fragment 5s;        }    } }

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/

根據(jù)以上步驟基本上已經(jīng)實(shí)現(xiàn)了一個(gè)支持rtmp的視頻服務(wù)器了。

10 在HTML5頁(yè)面進(jìn)行播放直播視頻？

簡(jiǎn)單來(lái)說(shuō)，直接使用video標(biāo)簽即可播放hls協(xié)議的直播視頻：

1 2 3 4

<video autoplay webkit-playsinline>    <source src="http://10.66.69.77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" />    <p class="warning">Your browser does not support HTML5 video.</p> </video>

需要注意的是，給video標(biāo)簽增加webkit-playsinline屬性，這個(gè)屬性是為了讓video視頻在ios的uiwebview里面可以不全屏播放，默認(rèn)ios會(huì)全屏播放視頻，需要給uiwebview設(shè)置allowsInlineMediaPlayback＝Y(jié)ES。業(yè)界比較成熟的videojs，可以根據(jù)不同平臺(tái)選擇不同的策略，例如ios使用video標(biāo)簽，pc使用flash等。

11 坑點(diǎn)總結(jié)

簡(jiǎn)根據(jù)以上步驟，筆者寫(xiě)了一個(gè)demo，從實(shí)現(xiàn)ios視頻錄制，采集，上傳，nginx服務(wù)器下發(fā)直播流，h6頁(yè)面播放直播視頻者一整套流程，總結(jié)出以下幾點(diǎn)比較坑的地方：

1 在使用AVCaptureSession進(jìn)行采集視頻時(shí)，需要實(shí)現(xiàn)AVCaptureVideoDataOutputSampleBufferDelegate協(xié)議，同時(shí)在- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection捕獲到視頻流，要注意的是didOutputSampleBuffer這個(gè)方法不是didDropSampleBuffer方法，后者只會(huì)觸發(fā)一次，當(dāng)時(shí)開(kāi)始寫(xiě)的是didDropSampleBuffer方法，差了半天才發(fā)現(xiàn)方法調(diào)用錯(cuò)了。

2 在使用rtmp推流時(shí)，rmtp地址要以rtmp://開(kāi)頭，ip地址要寫(xiě)實(shí)際ip地址，不要寫(xiě)成localhost，同時(shí)要加上端口號(hào)，因?yàn)槭謾C(jī)端上傳時(shí)是無(wú)法識(shí)別localhost的。

這里后續(xù)會(huì)補(bǔ)充上一些坑點(diǎn)，有的需要貼代碼，這里先列這么多。

12 業(yè)界支持

目前，騰訊云，百度云，阿里云都已經(jīng)有了基于視頻直播的解決方案，從視頻錄制到視頻播放，推流，都有一系列的sdk可以使用，缺點(diǎn)就是需要收費(fèi)，如果可以的話(huà)，自己實(shí)現(xiàn)一套也并不是難事哈。

demo地址：https://github.com/lvming6816077/LMVideoTest/

關(guān)于如何使用H5做視頻直播 就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：如何使用H5做視頻直播-創(chuàng)新互聯(lián)
本文URL：http://muchs.cn/article24/dcpjje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、軟件開(kāi)發(fā)、網(wǎng)站建設(shè)、外貿(mào)建站、電子商務(wù)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)