如何開發(fā)一款 H5 小程序直播？
轉(zhuǎn)自：隱冬
juejin.cn/post/6909479346646286343
大前端這幾年算是一個熱詞，對于前段來說如果不是大前端，技術(shù)相對來說就已經(jīng)算是落后了。如果還停留在對ES6，Vue這些基本技能的學(xué)習(xí)只能說處于一個及格線。
如果想做的卓越必須必備另一些大前端技能，比如說NodeJS，express.js, koaJs服務(wù)類，或者three.js這類3d數(shù)據(jù)圖像，還有二維圖像處理，比如d3,raphael, echart, 最后hls, flv視頻行業(yè)。
如果只會ES6,Vue，React, Webpack這只能算是前端，大前端是至少要掌握上面的一項技能的。這篇文章就是介紹大前端領(lǐng)域中的視頻直播。
本文主要講述的是H5前端部分，視頻音頻采集部分后面會但開篇章來講。首先帶領(lǐng)大家快速實現(xiàn)一個直播系統(tǒng)，然后再講解其中的重要概念，話不多說，直接開擼。
工具安裝
這里首先講述mac系統(tǒng)的操作方法，windows系統(tǒng)安裝方式在下面。需要的工具我已經(jīng)傳到的github上，可以自行下載。git地址：https://github.com/xiaoyindong/h5live)
server是推流工具，tools里面有下面需要安裝的工具。
Mac安裝ffmpeg
1.首先需要安裝YASM，如果沒有安裝yasm的話，會報FFmpeg yasm/nasm not found or too old. Use --disable-yasm for a crippledbuild這個問題，如果沒有安裝sdl的話，安裝完FFmpeg之后，bin目錄下沒有ffplay這個文件。
安裝yasm yasm：http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
//?可以在h5live中找到y(tǒng)asm
cd?/h5live/tools/yasm-1.3.0
//?配置
./configure
//?編譯?&?安裝
?make
?sudo?make?install
安裝sdl ：http://libsdl.org/release/SDL2-2.0.8.tar.gz;
//?切可以在h5live中找到sdl目錄
cd?/h5live/tools/SDL2-2.0.8
//?配置
./configure
//?編譯?&?安裝
make?-j?16
sudo?make?install
安裝ffmpeg ：http://ffmpeg.org/download.html;
//?切可以在h5live中找到ffmpeg，prefix為要安裝到的位置
cd?/h5live/tools/ffmpeg-4.3
//?配置
./configure?--prefix=/usr/local/ffmpeg?--enable-debug=3?--enable-shared?--disable-static
//?編譯?&?安裝
make?-j?4?
sudo?make?install
設(shè)置ffmpeg軟連接, 相當(dāng)于環(huán)境變量，目的是為了在任何目錄都可以使用ffmpeg命令，/usr/local/ffmpeg-4.3/ffmpeg是安裝的路徑
ln?-s?/usr/local/ffmpeg-4.3/ffmpeg?/usr/local/bin/ffmpeg
Windows 系統(tǒng)
FFmpeg程序進(jìn)行各種媒體格式的轉(zhuǎn)換，使得它們可以在不同設(shè)備上播放。該程序只有命令行模式，因此將它安裝到計算機(jī)中看上去有點麻煩，但是只要根據(jù)本指南的方法，你只需要幾分鐘就可以將FFmpeg安裝成功！
下載 ffmpeg:
訪問下載頁面時，你將看到很多不同下載選項。你可以根據(jù)自己的操作系統(tǒng)選擇下載最新的32位或64位靜態(tài)程序版本。
安裝:
點擊開始菜單，然后點擊計算機(jī)。選擇安裝Windows系統(tǒng)的磁盤（一般是C:）。在C:盤的根目錄下（該目錄下有名為Windows和Program Files文件夾），右擊并在彈出菜單中選擇新建文件夾。將新文件夾命名為“ffmpeg”。將下載的ffmpeg壓縮包解壓到這個文件夾中。
在環(huán)境變量中加入ffmpeg的啟動命令，c:\ffmpeg\bin, 俗稱配置環(huán)境變量。
打開命令提示符窗口，輸入命令“ffmpeg –version”。如果命令提示窗口返回FFmpeg的版本信息，那么就說明安裝成功了，你可以在命令提示行中任意文件夾下運行FFmpeg。
如果你收到“l(fā)ibstdc++ -6 is missing”的錯誤消息，那么你可能需要安裝Microsoft Visual C++ Redistributable Package，該軟件包可以在微軟網(wǎng)站免費獲取。
2.啟動server
很簡單，進(jìn)入從github中獲取到的h5live中server所在的目錄，運行server程序即可。
cd?/h5live/server
open?server
可以看到這里提供了三種協(xié)議的路徑，分別是rtmp協(xié)議的1935接口，http-flv協(xié)議的7001端口和hls的7002端口。
3.執(zhí)行推流
找一個mp4格式的視頻文件，假設(shè)這個文件叫1.mp4，可以在1.map所在的文件夾下執(zhí)行下面的命令。
ffmpeg -re -i 1.mp4 -c copy -f flv rtmp://127.0.0.1:1935/live/movie
出現(xiàn)下圖的效果就表示1.MP4這個視頻開始進(jìn)行流推送了。
4.視頻驗證
上面我們已經(jīng)說了server工具提供三種協(xié)議的視頻流，分別是rtmp，http-flv以及hls。
可以使用VLC播放器驗證rtmp協(xié)議的視頻流。
在里面粘貼入rtmp://127.0.0.1:1935/live/movie
然后就可以看到直播的效果了。
下載 VLC 播放器:
Mac 系統(tǒng)
Mac OS X：https://www.videolan.org/vlc/index.zh.html
Windows 系統(tǒng)
Windows：https://www.videolan.org/vlc/index.zh.html
hls協(xié)議的流媒體可以使用Safari瀏覽器直接打開觀看。我們可以直接把http://127.0.0.1:7002/live/movie.m3u8放到Safari瀏覽器的地址欄中查看效果。
至此我們的推流就做完了，在H5的直播開發(fā)中，這些工作都是服務(wù)器，我們之所以演示這些是為了在實際的開發(fā)中我們可以懂得直播的過程，可以快速的給出直播的解決方案。最主要的在服務(wù)還沒有開發(fā)完成之前我們可以通過這樣的方式快速搭建一個推流系統(tǒng)，前端先開發(fā)起來。
// RTMP，可以使用VLC播放器
rtmp://127.0.0.1:1935/live/movie
// FLV
http://127.0.0.1:7001/live/movie.flv
// HLS 可以使用Safari瀏覽器訪問
http://127.0.0.1:7002/live/movie.m3u8
H5端播放器
這里才是前端真正需要關(guān)心的部分，主要介紹我們?nèi)绾斡胘s去寫一個直播的播放器，選擇一些已有的最佳實踐是最穩(wěn)妥的，這樣可以快速的滿足業(yè)務(wù)需求，這里我們會介紹三款播放器，以及他們的使用。同樣這些代碼我也傳到了github上。
video.js：https://github.com/videojs/video.js 是國外比較流行的視頻框架，他的特長是做了非常好的自定義ui，符合線上成品的場景，除了自定義ui，還提供了很多插件，比如彈幕，快捷鍵，hls支持等等。他是一個比較完整的js框架，點播、直播都很合適，缺點是文件較大。
hls.js適合做hls協(xié)議的一款小巧的框架，同樣也是點播直播都可以。缺點是需要自己書寫UI樣式。video.js可以支持hls也是因為插件是基于hls.js
flv.js是B站開源的flv格式的播放器，如果是http-flv協(xié)議的直播用它是非常合適的。
至于rtmp在H5的直播中是不常用的，所以這里就不講了。
使用videojs開發(fā)
在github找到videojshttps://github.com/videojs/video.js, 可以在這個網(wǎng)址中找到下面的兩個文件，下載下來放在我們本地。
在Video.js的插件文檔中存在大量的插件，我們可以從中找到自己需要的。https://videojs.com/plugins/
videojs-contrib-hls是一個支持hls直播的video插件。我們找到cdn, 將js保存到本地。使用方式很簡單，只需要把插件的js引入進(jìn)來就可以了。
將video.min.js和videojs-contrib-hls.js以及video-js.min.css引入到頁面中，source標(biāo)簽的地址寫上我們hls的m3u8后綴地址。就可以了。
注意這里需要在服務(wù)器環(huán)境查看。
html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Documenttitle>
????<link?rel="stylesheet"?href="video-js.min.css">
head>
<body>
????<video?id=example-video?width=600?height=300?class="video-js?vjs-default-skin"?controls>
????????<source
???????????src="http://127.0.0.1:7002/live/movie.m3u8"
???????????type="application/x-mpegURL">
??????video>
????<script?src="video.min.js">script>
????<script?src="videojs-contrib-hls.js">script>
????<script>
????????var?player?=?videojs('example-video');
????????player.play();
????script>
body>
html>
可以看到videojs幫我們處理好了ui問題。是一款可以快速使用礦建。
使用hls.js開發(fā)直播頁面
需要下載對應(yīng)hls代碼，可以去github中尋找，https://github.com/video-dev/hls.js。
使用方式也很簡單，因為hls.js并沒有為我們提供UI樣式，所以我們只需要引入js即可。
html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Documenttitle>
head>
<body>
????<video?id="video"?controls?width="400"?height="300">video>
????<script?src="hls.js">script>
????<script>
????????var?video?=?document.getElementById('video');
????????var?videoSrc?=?'http://127.0.0.1:7002/live/movie.m3u8';
????????if?(Hls.isSupported())?{
????????????var?hls?=?new?Hls();
????????????hls.loadSource(videoSrc);
????????????hls.attachMedia(video);
????????}?else?if?(video.canPlayType('application/vnd.apple.mpegurl'))?{
????????????video.src?=?videoSrc;
????????}
????script>
body>
html>
HTTP-FLV
flv.js是B站開源的一款flv播放器，可以說是國人的驕傲，同樣使用起來非常簡單。也是引入flv.js。
html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Documenttitle>
head>
<body>
????<script?src="flv.js">script>
????<video?id="videoElement"?controls?width="400"?height="300">video>
????<script>
????????if?(flvjs.isSupported())?{
????????????var?videoElement?=?document.getElementById('videoElement');
????????????var?flvPlayer?=?flvjs.createPlayer({
????????????????type:?'flv',
????????????????url:?'http://127.0.0.1:7001/live/movie.flv'
????????????});
????????????flvPlayer.attachMediaElement(videoElement);
????????????flvPlayer.load();
????????????flvPlayer.play();
????????}
????script>
body>
html>
微信小程序直播
這里講述的是小程序的直播，默認(rèn)我這里認(rèn)為大家是有小程序開發(fā)經(jīng)驗的，所以如何創(chuàng)建小程序，安裝開發(fā)者工具，調(diào)試等內(nèi)容就不說了。
微信小程序直播使用的是媒體組件的live-player，并且他僅支持flv或者rtmp格式，這一點在前后端確認(rèn)技術(shù)方案時尤為重要。還有就是他只針對對應(yīng)行業(yè)開放。可以查看這里連接https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
符合上述類目的小程序開放，需要先通過類目審核，再在小程序管理后臺，「開發(fā)」-「接口設(shè)置」中自助開通該組件權(quán)限。
打開這個權(quán)限之后，我們就可以使用小程序的live-player組件進(jìn)行直播開發(fā)了。他的使用也非常簡單。
<live-player?src="https://domain/pull_stream"?mode="RTC"?autoplay?bindstatechange="statechange"?binderror="error"?style="width:?300px;?height:?225px;"?/>
Page({
??statechange(e)?{
????console.log('live-player?code:',?e.detail.code)
??},
??error(e)?{
????console.error('live-player?error:',?e.detail.errMsg)
??}
})
這里需要注意的是，開發(fā)者工具不能進(jìn)行直播調(diào)試，只能使用遠(yuǎn)程調(diào)試。連接我們的手機(jī)查看效果。live-player 默認(rèn)寬度300px、高度225px，可通過wxss設(shè)置寬高。
至此H5和小程序的直播開發(fā)我們就說完了，以上內(nèi)容已經(jīng)足夠大家完成工作中的直播開發(fā)任務(wù)和可能出現(xiàn)的直播業(yè)務(wù)了。
接著我們會介紹一下直播的流程、協(xié)議以及基于nginx搭建一個直播服務(wù)。后面的內(nèi)容偏理論和服務(wù)。和前端關(guān)系不大可以跳過。
直播的流程
對于一個直播流程來說首先是視頻音頻等媒體的采集，一般采集方有三種，PC端，安卓端以及IOS端，他們的工作也都是依賴攝像頭和麥克風(fēng)的。一般直播的人會選擇購買專業(yè)的攝像頭和麥克風(fēng)。這里收集到的數(shù)據(jù)是流的格式，也就是二進(jìn)制的數(shù)據(jù)，這里的數(shù)據(jù)會經(jīng)過socket或者h(yuǎn)ttp上傳至服務(wù)器。
信息源采集之后第一個步驟是進(jìn)行編碼，因為采集到的原始流是不能直接被客戶端進(jìn)行播放的，必須采用一定的協(xié)議去做編碼，一般視頻編碼采用H.264，音頻編碼一般是AAC。這兩種是直播行業(yè)最常見的編碼格式。
編碼之后一般可能會伴隨著字幕的疊加，當(dāng)然這個是不必須的是一個可有可無的過程。這里要說的其實是對視頻的一些處理，可能添加水印之類的二次加工。
視頻和音頻處理之后就要進(jìn)行推流，也就是把視頻和音頻推送到服務(wù)器中，也就是我們上面使用ffmpeg將1.mp4推送的過程。
工作中服務(wù)器會將推送過來的流媒體經(jīng)過部署再把資源推到CDN上，一般我們靜態(tài)的資源或者多媒體資源都會發(fā)布到CDN來保證用戶體驗和拉取的速度。
對于客戶端來說是直接訪問CDN的地址的，同樣這里的客戶端可能是PC, 安卓或者IOS的播放器。
以上就是一個簡單的直播處理過程。
視頻的格式
一般我們常見的視頻格式是mp4，他的兼容性非常好，谷歌，火狐，蘋果，IE等瀏覽器都是支持的。webm是一種流式的視頻格式，常見于youtube網(wǎng)站，但是這種格式只有谷歌和火狐瀏覽器支持。
hls嚴(yán)格來說他不是視頻格式，他是一種視頻協(xié)議，他的視頻格式是ts，為了好分辨一般我們叫他hls，這種格式是蘋果自身研究出來的，所以Safari瀏覽器可直接支持，上面我們演示的時候hls是直接放在Safari瀏覽器的地址欄可以直接播放的。
flv是早期flash的一種視頻格式，B站早起就采用的這種格式，即使現(xiàn)在B站也是支持H5播放器和flash播放器的。
直播協(xié)議
直播目前最常用的三種協(xié)議是HLS協(xié)議，RTMP協(xié)議和HTTP-FLV協(xié)議。HLS對應(yīng)的是hls格式的視頻也就是.ts。RTMP和HTTP-FLV都是對應(yīng)的flv格式的視頻。
HLS協(xié)議是最簡單的也是最常用的，他是蘋果推出的一個直播協(xié)議，他的工作原理比較簡單，H5一般通過video標(biāo)簽，從客戶端獲取一個M3U8索引文件，這個M3U8會直接放在video的src路徑中。
因為M3U8是一個索引文件，他會被解析成很多的.ts片段，每一個片段就是一個直播流的分段。
瀏覽器的video標(biāo)簽在某個時間會再次請求m3u8，獲取新的直播流片段，這樣就實現(xiàn)了直播的實時播放，而發(fā)送這個m3u8的請求是瀏覽器自主的行為。
<body>
????<video?id=example-video?width=600?height=300?class="video-js?vjs-default-skin"?controls>
????????<source
???????????src="http://127.0.0.1:7002/live/movie.m3u8"
???????????type="application/x-mpegURL">
??????video>
????<script?src="video.min.js">script>
????<script?src="videojs-contrib-hls.js">script>
????<script>
????????var?player?=?videojs('example-video');
????????player.play();
????script>
body>
這是一個比較標(biāo)準(zhǔn)的直播協(xié)議，但是m3u8不一定包含了ts文件，也有可能嵌套了一層m3u8文件，也就是說第一個拿到的m3u8文件里面還是m3u8文件。
如果當(dāng)前的m3u8里面包含了m3u8文件，那么當(dāng)前這個文件就叫master playlist。
如果當(dāng)前的m3u8文件里面包含的是ts, 那他就叫media playlists。
這種情況不常見，但是確實是存在的，我們需要額外注意一下。如果我們在實踐直播的時候拿到的流文件不播放，可能是播放器不支持這種嵌套。
m3u8分為動態(tài)列表，靜態(tài)列表，全量列表。在直播行業(yè)基本是見不到靜態(tài)列表的，他只是存在標(biāo)準(zhǔn)中。
動態(tài)列表主要用于直播的過程中，全量列表多用于點播，也就是錄播。m3u8的響應(yīng)結(jié)果就是一個文本文件。
第一行標(biāo)明了m3u8的版本，這個比較重要，因為他直接涉及到我們的播放器支持的hls的版本，如果版本不支持，后面的一些指令可能就無法解析。
第二行是版本的聲明，默認(rèn)是3，第三行是默認(rèn)視頻的時長，第四行是視頻流塊的個數(shù)，每次請求都會加1，再往下就是視頻的ts文件，前面的9.901是這個ts文件的時長。這里決定了瀏覽器的video更新m3u8文件的時機(jī)。
靜態(tài)列表和動態(tài)列表返回文件差不多，只是在第五行多添加了一個playlist-type值為event。其他的就沒什么區(qū)別了。
全量列表比動態(tài)列表多了兩個東西，第一個是playlist-type值為vod，還有底部的ext-x-endlist代表結(jié)束，瀏覽器識別到這個字段就不會再發(fā)送請求了。
對于第一個ts文件，他會有一個PAT的包，這個PAT的包告訴我們要去找一個PMT的包，PMT會告訴我們所有的TS里面哪些是視頻TS哪些是音頻TS。很多TS組成一個叫做PES的東西。
瀏覽器像去解析一個視頻，首先要知道視頻幀和音頻幀，在第一個ts文件中會告訴瀏覽器，通過先找PAT, 再找PMT，再找TS文件，然后TS文件再按照視頻和音頻分類把相連的ts組成一個幀。
RTMP協(xié)議
RTMP是Real Time Messaging Protocol(實時消息傳輸協(xié)議)的首字母縮寫。該協(xié)議基于TCP, 是一個協(xié)議族，包括RTMP基本協(xié)議及RTMPT/RTMPS/RTMPE等多種變種。RTMP是一種設(shè)計用來進(jìn)行實時數(shù)據(jù)通信的網(wǎng)絡(luò)協(xié)議，主要用來在Flash,AIR平臺和支持RTMP協(xié)議的流媒體/交互服務(wù)器之間進(jìn)行音視頻和數(shù)據(jù)通信。
傳統(tǒng)的軟件和服務(wù)器之間的交互還是以RTMP為主，比如說上文講的視頻音頻的采集以PC端為主，如果客戶端通過軟件的方式采集基本就是基于RTMP，如果采集端用的是H5他的協(xié)議一般是webrtc。這是兩種不同的技術(shù)方案。采集時RTMP傳輸過程中視頻也是flv格式的。這里需要注意一下。
HTTP-FLV協(xié)議
RTMP要比HLS協(xié)議用起來復(fù)雜一些因為他是基于TCP協(xié)議的。HLS使用非常簡單但他的實時性會差一些，也就說他有延時，切片越多延時越大。HTTP-FLV結(jié)合了HLS的優(yōu)點也就是http請求然后又集合了RTMP低延時的特性。
HTTP-FLV和RTMP都是長連接，傳輸?shù)母袷揭捕际莊lv，不同點在于他們和CDN的鏈接還有播放器的鏈接上，RTMP是TCP而HTTP-FLV是HTTP。
HTTP-FLV相對于RTMP優(yōu)勢有很多，比如可以在一定程度上避免防火墻的干擾，可以很好地兼容HTTP302跳轉(zhuǎn)，做到靈活調(diào)度，可以使用HTTPS做加密通道，可以很好的支持移動端(安卓和IOS)。
#### Video標(biāo)簽介紹
這里我們補充一點video標(biāo)簽的知識，針對于大多數(shù)的前端開發(fā)來說，并沒有真正意義上的了解video標(biāo)簽，他的屬性，他的事件。很多人都停留在知道他是視頻標(biāo)簽，可以播放，暫停，調(diào)節(jié)音量，有個src屬性中。
這是很危險的，Video標(biāo)簽是H5推出的一款功能十分強(qiáng)大的多媒體標(biāo)簽，可以說他是網(wǎng)頁中媒體的未來。
標(biāo)簽屬性部分:
<video?
????src="test.map"?
????width="400"?
????height="225"?
????controls
????controlslist="nodownload?nofullscreen"?
????poster="預(yù)覽圖"?
????autoplay
????muted
????loop
????preload
?>video>
controls:底部控制條 controlslist:底部控制條定制 poster:預(yù)覽圖 autoplay: 自動播放 muted: 靜音(移動端非靜音的視頻是不允許自動播放的，想要自動播放一定要靜音) loop: 循環(huán)播放 preload: 預(yù)加載，每個瀏覽器表現(xiàn)不一致，尤其是移動端，如果需要最好加上。
JS控制部分:
volume: 音量(0 - 1) currentTime: 設(shè)置獲取當(dāng)前播放時間，單位是秒，超清和高清分別是不同的地址，檔切換地址時需要定位時間。src: 獲取視頻地址
video.volume?=?0.5;
video.currentTime?=?60;
video.src;
可以通過source標(biāo)簽兼容視頻地址出錯, 這種情況js需要使用currentSrc獲取當(dāng)前地址。
<video>
????<source?src="./test.map"?type="video/mp4">source>
????<source?src="./test2.map"?type="video/mp4">source>
video>
video事件:
loadstart: 視頻開始加載。durationchange: 時長變化，表示可以獲取視頻時長了。loadedmetadata: 當(dāng)指定的音頻/視頻的元數(shù)據(jù)已加載時，會發(fā)生 loadedmetadata 事件 loadeddata: 當(dāng)前幀的數(shù)據(jù)已加載，但沒有足夠的數(shù)據(jù)來播放指定音頻/視頻的下一幀時，會發(fā)生 loadeddata 事件 progress: 當(dāng)瀏覽器正在下載指定的音頻/視頻時，會發(fā)生 progress 事件 canplay: 當(dāng)瀏覽器能夠開始播放指定的音頻/視頻時，會發(fā)生 canplay 事件 canplaythrough: 當(dāng)瀏覽器預(yù)計能夠在不停下來進(jìn)行緩沖的情況下持續(xù)播放指定的音頻/視頻時，會發(fā)生 canplaythrough 事件 play: 暫停狀態(tài)改變到播放狀態(tài)就會觸發(fā)play事件 seeking: 切換進(jìn)度條的時候會觸發(fā)的事件。seeked: seeking之后下載完數(shù)據(jù)就會執(zhí)行。waiting: 播放狀態(tài)時，seeking之后會觸發(fā)waiting。也就是播放狀態(tài)如果沒有足夠數(shù)據(jù)支撐播放就會waiting。playing: 播放中狀態(tài)。timeupdate: 播放時間更新的事件。ended: 播放結(jié)束 error: 報錯事件。
手動搭建一個直播服務(wù)器
前面我們利用已經(jīng)集成好的server工具創(chuàng)建了一個直播的服務(wù)器，這里我們使用nginx手動搭建一個類似的服務(wù)器，再來理解一下他的工作過程。
首先需要安裝nginx和ffmpeg工具。ffmpeg工具上面已經(jīng)有了安裝過程，nginx的安裝可以參考我之前的文章 前端應(yīng)該了解的nginx：https://juejin.cn/post/6907216928310296590
工具安裝完成之后我們開始配置nginx。在在nginx.conf文件中配置，我們需要配置服務(wù)RTMP模塊，在配置文件的最底部新開一個代碼塊叫rtmp，里面寫上監(jiān)聽1935端口，視頻切片大小設(shè)置4000，也可以自行設(shè)置，然后配置一個rtmp的直播應(yīng)用rtmplive，在配置一個hls的直播應(yīng)用。
rtmp?{
????server?{
????????#?監(jiān)聽端口
????????listen?1935;
????????#?切片大小
????????chunk_size?4000;
????????#?RTMP?直播流配置
????????application?rtmplive?{
????????????#?開啟直播
????????????live?on;
????????????#?最大連接數(shù)
????????????max_connections?1024;
????????}
????????#?hls直播流配置
????????application?hls?{
????????????live?on;
????????????hls?on;
????????????#?分割文件存儲的位置
????????????hls_path?/usr/local/var/www/hls;
????????????#?hls分片大小
????????????hls_fragment?5s;
????????}
????}
}
配置好這個之后需要在http模塊中配置訪問位置。我們可以在server塊中增加location。
server?{
????listen?8080;
????...
????locaton?/hls?{
????????#?聲明相應(yīng)類型,?也就是響應(yīng)頭
????????types?{
????????????application/vnd.apple.mpegurl?m3u8;
????????????video/mp2t?ts;
????????}
????????#?目錄指向我們rtmp塊中切片的目錄
????????root?/usr/local/var/www;
????????#?禁止緩存
????????add_header?Cache-Control?no-cache;
????}
}
至此我們nginx就配置完畢了，可以重啟nginx進(jìn)行測試。
nginx?-s?reload
同樣的，我們可以找到前面的那個1.mp4使用ffmpeg來推流。這里視頻采用libx264編碼，音頻采用aac編碼，做成flv推送到rtmp://localhost:1935/rtmplive/rtmp域名，這個1935就是我們設(shè)置rtmp的端口，rtmplive就是應(yīng)用名稱。
ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/rtmp
-i: 輸入 -vcodec: 視頻編碼 acodec: 音頻編碼 這個時候就開始切割我們的視頻了，這個過程也就像是攝像頭實時獲取視頻的過程。
這是一個rtmp協(xié)議的直播流，我們可以使用vlc來播放，只要在file/open networks中輸入rtmp://localhost:1935/rtmplive/rtmp就可以播放了。
下面我們再來演示一下HLS的源文件制作，這里的ffmpeg命令基本相同，只是我們的路徑需要變一下。上面nginx配置了rtmplive和hls兩個。hls推流需要使用rtmp://localhost:1935/hls/stream, 這里的stream可以隨意起，不過這個名字關(guān)系都后面訪問的地址。
ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/stream
這里的hls是http協(xié)議，我們之前在nginx的http協(xié)議中也增加了一個hls訪問路徑。http的地址我們可以使用Safari瀏覽器訪問。也可以使用我們上面自己開發(fā)的播放器訪問。
http://localhost:8080/hls/stream.m3u8
http-flv的編譯比較復(fù)雜，我們這里就不過多介紹了。至此H5和小程序的直播我們就介紹完了。
- EOF -
點個『在看』支持下?