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