分享內(nèi)容簡(jiǎn)介：
目前視頻直播，尤其是移動(dòng)端的視頻直播已經(jīng)火到不行了，基本上各大互聯(lián)網(wǎng)公司都有了自己的直播產(chǎn)品，所以對(duì)于直播的一些基本知識(shí)和主要技術(shù)點(diǎn)也要有所了解，本次分享就向大家介紹一下其中的奧秘。

目前累計(jì)服務(wù)客戶上千多家，積累了豐富的產(chǎn)品開(kāi)發(fā)及服務(wù)經(jīng)驗(yàn)。以網(wǎng)站設(shè)計(jì)水平和技術(shù)實(shí)力，樹立企業(yè)形象，為客戶提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。創(chuàng)新互聯(lián)公司始終以務(wù)實(shí)、誠(chéng)信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過(guò)對(duì)領(lǐng)先技術(shù)的掌握、對(duì)創(chuàng)意設(shè)計(jì)的研究、對(duì)客戶形象的視覺(jué)傳遞、對(duì)應(yīng)用系統(tǒng)的結(jié)合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

內(nèi)容大體框架:

1. 怎樣利用 HTML5 來(lái)播放直播視頻
2. 怎樣錄制直播視頻
3. 怎樣實(shí)時(shí)上傳直播視頻
4. 直播中的用戶交互

下面是本期分享內(nèi)容整理

Hello, 大家好，我是呂鳴，目前是在騰訊 SNG 的即通應(yīng)用部負(fù)責(zé)手Q的興趣部落 Web 前端開(kāi)發(fā)工作。

針對(duì)目前比較火的視頻直播，我做了一些研究和探索，同時(shí)我們的項(xiàng)目將會(huì)用到直播為此打下技術(shù)基礎(chǔ)，下面就向大家分享一下直播的整個(gè)流程和一些技術(shù)點(diǎn)。
一、移動(dòng)視頻直播發(fā)展

大家首先來(lái)看下面這張圖:

可以看到，直播從 PC 到一直發(fā)展到移動(dòng)端，越來(lái)越多的直播類 App 上線，同時(shí)移動(dòng)直播進(jìn)入了前所未有的爆發(fā)階段，但是對(duì)于大多數(shù)移動(dòng)直播來(lái)說(shuō)，還是要以 Native 客戶端實(shí)現(xiàn)為主，但是 HTML5 在移動(dòng)直播端也承載著不可替代的作用，例如 HTML5 有著傳播快，易發(fā)布的優(yōu)勢(shì)，同時(shí)最為關(guān)鍵的時(shí) HTML5 同樣可以播放直播視頻。

大家可以看下面這張大概的實(shí)現(xiàn)圖

完整的直播可以分為以下幾塊：

視頻錄制端：一般是電腦上的音視頻輸入設(shè)備或者手機(jī)端的攝像頭或者麥克風(fēng)，目前以移動(dòng)端的手機(jī)視頻為主。
視頻播放端：可以是電腦上的播放器，手機(jī)端的 Native 播放器，還有就是 HTML5 的 video 標(biāo)簽等，目前還是已手機(jī)端的 Native 播放器為主。
視頻服務(wù)器端：一般是一臺(tái) nginx 服務(wù)器，用來(lái)接受視頻錄制端提供的視頻源，同時(shí)提供給視頻播放端流服務(wù)。

大家可以看下大致的結(jié)構(gòu)圖：

二、HTML5 錄制視頻：

對(duì)于HTML5視頻錄制，可以使用強(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 錄制視頻基本流程是：

調(diào)用 window.navigator.webkitGetUserMedia() 獲取用戶的PC攝像頭視頻數(shù)據(jù)。
將獲取到視頻流數(shù)據(jù)轉(zhuǎn)換成 window.webkitRTCPeerConnection (一種視頻流數(shù)據(jù)格式)。
利用 webscoket 將視頻流數(shù)據(jù)傳輸?shù)椒?wù)端

由于許多方法都要加上瀏覽器前綴，所以很多移動(dòng)端的瀏覽器還不支持 webRTC，所以真正的視頻錄制還是要靠客戶端（iOS,Android）來(lái)實(shí)現(xiàn),效果會(huì)好一些。
三、HTML5 播放直播視頻：

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

下面是簡(jiǎn)單的代碼使用 video 播放直播視頻：

1.什么是 HLS 協(xié)議:

簡(jiǎn)單講就是把整個(gè)流分成一個(gè)個(gè)小的，基于 HTTP 的文件來(lái)下載，每次只下載一些，前面提到了用于 HTML5 播放直播視頻時(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 文件，就是存放視頻的文件：

2.HLS 的請(qǐng)求流程：

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

大概是這個(gè)流程：

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í)回造成更多的緩沖，所以蘋果官方推薦的 ts 時(shí)長(zhǎng)時(shí)10s，所以這樣就會(huì)大改有30s的延遲。所以服務(wù)器接收流，轉(zhuǎn)碼，保存，切塊，再分發(fā)給客戶端，這里就延時(shí)的根本原因。

更多關(guān)于延遲的問(wèn)題可以參考蘋果官方地址：
https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

但是 HTML5 直播視頻卻有一些不可替代的優(yōu)勢(shì):

傳播性好，利于分享等操作。
可以動(dòng)態(tài)發(fā)布，有利于實(shí)時(shí)迭代產(chǎn)品需求并迅速上線。
不用安裝 App，直接打開(kāi)瀏覽器即可。

四、iOS 采集（錄制）音視頻數(shù)據(jù)OS

關(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è)步驟：

音視頻的采集，iOS 中，利用 AVCaptureSession 和 AVCaptureDevice 可以采集到原始的音視頻數(shù)據(jù)流。
對(duì)視頻進(jìn)行 H264 編碼，對(duì)音頻進(jìn)行 AAC 編碼，在 iOS 中分別有已經(jīng)封裝好的編碼庫(kù)來(lái)實(shí)現(xiàn)對(duì)音視頻的編碼。
對(duì)編碼后的音、視頻數(shù)據(jù)進(jìn)行組裝封包；
建立 RTMP 連接并上推到服務(wù)端。

下面是具體的采集音視頻數(shù)據(jù)的流程：

1.關(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ì)比：

2.推流

所謂推流，就是將我們已經(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è)步驟：

安裝一臺(tái) nginx 服務(wù)器。
安裝 nginx 的 RTMP 擴(kuò)展，目前使用比較多的是 https://github.com/arut/nginx-rtmp-module
配置 nginx 的 conf 文件
重啟 nginx，將 RTMP 的推流地址寫為 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 的配置文件

五、直播中的用戶交互：

對(duì)于直播中的用戶交互大致可以分為：

送禮物
發(fā)表評(píng)論或者彈幕

對(duì)于送禮物，在 HTML5 端可以利用 DOM 和 CSS3 實(shí)現(xiàn)送禮物邏輯和一些特殊的禮物動(dòng)畫，實(shí)現(xiàn)技術(shù)難點(diǎn)不大。

對(duì)于彈幕來(lái)說(shuō)，要稍微復(fù)雜一些，可能需要關(guān)注以下幾點(diǎn)：

彈幕實(shí)時(shí)性，可以利用 webscoket 來(lái)實(shí)時(shí)發(fā)送和接收新的彈幕并渲染出來(lái)。
對(duì)于不支持 webscoket 的瀏覽器來(lái)說(shuō)，只能降級(jí)為長(zhǎng)輪詢或者前端定時(shí)器發(fā)送請(qǐng)求來(lái)獲取實(shí)時(shí)彈幕。
彈幕渲染時(shí)的動(dòng)畫和碰撞檢測(cè)(即彈幕不重疊)等等

六、總結(jié)

目前較為成熟的直播產(chǎn)品，大致都是以 Server 端和 HTML5 和 Native(android,ios)搭配實(shí)現(xiàn)直播：

基本是下圖這個(gè)套路：

所以 HTML5 在整個(gè)直播中，還是有著重要的地位的！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：HTML5視頻直播技術(shù)-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.chinadenli.net/article24/iiice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、靜態(tài)網(wǎng)站、虛擬主機(jī)、搜索引擎優(yōu)化、網(wǎng)站維護(hù)、外貿(mào)建站

廣告

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