從零開始實現線上直播

spursyy發表於2018-04-19

送走了共享經濟，迎來了直播浪潮。作為一個開發者，總想去探索自己的未知領域。我今天將手把手教你搭建一個SRS直播流服務和一個Node.js服務。Node.js服務向SRS直播流服務請求視訊資料，然後解析請求後的資料，最後將解析後的資料推送給html頁面video標籤。

本文將圍繞以下幾方面展開：

  • 購買雲服務，以及在雲主機上安裝必要的開發環境
  • 搭建SRS視訊流服務
  • 搭建node.js服務，實現解析SRS視訊流資料
  • 解決node.js服務中跨域請求的問題

購買雲服務

雲市場上的服務有很多選擇，諸如國內某某雲、國外某某雲。這裡為了避嫌，這裡就不做推薦。注意本篇文章講述的示例都是在ubuntu系統環境中，因此推薦雲主機安裝ubuntu系統。

下面是不同的終端連線雲服務的工具：

  • 使用 Windows 系統的電腦1、下載安裝 Windows SSH 和 Telnet 客戶端工具 Putty。下載Putty2、使用者名稱：root，Host：193.112.195.1203、按照 Putty 使用幫助進行登入。Putty 密碼方式使用幫助

  • 使用 Linux/Mac OS X 系統的電腦（使用密碼登入）1、開啟 SSH 客戶端（Mac可使用系統自帶的終端）2、輸入ssh -q -l root -p 22 
    193.112.195.1203、輸入 CVM 例項密碼進行登入。

  • 使用 Linux/Mac OS X 系統的電腦（使用金鑰登入）1、開啟 SSH 客戶端（Mac可使用系統自帶的終端）。2、查詢您雲伺服器關聯的 SSH 金鑰檔案本地存放地址。3、您的金鑰必須不公開可見，SSH 才能工作。請使用此命令：chmod 400 [金鑰檔案路徑]。4、輸入命令：ssh [-i 金鑰檔案路徑] root@193.112.195.120。

配置ubuntu系統開發環境

安裝wget

wget命令用來從指定的URL下載檔案，命令可參照wget命令大全。

安裝wget工具命令：

sudo apt-get update  sudo apt-get install wget  複製程式碼
install-wget.png

檢查wget是否安裝成功：

check-wget.png

安裝Node.js環境

在Ubuntu系統下安裝Node.js環境的方式有很多，可參照在Ubuntu下安裝Node.JS的不同方式。本文將採用原始碼的方式：

  • 升級系統，並安裝一些Node.js必須包
sudo apt-get updatesudo apt-get install python gcc make g++複製程式碼
install-gcc.png
  • 獲取Node.JS的原始碼(版本是v8.11.1)
sudo wget http://nodejs.org/dist/v8.11.1/node-v8.11.1.tar.gzsudo tar zxvf node-v8.11.1.tar.gz複製程式碼
install-node.png
  • 開始安裝
cd node-v8.11.1sudo ./configuresudo make install複製程式碼

檢查Node.js的安裝版本:node -v

check-node.png

安裝nginx前需要安裝pcre

安裝pcre

  • 下載pcre原始碼
sudo wget https://ftp.pcre.org/pub/pcre/pcre2-10.31.tar.gzsudo tar zxvf pcre2-10.31.tar.gz複製程式碼
download-pcre.png
  • 安裝pcre

配置

cd pcre2-10.31sudo ./configure複製程式碼
configure-pcre.png

編譯

sudo make複製程式碼
make-pcre.png

安裝

sudo make install複製程式碼
install-pcre.png

安裝nginx前需要安裝zlib

安裝zlib

sudo apt-get install zlib1g-dev複製程式碼
install-zlib.png

安裝nginx

安裝nginx的方法有很多，可以參照Ubuntu中Nginx的安裝與配置。

這裡我將採用原始碼安裝方式，安裝nginx。

下載nginx原始碼並解壓sudo wget http://nginx.org/download/nginx-1.12.2.tar.gz sudo tar zxvf nginx-1.12.2.tar.gz

download-nginx.png

配置

sudo ./comfigure複製程式碼
configure-nginx.png

編譯sudo make

make-nginx.png

安裝

sudo make install

install-nginx.png

**注意：**有時還需要安裝一些nginx包

nginx-package.png

執行如下命令安裝nginx包

sudo apt-get install nginx-coresudo apt-get install nginx-extrassudo apt-get install nginx-fullsudo apt-get install nginx-light複製程式碼

配置nginxnginx.conf檔案通常在資料夾/etc/nginx/nginx.conf中,通過vi命令編輯。vi常見命令

這裡介紹下幾個最常見的vi命令：

  • 開啟檔案sudo vi xxxx

  • 鍵入檔案編輯模式開啟檔案後，按i鍵（檔案底部出現insert）

  • 切換檔案模式在上一步的基礎上按esc鍵（檔案底部的insert消失）

  • 退出檔案在上一步的基礎上按“：”＋“ q ” ＋“！”組合鍵後不儲存並退出在上一步的基礎上按“：”＋“ w ” ＋“q”組合鍵後儲存並退出

啟動nginx服務nginx啟動埠預設是80

啟動前可以先確定下埠的佔用情況：sudo lsof -i:80如果埠被佔用，可以使用kill命令殺死程式。

nginx的啟動檔案一般在/usr/local/nginx/sbin資料夾中，常見nginx服務命令有：

sudo nginx  //啟動服務sudo nginx -s stop //關閉服務sudo nginx -s reload  //重啟服務sudo nginx -t -c /usr/local/nginx/conf/nginx.conf //檢查nginx配置是否正確複製程式碼

在ubuntu中啟動SRS的flv服務

SRS定位是運營級的網際網路直播伺服器叢集，追求更好的概念完整性和最簡單實現的程式碼。SRS提供很多種視訊流服務，詳細可見SRS的github文件。

常見直播協議：

  • RTMP: 底層基於TCP，在瀏覽器端依賴Flash。
  • HTTP-FLV: 基於HTTP流式IO傳輸FLV，依賴瀏覽器支援播放FLV。
  • WebSocket-FLV: 基於WebSocket傳輸FLV，依賴瀏覽器支援播放FLV。WebSocket建立在HTTP之上，建立WebSocket連線前還要先建立HTTP連線。
  • HLS: Http Live Streaming，蘋果提出基於HTTP的流媒體傳輸協議。HTML5可以直接開啟播放。
  • RTP: 基於UDP，延遲1秒，瀏覽器不支援。

我這裡選擇的是http-flv協議，因為我解析SRS視訊流的框架選擇的是Bibili的flv框架，詳見下一節。http-flv流服務部署流程參見SRS-HTTP-FLV部署例項：

  • 獲取srsgit clone https://github.com/ossrs/srs &
    &
    cd srs/trunk
  • 配置srssudo ./configure &
    &
    make
  • 編譯srssudo make
  • 啟動服務sudo ./objs/srs -c conf/http.flv.live.conf
install-srs-flv.png

OBS直播軟體

OBS軟體免費，開源軟體，用於實時流媒體直播和錄製。至於OBS的使用詳細參見鬥魚OBS使用教程。

需要在OBS配置流的路徑：rtmp://你的ip地址/live，以及流的名稱。

configure-obs.png

驗證flv流是否推送成功在瀏覽器中輸入：http://118.89.247.129:8080/live/live.flv，如果出現下載的視訊，則說明OBS成功的向SRS服務推送流服務。

verification-flv.png

解析直播流的框架－flv.js

flv.js是來自Bilibli的開源專案。它解析FLV檔案餵給原生HTML5 Video標籤播放音視訊資料，使瀏覽器在不借助Flash的情況下播放FLV成為可能。詳細參見使用flv.js做直播。

我在github上開源了自己使用flv.js庫實現直播的程式碼。程式碼是使用node.js的express框架搭建的服務，如果想要將程式碼在ubuntu伺服器上執行，需要開發者具備一點node.js的知識。

git clone https://github.com/spursy/live.git   // 克隆node.js程式碼cd live   // 進入專案npm install   //  安裝專案必須的包npm run dev // 啟動專案複製程式碼

注意在啟動專案前需要修改live/view/index.html中的視訊源路徑

if (flvjs.isSupported()) { 
           var flvPlayer = flvjs.createPlayer({ 
               type: 'flv',                "isLive": true,//<
====加個這個                 url: "http://bianchenggou.wang:8080/live/live.flv',//<
==自行修改                //url:"demo.flv"            
  });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
 //載入            flv_start();
        
  }複製程式碼

實現flv視訊流直播

修改異常

當程式啟動node.js服務後訪問http://193.112.195.120:9000/，並不能接收到視屏流，通過chrome瀏覽器的F12快捷鍵檢視異常：

exception.png

控制檯的異常顯示是不能允許跨域請求，解決不允許跨域請求的方式有很多，參見一篇文章可以解決跨域。

我這裡使用的是在伺服器的nginx配置裡設定允許跨域訪問，詳見nginx跨域配置。

在安裝nginx時，nginx.conf檔案放在資料夾**/usr/local/nginx/conf**中。nginx的配置檔案的使用可以參見Nginx教程。

修改如下：

user www-data;
worker_processes auto;
pid /run/nginx.pid;
events { 
       worker_connections 768;
        # multi_accept on;

  }http { 
       ##        # Basic Settings        ##        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;
        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;
        include /etc/nginx/mime.types;
        default_type application/octet-stream;
        ##        # Logging Settings        ##        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;
        ##        # Gzip Settings        ##        gzip on;
        gzip_disable "msie6";
        ##        # Access-Control        ##       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Headers X-Requested-With;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
        server { 
               listen      80;
                server_name  bianchenggou.wang;
                location  /srs/ { 
                       proxy_pass   http://127.0.0.1:8080/;
                
  }                location / { 
                       proxy_pass  http://127.0.0.1:9000/;
                
  }        
  }
  }複製程式碼

由於nginx對所有的請求都做了代理服務，因此live/view/index.html中的視訊源路徑應修改為：

if (flvjs.isSupported()) { 
           var flvPlayer = flvjs.createPlayer({ 
               type: 'flv',                "isLive": true,//<
====加個這個                 url: "http://bianchenggou.wang/srs/live/live.flv',//<
==自行修改                //url:"demo.flv"            
  });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
 //載入            flv_start();
        
  }複製程式碼

當再次訪問node服務時，就不會再出現異常。

node-server.png

真正實現視訊直播

OBS直播軟體的配置不變，按照教程推送直播流後，啟動node.js服務，進去直播頁面：

living.png

來源：https://juejin.im/post/5ad7ce3ff265da505e41ff03

相關文章