從零開始實現線上直播

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。下載Putty 2、使用者名稱：root，Host：193.112.195.120 3、按照 Putty 使用幫助進行登入。Putty 密碼方式使用幫助

  • 使用 Linux/Mac OS X 系統的電腦（使用密碼登入） 1、開啟 SSH 客戶端（Mac可使用系統自帶的終端） 2、輸入ssh -q -l root -p 22 193.112.195.120 3、輸入 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 update
sudo 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.gz
sudo tar zxvf node-v8.11.1.tar.gz
複製程式碼

install-node.png

  • 開始安裝
cd node-v8.11.1
sudo ./configure
sudo 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.gz
sudo tar zxvf pcre2-10.31.tar.gz
複製程式碼

download-pcre.png

  • 安裝pcre

配置

cd pcre2-10.31
sudo ./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-core
sudo apt-get install nginx-extras
sudo apt-get install nginx-full
sudo apt-get install nginx-light
複製程式碼

配置nginx nginx.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部署例項：

  • 獲取srs git clone https://github.com/ossrs/srs && cd srs/trunk
  • 配置srs sudo ./configure && make
  • 編譯srs sudo 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

相關文章