媒體介紹和須要下載須要軟件html
1、FFmpeg是一套能夠用來記錄、轉換數字音頻、視頻,並能將其轉化爲流的開源計算機程序。在這裏我只用到了它的視屏格式轉換功能,將rtsp協議的視頻流轉成rtmphtml5
2、nginx,我這裏用的是nginx-1.7.11.3-Gryphonlinux
因爲nginx原生是爲linux服務的,所以官方並無編譯好的windows版本能夠下載,nginx
要在windows上使用nginx,要麼下載源碼進行編譯,要麼使用其餘人已經編譯好的文件。git
而要讓nginx支持視頻直播和點播,還須要第三方的nginx模塊:nginx-rtmp-modulegithub
所幸,已經有大神作好了nginx的編譯,並且集成了不少nginx模塊,其中就已經包括了nginx-rtmp-module。web
3、nginx-rmtp-module是Nginx服務器的流媒體插件:chrome
Nginx自己是一個很是出色的HTTP服務器,ffmpeg是很是好的音視頻解決方案.這兩個東西經過一個nginx的模塊nginx-rtmp-module,組合在一塊兒便可以搭建一個功能相對比較完善的流媒體服務器.這個流媒體服務器能夠支持RTMP和HLS(Live Http Stream)。windows
nginx配合ffmpeg作流媒體服務器的原理是:後端
nginx經過rtmp模塊提供rtmp服務, ffmpeg推送一個rtmp流到nginx, 而後客戶端經過訪問nginx來收看實時視頻流。(這裏我是用jwplayer來訪問這個rtmp地址)
4、軟件下載地址:
下載地址:http://nginx-win.ecsds.eu/,
詳細說明可參見:Readme nginx-win version.txt(http://nginx-win.ecsds.eu/download/Readme%20nginx-win%20version.txt)
我下載的是nginx 1.7.11.3 Gryphon(http://nginx-win.ecsds.eu/download/nginx%201.7.11.3%20Gryphon.zip)這個版本。
另外還要下載 stat.xsl(https://github.com/arut/nginx-rtmp-module/blob/master/stat.xsl)
用於顯示當前ngix-rtmp服務狀態
另外還須要下載ffmpeg、ffplay、yamdi:
總結以下:
1. nginx 1.7.11.3 Gryphon(http://nginx-win.ecsds.eu/download/nginx 1.7.11.3 Gryphon.zip)
2. stat.xsl(https://github.com/arut/nginx-rtmp-module/blob/master/stat.xsl)
3. ffmpeg、ffplay(http://ffmpeg.zeranoe.com/builds/win32/static/ffmpeg-20150619-git-bb3703a-win32-static.7z)
4. yamdi(http://sourceforge.net/projects/yamdi/files/latest/download?source=files)安裝的時候一閃而過就能夠了
2、ffmpeg配置
將ffmpeg(包括了ffplay)下載下來後,解壓到本身的盤,如圖:
而後配置環境變量:如圖
檢查ffmpeg是否已經裝好;打開cmd命令符,輸入ffmpeg -v
3、Nginx、nginx-rtmp-module 安裝
將nginx鏡像解壓到本身的盤,而後將nginx的插件nginx-rtmp-module也下載下來解壓到
nginx目錄裏面;如
4、配置nginx的文件,打開conf下的nginx -win.conf改爲nginx.conf後配置nginx.conf文件( nginx-rtmp-module 指令詳解能夠查看個人 nginx-rtmp-module 指令詳解)指令詳解如圖:
user www www;
worker_processes 1;
error_log logs/error.log debug;
#pid logs/nginx.pid;
events {
worker_connections 65535;
}
rtmp {
server {
listen 1935;
application live {
live on;
record off;
}
application live2 {
live on;
record off;
}
application hls { #這一塊的註釋
,否則的話.m3u8流是沒辦法播放的
live on;
hls on;
hls_path nginx-rtmp-module/hls; #設置 HLS 播放列表和分段目錄。這一目錄必須在 NGINX 啓動前就已存在。
hls_cleanup off;
recorder rec {#建立錄製塊。能夠在單個 application 中建立多個記錄。上文提到的全部錄製相關的指令均可以在 recorder{} 塊中進行定義。繼承高層次中的全部設置。
record all manual; #切換錄製模式。流能夠被記錄到 flv 文件。本指令指定應該被記錄的: all - 音頻和視頻(全部),manual - 用不自動啓動錄製,使用控制接口來啓動/中止
record_suffix _rec.flv; #描述:設置錄製文件後綴名。默認爲 '.flv'。
record_path nginx-rtmp-module/hls;
record_notify on;
}
}
application vod {
play nginx-rtmp-module/hls;
}
}
}
http {#在 http{} 段爲客戶端播放 HLS 設置在如下位置設置:
include mime.types;
default_type application/octet-stream;
server {
listen 18080;
server_name localhost;
location /stat { #服務器狀態
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;#添加 XML 樣式表引用到 statistics XML 使其能夠在瀏覽器中可視。更多信息請參考 rtmp_stat 描述和例子。
}
location /stat.xsl {
root nginx-rtmp-module/;#stat.xsl所在的目錄
}
location /control { #控制器 爲當前 HTTP location 設置 RTMP 控制程序。
rtmp_control all;
}
location /hls { #hls直播地址
#server hls fragments
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias nginx-rtmp-module/hls;#直播的資源地址
expires -1;
}
location /vod{ #hls點播地址
alias nginx-rtmp-module/hls;#點播的資源地址
}
location / {
root nginx-rtmp-module/test/www;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root nginx-rtmp-module/test/www;
}
}
}
5、運行cmd命令,啓動nginx.exe服務
d:
cd video\nginx-1.58
(start nginx.exe:啓動nginx服務,而後看進程中是否有nginx.exe)
4.打開網頁輸入:localhost或者127.0.0.1本機ip
(顯示一下界面說明啓動成功)
6、相關軟件的配置及應用Nginx服務啓動以後就能夠執行ffmpeg命令進行rtsp協議轉成rtmp:
運行cmd:執行ffmpeg命令語句
ffmpeg:其實就是ffmpeg.exe,運行語句的時候.exe可不要
-i:後面是我所須要的攝像頭協議
-f flv:後面是我要轉到nginx的rtmp服務器上
-s:視頻解析度:(分配率)也就是能調視屏的清晰度,若是在本機上測試建議640*480就好,改變視屏流的解析式cpu會消耗很大
(rtmp服務地址:rtmp://localhost:1935/hls/mystream )
localhost:nginx啓動的機器ip
1935:端口號(以前在nginx.conf裏配置的)
hls:是application 後面的名稱
mystream :能夠隨便起,記獲得時候訪問rtmp時要一致
1、啓動nginx
進入到nginx.exe的文件中:cd D:\qtone\ffmpeg\nginx-1.7.11.3-Gryphon
啓動流媒體:start nginx.exe
2. 推送rtmp流到nginx-rtmp
start ffmpeg -re -i rtmp://live.hkstv.hk.lxdns.com/live/hks -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -acodec copy -f flv rtmp://localhost:1935/hls/mystream -loglevel quiet
會生成文件資源
已經在接收流
3. rtmp直播
ffplay "rtmp://127.0.0.1:1935/hls/mystream"
4. hls 直播,效果跟3上面同樣
ffplay "http://127.0.0.1:18080/hls/mystream.m3u8"
我將直播直接嵌入
在地址欄直接播放 http://127.0.0.1:18080/index.html
5. 開始錄製
http://127.0.0.1:18080/control/record/start?app=hls&name=mystream&rec=rec
6. 中止錄製
http://127.0.0.1:18080/control/record/stop?app=hls&name=mystream&rec=rec
7. 爲rtmp點播文件添加索引,不然文件在播放時進度條不能拖動,假定剛纔錄製的文件名爲mystream-1428384476_rec.flv
yamdi\yamdi -i nginx_1.7.11.3_Gryphon\nginx-rtmp-module\tmp\rec\mystream-1428384476_rec.flv -o nginx_1.7.11.3_Gryphon\nginx-rtmp-module\tmp\rec\mystream-1428384476_rec_idx.flv
8. rtmp點播
ffmpeg\ffplay "rtmp://127.0.0.1:1935/vod2/mystream-1428384476_rec_idx.flv"
9. 製做hls點播分片文件
ffmpeg -i D:\qtone\ffmpeg\nginx-1.7.11.3-Gryphon\nginx-rtmp-module\hls\mystream_rec.flv -vcodec libx264 -vprofile baseline -bf 0 -bufsize 850k -bsf:v dump_extra -map 0 -f segment -segment_format mpegts -segment_list "D:\qtone\ffmpeg\nginx-1.7.11.3-Gryphon\nginx-rtmp-module\hls\mystream_rec\mystream_rec.m3u8" -segment_time 10 D:\qtone\ffmpeg\nginx-1.7.11.3-Gryphon\nginx-rtmp-module\hls\mystream_rec\mystream_rec-%d.ts
生成一系列的切片文件
10. hls 點播
ffplay "http://127.0.0.1:8080/vod/mystream-1428384476_rec/mystream-1428384476_rec.m3u8"
思南拉監控流
ffmpeg -re -i rtsp://admin:xy123456@172.16.7.57:554/Streaming/channels/101 -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -acodec copy -f flv rtmp://localhost:1936/hls/mystream
播放視頻
ffplay "rtmp://127.0.0.1:1936/hls/mystream"
//rmp截一張545*363封面
ffmpeg -i "rtmp://live.hkstv.hk.lxdns.com/live/hks live=1" -f image2 -ss 0 -vframes 1 -s 545*363 c:/a.jpg
Linux下編譯FFmpeg之下載源文件並編譯 http://www.linuxidc.com/Linux/2012-02/54565.htm
Linux 編譯升級 FFmpeg 步驟 http://www.linuxidc.com/Linux/2013-08/88190.htm
在Ubuntu下安裝FFmpeg http://www.linuxidc.com/Linux/2012-12/75408.htm
Linux 下編譯FFmpeg 支持x264, x265 http://www.linuxidc.com/Linux/2016-04/129858.htm
VS2013編譯FFmpeg http://www.linuxidc.com/Linux/2016-08/134102.htm
在 Mac OS X 環境中從源代碼編譯安裝 FFmpeg http://www.linuxidc.com/Linux/2015-12/126093.htm
Ubuntu 12.04下編譯ffmpeg http://www.linuxidc.com/Linux/2013-02/78857.htm
Ubuntu 14.04下PPA安裝FFmpeg 2.2.2 http://www.linuxidc.com/Linux/2014-05/101322.htm
FFmpeg 的詳細介紹:http://www.linuxidc.com/Linux/2012-04/58229.htm
FFmpeg 的下載地址:http://www.linuxidc.com/down.aspx?id=565
使用html5中的video加載流m3u8後綴文件
前言
最近項目須要流媒體的播放,後端一共提供了三種流數據(RTSP,RTMP,HLS),在不一樣的場景可能會使用到不一樣方式播放,就須要作到適配,支持全部的流數據播放。花了一段時間研究,在這裏和你們分享一下,還有些遺留問題,看你們有沒有好的方法。
RTSP
簡介
這種協議流數據前段播放,沒有特別好的解決方法,須要在本機裝一個vlc 插件,依靠這個插件才能讓 RTSP 協議在網頁上能播放,可是目前高版本的 Chrome 瀏覽器不支持 NPAPI 插件,也就是說高版本的 Chrome 瀏覽器仍是不能播放(46 以上的版本都不行)。
html code
<object type='application/x-vlc-plugin'id='vlc'width="200"height="500"events='True'pluginspage="http://www.videolan.org"codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz"> <param name='mrl'value='rtsp://***********************/Streaming/Channels/1' /> <param name='volume'value='50' /> <param name='autoplay'value='true' /> <param name='loop'value='false' /> <param value="transparent"name="wmode"> <embed id='vlc'wmode="transparent"type="application/x-vlc-plugin"width="200"height="500"pluginspage="http://www.videolan.org"allownetworking="internal"allowscriptaccess="always"quality="high"src="rtsp://***********************/Streaming/Channels/1"> </object>
代碼很簡單,更播放 flash 差異不是很大,須要改幾個點,
1.object 標籤的 type , codebase 屬性
2.param 標籤 <param name='mrl' value='rtsp://***********************/Streaming/Channels/1' />
js code
//獲取 VLC js 隊形function getVLC(name) { if (window.document[name]) { return window.document[name]; } if (navigator.appName.indexOf("Microsoft Internet") == -1) { if (document.embeds && document.embeds[name]) return document.embeds[name]; } else { return document.getElementById(name); } } // 根據地址切換視頻 function doGo(mrl) { try { var vlc = getVLC("vlc"), itemId = vlc.playlist.add(mrl); vlc.playlist.playItem(itemId); } catch (e) { console.log(e); } } //調用 doGo(mrl)
咱們用js 代碼主要是用來切換地址,達到若是流數據地址變化,內容跟着變化。
VlC 給咱們提供了豐富的API ,請查看 VLC API
HLS
簡介
Http Live Streaming (簡稱HLS) ,它在移動 Web 瀏覽器支持挺好,因此如今好多移動端直播都在用此協議。但在 PC Chrome,Firefox 上不支持,因此還須要藉助flash 。在研究的過程當中發現了 video.js 這個插件,代碼託管在 github 上,開源。可是它不直接支持播放 HLS 協議的播放. 須要藉助 videojs-contrib-hls 可是我怎麼測試都沒成功,播放不了。你們有測試通的能夠聯繫我。通過一番的查找,github 上一頓搜索,黃天不負有心人,找見了這個庫FZ-live 我看他也是基於 video.js 的。
html code
<video id="video" class="video-js vjs-default-skin" controls preload="none" data-setup='{}'> <source src="./src/z.m3u8" type="application/x-mpegURL"> </video>
直接寫video 標籤,在 source 的 src 給上路徑就能夠,還有個要求,就是資源不能跨域,須要在同一域下。
js code
//切換地址播放 var player = videojs('video'); player.ready(function() { var myPlayer = this; myPlayer.src(url); myPlayer.load(url); myPlayer.play(); });
咱們用js實現了切換地址播放。 video.js 這個插件提供了好多api 咱們有須要能夠查看,能夠作出好多功能
RTMP
簡介
Real Time Messaging Protocol(簡稱 RTMP)是 Macromedia 開發的一套視頻直播協議,如今屬於 Adobe。因此咱們就只能藉助 flash 了。在研究 video.js 插件的時候,看它也能提供 RTMP 的播放,這下咱們就省事多了。
html code
<video id="vlc" class="video-js vjs-default-skin" controls preload="none" data-setup='{}'></video>
看到我沒有寫 source 標籤,咱們直接用js 來操做,作到播放 RTMP 和 HLS 的適配 .
js code
player.ready(function() { var myPlayer = this; myPlayer.reset(); if (scope.type == 'hls') { console.log('hls'); myPlayer.src({ type: "application/x-mpegURL", src: scope.url }); } else { myPlayer.src({ type: "rtmp/flv", src: scope.url }); console.log('rtmp'); } myPlayer.load(scope.url); myPlayer.play(); });
咱們藉助 player.src() 方法就是實現,根據不一樣的類型設置 src 的type 就能夠。可是每次咱們更改地址的時候,記得調用一下 player.reset() 方法會重置播放器。要不會有問題,切換不了。
結束語
以上我是我在解決前段播放流媒體數據的過程。其中還有幾個問題,須要研究改進。
1. RTSP 在 chrome 的高版本瀏覽器播放
2.videojs-contrib-hls 這個庫播放 hls (猜想,是否是後端給的數據流有問題)