搭建一個點播跟直播流媒體伺服器玩玩

程式設計師眾推發表於2020-10-19
伺服器

現在抖音、快手等直播實在是太火了，因此對音視訊的開發非常感興趣，查閱了相關資料，使用Nginx搭建一個簡單的直播跟點播流媒體伺服器，能夠實時推流到伺服器，同時在網頁端播放直播的視訊。

先上效果

​ 使用OBS軟體錄製電腦桌面操作推流到自己搭建的流媒體伺服器，然後在網頁拉流播放。當然也可以採集攝像頭、麥克風推流，或者推送本地視訊到流媒體伺服器。

搭建步驟

Ubuntu18.04安裝nginx-flv模組擴充套件

這裡我是用虛擬機器安裝了Ubuntu18.04先下載nginx1.19.3的原始碼與nginx-http-flv-module的原始碼。

wget https://github.com/winshining/nginx-http-flv-module/archive/master.zip
wget http://nginx.org/download/nginx-1.19.3.tar.gz  && tar -zxvf nginx-1.19.3.tar.gz

解壓下載的個原始碼進行編譯，這樣一個Nginx搭建的流媒體伺服器就好了。

 cd nginx-1.19.3 #進入nginx原始碼目錄
 ./configure --add-module=../nginx-http-flv-module-master
 vim objs/Makefile #刪除-Werror
 make
 make install

進行點播與直播配置

​ 上面已經安裝好了nginx，編輯/usr/local/nginx/conf/nginx.conf進行相關配置。這裡直接貼出完整的配置。其中rtmp為開啟rtmp服務功能，並且為了能夠在網頁端播放開啟了hls。推流的rmtp流會轉換成hls協議的ts切片，儲存在伺服器上，nginx配置了location讓網頁能夠訪問切好的hls切片。

​ 這裡解釋下rtmp是adobe的私有協議，必須使用flash播放。hls是蘋果開發的視訊傳輸協議使用http進行傳輸。ios跟android支撐的都很好，一般進行跨平臺直播使用hls協議比較常見。

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}

rtmp {                #RTMP服務
   server {
       	listen 1935;  #//服務埠
        chunk_size 4096;   #//資料傳輸塊的大小


        application vod {
                play /opt/video/vod; #//視訊檔案存放位置。
        }
        application live{
            live on; #直播
            hls on; #把直播伺服器改造成實時回發伺服器,視訊切片成ts
            wait_key on; #對視訊切片進行保護
            hls_path /opt/video/rtmp/hls; #ts切片存放位置
            hls_fragment 10s; #切片大小
            hls_playlist_length 60s; #回看的時間
            hls_continuous on; #連續模式
            hls_cleanup on; #對多餘切片進行刪除
            hls_nested on; #巢狀模式
        }
   }
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location /stat {    #第二處新增的location欄位。
            rtmp_stat all;
        	rtmp_stat_stylesheet stat.xsl;
    	}

   		location /stat.xsl { #第二處新增的location欄位。
      	 root /usr/local/nginx-http-flv-module/;
   		}
		location /hls {
    		types {
        		application/vnd.apple.mpegurl m3u8;
       	 		video/mp2t ts;
    		}
    		alias /opt/video/rtmp/hls;
    		add_header Cache-Control no-cache;
    		add_header Access-Control-Allow-Origin *; 
		}
   		location / {
            root   html;
            index  index.html index.htm;
  	  }
}

進行測試

使用obs推流推送到rtmp://192.168.227.128/live串流金鑰隨便填寫即可。

image-20201017125252531

​ h5網頁端採用video.js進行播放直播流視訊,這裡的播放的地址是切好片的m3u8檔案地址，m3u8存放了每一個小切片的地址。

<body>
		<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
		  <source
		     src="http://192.168.227.128/hls/test/index.m3u8"
		     type="application/x-mpegURL">
		</video>
		<link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet">
		<script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>
		<script src="videojs-contrib-hls.min.js"></script>
		<script src="https://unpkg.com/browse/@videojs/http-streaming@2.2.3/dist/videojs-http-streaming.min.js"></script>
		<script>
		var player = videojs('example-video');
		player.play();
		</script>
	</body>

​ 上面的nginx配置還配置了本地視訊檔案點播配置，把視訊檔案放在/opt/video/vod位置，使用vlc填寫rtmp://192.168.227.128/vod/qlgame.mp4進行播放即可。

image-20201018163103770

以上搭建只是測試學習使用，實際音視訊開發涉及採集、編碼、推流、傳輸、拉流、解碼等等過程，每一個過程都設計許多知識。後面音視訊開發學習筆記，等我攢了一些筆記發出來互相學習。

相關文章