HTML5視頻直播技術(shù)-創(chuàng)新互聯(lián)

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

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

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

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

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

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

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

大家首先來看下面這張圖:

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

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

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

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

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

二、HTML5 錄制視頻：

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

使用 webRTC 錄制視頻基本流程是：

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

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

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

下面是簡單的代碼使用 video 播放直播視頻：

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

簡單講就是把整個流分成一個個小的，基于 HTTP 的文件來下載，每次只下載一些，前面提到了用于 HTML5 播放直播視頻時(shí)引入的一個 .m3u8 的文件，這個文件就是基于 HLS 協(xié)議，存放視頻流元數(shù)據(jù)的文件。

每一個 .m3u8 文件，分別對應(yīng)若干個 ts 文件，這些 ts 文件才是真正存放視頻的數(shù)據(jù)，m3u8 文件只是存放了一些 ts 文件的配置信息和相關(guān)路徑，當(dāng)視頻播放時(shí)，.m3u8 是動態(tài)改變的，video 標(biāo)簽會解析這個文件，并找到對應(yīng)的 ts 文件來播放，所以一般為了加快速度，.m3u8 放在 Web 服務(wù)器上，ts 文件放在 CDN 上。

.m3u8 文件，其實(shí)就是以 UTF-8 編碼的 m3u 文件，這個文件本身不能播放，只是存放了播放信息的文本文件。

打開之后就是這個樣子：

下面這個是 ts 文件，就是存放視頻的文件：

2.HLS 的請求流程：

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

大概是這個流程：

3.HLS 直播延時(shí):

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

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

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

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

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

關(guān)于音視頻采集錄制，首先明確下面幾個概念：

視頻編碼：所謂視頻編碼就是指通過特定的壓縮技術(shù)，將某個視頻格式的文件轉(zhuǎn)換成另一種視頻格式文件的方式，我們使用的 iPhone 錄制的視頻，必須要經(jīng)過編碼，上傳，解碼，才能真正的在用戶端的播放器里播放。
編解碼標(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)行編碼，上傳，解碼，同時(shí)在播放器里播放，當(dāng)然音頻也有許多編碼標(biāo)準(zhǔn)，例如 PCM 編碼，WMA 編碼，AAC 編碼等等，這里我們 HLS 協(xié)議支持的音頻編碼方式是 AAC 編碼。

利用 iOS 上的攝像頭，進(jìn)行音視頻的數(shù)據(jù)采集，主要分為以下幾個步驟：

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

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

1.關(guān)于 RTMP：

Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發(fā)的一套視頻直播協(xié)議，現(xiàn)在屬于 Adobe。和 HLS 一樣都可以應(yīng)用于視頻直播，區(qū)別是 RTMP 基于 flash 無法在 iOS 的瀏覽器里播放，但是實(shí)時(shí)性比 HLS 要好。所以一般使用這種協(xié)議來上傳視頻流，也就是視頻流推送到服務(wù)器。

下面是 HLS 和 RTMP 的對比：

2.推流

所謂推流，就是將我們已經(jīng)編碼好的音視頻數(shù)據(jù)發(fā)往視頻流服務(wù)器中，在 iOS 代碼里面一般常用的是使用 RTMP 推流，可以使用第三方庫 librtmp-iOS 進(jìn)行推流，librtmp 封裝了一些核心的 API 供使用者調(diào)用。例如推流 API 等等，配置服務(wù)器地址，即可將轉(zhuǎn)碼后的視頻流推往服務(wù)器。

那么如何搭建一個推流服務(wù)器呢？

簡單的推流服務(wù)器搭建，由于我們上傳的視頻流都是基于 RTMP 協(xié)議的，所以服務(wù)器也必須要支持 RTMP 才行，大概需要以下幾個步驟：

安裝一臺 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í)長，mysteam 表示一個實(shí)例，即將來要生成的文件名可以先自己隨便設(shè)置一個。

更多配置可以參考：https://github.com/arut/nginx-rtmp-module/wiki/

下面是 nginx 的配置文件

五、直播中的用戶交互：

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

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

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

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

彈幕實(shí)時(shí)性，可以利用 webscoket 來實(shí)時(shí)發(fā)送和接收新的彈幕并渲染出來。
對于不支持 webscoket 的瀏覽器來說，只能降級為長輪詢或者前端定時(shí)器發(fā)送請求來獲取實(shí)時(shí)彈幕。
彈幕渲染時(shí)的動畫和碰撞檢測(即彈幕不重疊)等等

六、總結(jié)

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

基本是下圖這個套路：

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

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

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

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

廣告

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

成都網(wǎng)站建設(shè)公司