ffmpeg+nginx+rtmp+web實現視訊直播網站

yuyuefan002發表於2018-03-27
NginxWeb網站

專案簡介：視訊直播網站由三個部分構成：1.推流端 2.伺服器 3.拉流端。在該專案中，推流端用ffmpeg完成，伺服器由NGINX+RTMP模組完成，拉流端使用videojs完成。
一、開發環境簡介：
推流端：系統：UBUNTU 16.04 工具：ffmpeg
伺服器：系統:   UBUNTU 16.04 工具：NGINX+RTMP
拉流端：系統：WINDOWS 10   工具：PHPSTORM

二、構建伺服器
伺服器由NGINX+RTMP構成。NGINX是HTTP伺服器，RTMP是附加模組。
其中NGINX我選擇的是用原始碼編譯方式進行安裝，因為這種方式可以自定義安裝指定的模組以及最新版本。
首先配置各項依賴庫。
1.安裝gcc g++依賴庫
sudo apt-get install build-essential
sudo apt-get install libtool

2.安裝pcre依賴庫
sudo apt-get update
sudo apt-get install libpcre3 libpcre3-dev

3.安裝zlib依賴庫
sudo apt-get install zlib1g-dev

4.安裝SSL依賴庫
sudo apt-get install openssl libssl-dev


5.安裝NGINX
#下載NGINX（到HOME目錄）
wget http://nginx.org/download/nginx-1.13.10.tar.gz
#解壓
tar -zxvf nginx-1.13.10.tar.gz
#下載RTMP（到HOME目錄）
git clone https://github.com/arut/nginx-rtmp-module.git
#進入NGINX解壓目錄
cd nginx-1.13.10
#配置
./configure --prefix=/usr/local/nginx --add-module=~/nginx-rtmp-module --with-http_ssl_module
#編譯
make
#安裝
sudo make install
#開啟nginx配置檔案
cd /usr/local/nginx/conf/
sudo gedit nginx.conf
#下拉至文件末尾，新增RTMP服務
rtmp {  
  
    server {  
  
        listen 2018;  #服務埠，避開重要埠即可   
  
        application live {  
        	live on;
    	}  
        application hls_alic{
		live on;
		hls  on;
		hls_path /tmp/hls;
	}
}  
#不要關閉文件，回到http服務配置處，按以下樣式對其修改,最後儲存並退出
http {  
    include       mime.types;  
  
    default_type  application/octet-stream;  
  
    sendfile        on;  
  
    keepalive_timeout  65;  
  
    server {  
  
        listen       80;  
  
        server_name  localhost;  
    	location /stat {        
            	rtmp_stat all;  
            	rtmp_stat_stylesheet stat.xsl;  
  	}  
  
    	location /stat.xsl {    
        root /usr/local/nginx/nginx-rtmp-module/;  
    	}  
  
        location / {  
            root   html;  
            index  index.html index.htm;  
        }  
  
        error_page   404		/404.html 
        location = /50x.html {  
            root   html;  
        }  
    }  
}  
#開啟nginx服務
cd /usr/local/nginx/sbin
sudo ./nginx
#如要檢視NGINX服務是否開啟，請開啟瀏覽器並輸入localhost，如果看到nginx頁面即為成功，或使用以下程式碼
ps -ef|grep nginx

三、配置推流端

簡易的推流端使用ffmpeg即可完成。

1.     安裝ffmpeg（如果你是16.04以上版本，直接安裝就行sudo apt-get install ffmpeg）

sudo add-apt-repository ppa:kirillshkrogalev/ffmpeg-next  
sudoapt-get update
sudo apt-get install ffmpeg

2.啟用ffmpeg進行推流

ffmpeg  -f video4linux2-framerate 25 -video_size 640*480 -i /dev/video0 -f flv rtmp://192.168.1.107:2018/live

如果推流成功，代表RTMP服務配置成功

 

引數備註：

    -f：視訊格式，video4linux2代表攝像頭

    -video_size：輸入流的解析度，隨意填。

    -i:輸入流視訊格式

    -f:輸出流視訊格式

    沒有引數的內容就是輸出流地址

四、配置拉流端

如果你想直接測試能否拉流，推薦使用VLC（www.videolan.org/），這是一個相容各平臺的工具。

1.下載並安裝完成後，開啟VLC-右鍵視訊欄-開啟媒體-開啟網路

2.在URL欄內輸入伺服器所在地址，不要漏掉埠號，並點選播放。

如果你想要在網頁中播放該視訊，請新建一個html5文件，我使用的是phpstorm（http://www.jetbrains.com/phpstorm/）進行編輯。註冊時可以使用edu郵箱，可以獲得一年使用權。

1.  新建一個工程並新建一個html5檔案。

2.  複製以下程式碼並用瀏覽器瀏覽，注意開啟flashplayer

<html>
<head>
    <title>Live</title>
    <meta charset="utf-8">
    <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
    <!-- If you'd like to support IE8 -->
    <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
    <script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="300"
       poster="http://ppt.downhot.com/d/file/p/2014/08/12/9d92575b4962a981bd9af247ef142449.jpg" data-setup="{}">
    <source src="rtmp://192.168.1.107:2018/live/" type="rtmp/flv">
    </p>
</video>

</body>
</html>
注：轉載前請通知本人。

相關文章