什么是流媒體
流媒體就是將視頻文件分成許多小塊兒，將這些小塊兒作為數(shù)據(jù)包通過網(wǎng)絡(luò)發(fā)送出去，實(shí)現(xiàn)一邊傳輸視頻數(shù)據(jù) 包一邊觀看視頻。
什么是流式傳輸
客戶端通過鏈接視頻服務(wù)器實(shí)時(shí)傳輸音、視頻信息，實(shí)現(xiàn)“邊下載邊播放”。
- 順序流式傳輸
即順序下載音、視頻文件，可以實(shí)現(xiàn)邊下載邊播放，不過，用戶只能觀看已下載的視頻內(nèi)容，無法快進(jìn)到未 下載的視頻部分，順序流式傳輸可以使用Http服務(wù)器來實(shí)現(xiàn)，比如Nginx、Apache等。 -
實(shí)時(shí)流式傳輸
實(shí)時(shí)流式傳輸可以解決順序流式傳輸無法快進(jìn)的問題，它與Http流式傳輸不同，它必須使用流媒體服務(wù)器并 且使用流媒體協(xié)議來傳輸視頻，它比Http流式傳輸復(fù)雜。常見的實(shí)時(shí)流式傳輸協(xié)議有RTSP、RTMP、RSVP 等。
業(yè)務(wù)流程
1.將原始的視頻文件通過編碼器轉(zhuǎn)換為適合網(wǎng)絡(luò)傳輸?shù)牧鞲袷剑幋a后的視頻直接輸送給媒體服務(wù)器
2.媒體服務(wù)獲取到編碼好的視頻文件，對(duì)外提供流媒體數(shù)據(jù)傳輸接口，接口協(xié)議包括 ：HTTP、RTSP、 RTMP等
3.播放器通過流媒體協(xié)議與媒體服務(wù)器通信，獲取視頻數(shù)據(jù)，播放視頻
視頻點(diǎn)播方案
- 方案1
播放器通過 http協(xié)議從http服務(wù)器上下載視頻文件進(jìn)行播放
問題: 必須等到視頻下載完才可以播放，不支持快進(jìn)到某個(gè)時(shí)間點(diǎn)進(jìn)行播放 - 方案2
播放器通過rtmp協(xié)議連接媒體服務(wù)器以實(shí)時(shí)流方式播放視頻
問題: 使用rtmp協(xié)議需要架設(shè)媒體服務(wù)器，造價(jià)高，對(duì)于直播多采用此方案 - 方案3
播放器使用HLS協(xié)議連接http服務(wù)器（Nginx、Apache等）實(shí)現(xiàn)近實(shí)時(shí)流方式播放視頻
HLS協(xié)議：基于Http協(xié)議，視頻封裝格式為ts，視頻的編碼格式為H264,音頻編碼格式為MP3、AAC或者AC- 3。
采用HLS方案可以實(shí)現(xiàn)邊下載邊播放，并且不用使用rtmp流媒體協(xié)議，不用構(gòu)建專門的媒體服務(wù)器，節(jié)省成本
所以我們這里選擇方案3
什么是HLS
HLS (HTTP Live Streaming)是Apple的動(dòng)態(tài)碼率自適應(yīng)技術(shù)。主要用于PC和Apple終端的音視頻服務(wù)。包括一個(gè)m3u(8)的索引文件，TS媒體分片文件和key加密串文件。
IOS、Android設(shè)備、及各大瀏覽器都支持HLS協(xié)議。
- HLS的工作方式
將視頻拆分成若干ts格式的小文件，通過m3u8格式的索引文件對(duì)這些ts小文件建立索引。一般 10秒一個(gè)ts文件，播放器連接m3u8文件播放，當(dāng)快進(jìn)時(shí)通過m3u8即可找到對(duì)應(yīng)的索引文件，并去下載對(duì)應(yīng)的ts文 件，從而實(shí)現(xiàn)快進(jìn)、快退以近實(shí)時(shí) 的方式播放視頻。 - HLS視頻編碼
將視頻編碼成HLS格式，最終會(huì)輸出兩類文件，m3u8文件和ts文件 - 視頻播放
1.客戶端先下載m3u8文件
2.根據(jù)m3u8文件列表下載ts文件
3.客戶端播放ts文件
什么是視頻編碼
所謂視頻編碼方式就是指通過壓縮技術(shù)，將原始視頻格式的文件轉(zhuǎn)換成另一種視頻格式文件的方式。
- 文件格式
指.mp4、.avi、.rmvb等 這些不同擴(kuò)展名的視頻文件的文件格式。 - 編碼格式
通過音視頻的壓縮技術(shù)，將視頻格式轉(zhuǎn)換成另一種視頻格式，通過視頻編碼實(shí)現(xiàn)流媒體的傳輸。 比如：一個(gè).avi的視頻文件原來的編碼是a，通過編碼后編碼格式變?yōu)閎，音頻原來為c，通過編碼后變?yōu)閐。 - 常見音視頻編碼格式
MPEG系列 （由ISO[國際標(biāo)準(zhǔn)組織機(jī)構(gòu)]下屬的MPEG[運(yùn)動(dòng)圖象專家組]開發(fā) ）視頻編碼方面主要是Mpeg1（vcd用 的就是它）、Mpeg2（DVD使用）、Mpeg4（的DVDRIP使用的都是它的變種，如：divx，xvid等）、Mpeg4 AVC（正熱門）；音頻編碼方面主要是MPEG Audio Layer 1/2、MPEG Audio Layer 3（大名鼎鼎的mp3）、 MPEG-2 AAC 、MPEG-4 AAC等等。注意：DVD音頻沒有采用Mpeg的。
H.26X系列 （由ITU[國際電傳視訊聯(lián)盟]主導(dǎo)，側(cè)重網(wǎng)絡(luò)傳輸，注意：只是視頻編碼） 包括H.261、H.262、 H.263、H.263+、H.263++、H.264（就是MPEG4 AVC-合作的結(jié)晶）
目前最常用的編碼標(biāo)準(zhǔn)是視頻H.264，音頻AAC。
FFmpeg
FFmpeg是一套可以用來記錄、轉(zhuǎn)換數(shù)字音頻、視頻，并能將其轉(zhuǎn)化為流的開源計(jì)算機(jī)程序。采用LGPL或GPL許可證。它提供了錄制、轉(zhuǎn)換以及流化音視頻的完整解決方案。它包含了非常先進(jìn)的音頻/視頻編解碼庫libavcodec，為了保證高可移植性和編解碼質(zhì)量，libavcodec里很多code都是從頭開發(fā)的。
FFmpeg在Linux平臺(tái)下開發(fā)，但它同樣也可以在其它操作系統(tǒng)環(huán)境中編譯運(yùn)行，包括Windows、Mac OS X等。這個(gè)項(xiàng)目最早由Fabrice Bellard發(fā)起，2004年至2015年間由Michael Niedermayer主要負(fù)責(zé)維護(hù)。許多FFmpeg的開發(fā)人員都來自MPlayer項(xiàng)目，而且當(dāng)前FFmpeg也是放在MPlayer項(xiàng)目組的服務(wù)器上。項(xiàng)目的名稱來自MPEG視頻編碼標(biāo)準(zhǔn)，前面的"FF"代表"Fast Forward"
FFmpeg被許多開源項(xiàng)目采用，QQ影音、暴風(fēng)影音等。
- Linux下安裝ffmpeg
# 1.安裝ffmpeg時(shí)需要提前安裝yasm插件
wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
tar -xvf yasm-1.3.0.tar.gz
cd yasm-1.3.0/
./configure && make && make install
# 2.安裝ffmpeg
wget http://www.ffmpeg.org/releases/ffmpeg-3.4.tar.gz
tar -xvf ffmpeg-3.4.tar.gz
cd ffmpeg-3.4/
./configure && make && make install
# 3.查看版本號(hào)
[root@centos7-app ffmpeg-3.4]# ffmpeg -version
ffmpeg version 3.4 Copyright (c) 2000-2017 the FFmpeg developers
built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-28)
configuration:
libavutil 55. 78.100 / 55. 78.100
libavcodec 57.107.100 / 57.107.100
libavformat 57. 83.100 / 57. 83.100
libavdevice 57. 10.100 / 57. 10.100
libavfilter 6.107.100 / 6.107.100
libswscale 4. 8.100 / 4. 8.100
libswresample 2. 9.100 / 2. 9.100
- windows下環(huán)境搭建
1.下載FFmpeg
FFmpeg下載地址
- 配置環(huán)境變量
把解壓后的軟件路徑E:\soft\ffmpeg-20191029-d3dee67-win64-static\bin加到環(huán)境變量 - 是否安裝成功
C:\Users\Administrator>ffmpeg -version
ffmpeg version git-2019-10-29-d3dee67 Copyright (c) 2000-2019 the FFmpeg developers
built with gcc 9.2.1 (GCC) 20191010
configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libdav1d --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --e
nable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-
libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth --enable-libopenmpt --enable-amf
libavutil 56. 35.101 / 56. 35.101
libavcodec 58. 60.100 / 58. 60.100
libavformat 58. 33.100 / 58. 33.100
libavdevice 58. 9.100 / 58. 9.100
libavfilter 7. 66.100 / 7. 66.100
libswscale 5. 6.100 / 5. 6.100
libswresample 3. 6.100 / 3. 6.100
libpostproc 55. 6.100 / 55. 6.100
- 把a(bǔ)vi格式轉(zhuǎn)為mp4
ffmpeg -i test.avi -c:v libx264 -s 1280x720 -pix_fmt yuv420p -b:a 63k -b:v 753k -r 18 .\test.mp4
-c:v 視頻編碼為x264 ，x264編碼是H264的一種開源編碼格式。
-s 設(shè)置分辨率
-pix_fmt yuv420p：設(shè)置像素采樣方式，主流的采樣方式有三種，YUV4:4:4，YUV4:2:2，YUV4:2:0，它的作用是 根據(jù)采樣方式來從碼流中還原每個(gè)像素點(diǎn)的YUV（亮度信息與色彩信息）值。
-b 設(shè)置碼率，-b:a和-b:v分別表示音頻的碼率和視頻的碼率，-b表示音頻加視頻的總碼率。碼率對(duì)一個(gè)視頻質(zhì)量有 很大的作用，后邊會(huì)介紹。
-r：幀率，表示每秒更新圖像畫面的次數(shù)，通常大于24肉眼就沒有連貫與停頓的感覺了。
# 碼率
碼率又叫比特率即每秒傳輸?shù)腷it數(shù)，單位為bps(Bit Per Second)，碼率越大傳送數(shù)據(jù)的速度越快。
碼率的計(jì)算公式是：文件大小（轉(zhuǎn)成bit）/ 時(shí)長（秒）/1024 = kbps 即每秒傳輸千位數(shù)
例如一個(gè)1M的視頻，它的時(shí)長是10s，它的碼率等于
1*1024*1024*8/10/1024 = 819Kbps
- mp4生成m3u8
# 將test.mp4視頻文件按每10秒生成一個(gè)ts文件，最后生成一個(gè)m3u8文件，m3u8文件就是ts的索引文件
ffmpeg ‐i test.mp4 ‐hls_time 10 ‐hls_list_size 0 ‐hls_segment_filename ./hls/test_%05d.ts ./hls/test.m3u8
-hls_time 設(shè)置每片的長度，單位為秒
-hls_list_size n: 保存的分片的數(shù)量，設(shè)置為0表示保存所有分片
-hls_segment_filename ：段文件的名稱，%05d表示5位數(shù)字
播放器選擇
視頻編碼后要使用播放器對(duì)其進(jìn)行解碼、播放視頻內(nèi)容。在web應(yīng)用中常用的播放器有flash播放器、H5播放器或 瀏覽器插件播放器，其中以flash和H5播放器最常見。
flash播放器：缺點(diǎn)是需要在客戶機(jī)安裝Adobe Flash Player播放器，優(yōu)點(diǎn)是flash播放器已經(jīng)很成熟了，并且瀏覽 器對(duì)flash支持也很好。
H5播放器：基于h5自帶video標(biāo)簽進(jìn)行構(gòu)建，優(yōu)點(diǎn)是大部分瀏覽器支持H5，不用再安裝第三方的flash播放器，并且隨著前端技術(shù)的發(fā)展，h5技術(shù)會(huì)越來越成熟。
這里我們采用H5播放器，使用Video.js開源播放器。
Video.js： https://github.com/videojs/video.js
videojs-contrib-hls： https://github.com/videojs/videojs-contrib-hls#installation （videojs-contrib-hls是播放hls的一個(gè)插件） 使用文檔：http://docs.videojs.com/tutorial-videojs_.html
我們這里使用 video.js 6.7.3 版本，videojs-contrib-hls 5.14.1版本。
搭建媒體服務(wù)器
HLS協(xié)議是基于Http協(xié)議的，我們這里使用Nginx作為視頻服務(wù)器。
- nginx.conf
# nginx.conf
server {
listen 80;
server_name localhost;
#視頻目錄
location /{
root /usr/share/nginx/html; # 項(xiàng)目路徑
index index.html index.htm;
}
}
- 測試代碼
./html/
├── index.html
├── video
│ ├── test_00000.ts
│ ├── test_00001.ts
│ ├── test_00002.ts
│ ├── test_00003.ts
│ ├── test_00004.ts
│ ├── test_00005.ts
│ ├── test_00006.ts
│ ├── test_00007.ts
│ ├── test_00008.ts
│ ├── test_00009.ts
│ ├── test_00010.ts
│ └── test.m3u8
└── videojs
├── video.js
├── videojs-contrib-hls.js
└── video-js.css
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>視頻播放</title>
<link href="./videojs/video-js.css" rel="stylesheet">
</head>
<body>
<video
id=example-video
width=800 height=600
class="video-js vjs-default-skin vjs-big-play-centered"
controls
poster="http://192.168.5.134/video/add.jpg">
<source src="http://192.168.5.134/video/test.m3u8" type="application/x-mpegURL">
</video>
<input type="button" onClick="resetVideo()" value="switch"/>
<script src="./videojs/video.js"></script>
<script src="./videojs/videojs-contrib-hls.js"></script>
<script>
var player = videojs('example-video');
//player.play();
function resetVideo(){
player.src({
src: 'http://192.168.5.134/video/test.m3u8',
type: 'application/x-mpegURL',
withCredentials: true
});
player.play();
}
</script>
</body>
</html>
- 測試
http://192.168.5.134
